Log in / Register

Forum › How do I...?

Scale inline SVG?

whittaker007
Hi, I'm loading external SVG files, modifying them, and outputting them as inline SVG graphics. Unfortunately the software we are using (Adobe Illustrator) seems to be incapable of outputting the SVG dimensions as anything other than pixel sizes.

Is there any way to scale an inline SVG to fit a container? I've tried manually editing the SVG and replacing the initial dimensions to "100%" width and height, which ought to work, but doesn't.
mikeday
How about adding width 100% on the <img> element?
whittaker007
No, I'm not using an <img> tag, I'm using inline SVG.
mikeday
Oh, sorry, I misread that. Try this sample document:
<html>
<body>
<div style="width: 500px; border: solid blue thin">
<svg viewBox="0 0 100 50" width="100%" height="100%">
<rect x="0" y="0" width="100" height="50" fill="green" stroke="red"/>
</svg>
</div>
</body>
</html>

The SVG rectangle should stretch to fill the containing <div> element. Is your example like this?
whittaker007
In Firefox and Opera I get a 500px wide blue rectangle with no svg visible. Prince gives the following output errors:
prince: /Users/scott/Desktop/test.html:4: error: Tag svg invalid
prince: /Users/scott/Desktop/test.html:5: error: Tag rect invalid
prince: warning: failed to load external entity "/Users/scott/Desktop/test.pdf"
prince: /Users/scott/Desktop/test.pdf: error: could not load input file


I've since solved my problem in a different way - by abandoning Illustrator in favour of Sketsa (http://www.kiyut.com/products/sketsa/) which is far less refined but generates much cleaner and simpler SVGs that retain the units of measurement they are created with.
mikeday
You're right, that's weird in the browser. Adding namespace declarations and saving the file with a .xml extension makes it work right in Firefox:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width: 500px; border: solid blue thin">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50" width="100%">
<rect x="0" y="0" width="100" height="50" fill="green" stroke="red"/>
</svg>
</div>
</body>
</html>

However, Opera still doesn't expand the SVG to fill the block. The invalid tag errors are coming from Prince using the HTML parser; this can be overridden by giving the file a .xml extension or by passing "-i xml" on the command-line. The last error about test.pdf makes it sound as if it is trying to load test.pdf as an input file? Using "-o test.pdf" should solve this.