Log in / Register

Forum › How do I...?

Proper embedding of SVG with respect to an aspect ratio

skycaptain
I'm trying to embed an external SVG, with an specific aspect ratio defined in the viewBox property. Im embedding the SVG via an img-tag. My intent is to let the SVG take all the width and take as much height as needed. for that I've set width: 100% on the img-tag. Sadly prince renders the img-tag perfectly squared (you can see that by setting a background-color). the svg is rendered with respect to the aspect ratio, but vertically and horizontally centered in the img-tag. regardless wether I use a portrait or landscape svg the img stays squared. This is a simpler example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <svg style="background:blue;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50" width="100%" height="auto">
      <rect x="0" y="0" width="100" height="50" fill="green"/>
    </svg>
  </body>
</html>

renders like the attached file. As to my understanding the svg height should be calculated by the viewBox and the given width and the blue area should not be visible. Am I wrong?
  1. untitled.pdf‎ 1.9 kB
skycaptain
ok, solved it myself. just define the x, y, width and height properties exactly like your viewBox. The parent object scales the SVG back to 100%
felipellrocha
Any news on this issue? I'm embedding lots of svgs in my documents, and I'm trying to avoid adding those properties back onto the <img> tag manually, but the information is there on the .svg file since it's generated for me by illustrator.
mikeday
Have you tried this with the latest build? The earlier example works for me.

Edited by mikeday

felipellrocha
Sorry for the delay. I tried that, and it didn't work. Looking at the example again, I noticed my case is slightly different.

I have one svg file, test.svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 210.1 29.3" enable-background="new 0 0 210.1 29.3" xml:space="preserve">
<g>
	<g>
		<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="17" y1="12.5" x2="192" y2="12.5"/>
		<g>
			<polygon points="18,14.7 9.9,12.5 18,10.3 			"/>
		</g>
		<g>
			<polygon points="191,14.7 199.1,12.5 191,10.3 			"/>
		</g>
	</g>
</g>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="103.5" y1="13" x2="103.5" y2="14"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="133.5" y1="13" x2="133.5" y2="14"/>
<text transform="matrix(1 0 0 1 101.2856 23.2856)" font-family="'MyriadPro-Regular'" font-size="10">0</text>
<text transform="matrix(1 0 0 1 130.9286 23.2856)" font-family="'MyriadPro-Regular'" font-size="10">1</text>
</svg>


And I'm doing something like:

<img src="test.svg" />

Edited by felipellrocha

mikeday
Ah, so it comes out at 100% width but square, when you expect it to be rectangular?
felipellrocha
Exactly.
felipellrocha
Any news on this? This is a rather important fix to me...
skycaptain
Is it a great effort to re-export the svgs? afaik you don't have to set widths and heights on the img-tag. It's only necessary inside the svg, which you can do by unchecking the "interactive" checkbox in the svg-exporting dialog of illustrator.
mikeday
We have now released Prince 10, which will use the viewBox to determine the aspect ratio of SVG images that do not specify a fixed width/height.