How do you get the width and height of an SVG picture in PHP? How do you get the width and height of an SVG picture in PHP? php php

How do you get the width and height of an SVG picture in PHP?


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.


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.


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.