How do you get the width and height of an SVG pict

Question

I tried to use getimagesize() on an SVG file, but it failed.

I know that SVG is “Scalable Vector Graphics”, but I find that Google Chrome’s “Review elements” can perfectly get the dimensions of an SVG picture, so I suspect that this is also possible in PHP.

If it is difficult to get the dimensions, is there any way to judge whether an SVG picture is vertical or horizontal?

Answer 1

Regarding dimensions there are basically three different types of SVG images:

1. Fixed dimensions: Images that have width and height attributes. Chrome can show these dimensions perfectly and converts the specified units to pixels.

2. Proportional dimensions: SVG images with a viewBox attribute. Chrome shows the size of such images maximized to 300x150. So an image with a 16:9 ratio is shown as 267x150.

3. No dimensions: SVG images without width, height and viewBox. Chrome (and other browsers as well) use a default size of 300x150 for such images.

It is possible to do get the dimensions with PHP by reading the contents of the SVG image with PHPs DOM extension and applying the rules from above. I wrote the PHP library contao/imagine-svg that does exactly that and can be used as follows:

$size = (new Contao\ImagineSvg\Imagine)
    ->open('/path/to/image.svg')
    ->getSize();
echo $size->getWidth();
echo $size->getHeight();

If you don’t want to rely on a third party library, you can look at the source code of the getSize() method to see how the library determines the dimensions.

Answer 2

The thing is: SVG images don't have a "size" in the sense you are probably thinking of. On the other hand, they DO have a height-to-width ratio.

This ratio can usually be found in the viewBox attribute.

If, on the other hand, the viewBox attribute is not present on the root SVG element, the image ratio is highly nontrivial to determine.

Edit:

Side note: The reason Chrome gives you perfect coordinates isn't necessarily because it looks at the SVG to determine size; it could very well be a simple result of it setting the size.

Although the SVG element does have height and width attributes, these might not be specified as pixels, but any of a number of units, so they aren't necessarily a lot of help.

Answer 3

Here's a quick and dirty hack to check the viewbox size with regex. It works in most cases but do see the other answers to get an idea of its limitations.

preg_match("#viewbox=[\"']\d* \d* (\d*) (\d*)#i", file_get_contents('file.svg'), $d);
$width = $d[1];
$height = $d[2];

Answer 4

An SVG is simply an XML file, so the GD libs will not be of any help!

You should simply be able to parse the XML file to get such properties.

$xml = '
<svg width="500" height="300" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<rect x="90" y="10"
    width="400" height="280"
    style="fill: rgb(255,255,255); stroke: rgb(0,0,0); stroke-width: 1; " />
</svg>';

$xmlget = simplexml_load_string($xml);
$xmlattributes = $xmlget->attributes();
$width = (string) $xmlattributes->width; 
$height = (string) $xmlattributes->height;
print_r($width);
print_r($height);

The values need to be cast or they will return an object.

Answer 5

I had the same question as I could not find an answer, invent and resolved as follows:

<?php
    $svgfile = simplexml_load_file("svgimage.svg");
    $width = substr($svgfile[width],0,-2);
    $height = substr($svgfile[height],0,-2);
?>

Note that the SVG file I used was created in Adobe Illustrator. So, the svg code of the image starts as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="400px" height="738px" viewBox="0 0 400 738" enable-background="new 0 0 400 738" xml:space="preserve">
...

Thanks to this, I could get width and height values.

And I use substr because $svgfile[width] returns the value with "px" suffix. I could also use viewBox value and split it to get the values.

Greetings from Santiago, Chile