Hello,
When I embed my svgs done with inkscape in a web browser they are displayed with the width and height specified in the document properties. I would like to make them scale to the browser window size. I tried a lot of different ways but until now I was not able to do that (tested on opera/firefox/chrome): displaying the svg directly, embeding it in an html page, using the viewbox tag.
I am sure this can be done quite easily since there are some sample svg files on the net that scale well. One example is here:
http://www.alistapart.com/d/using-svg-f ... tbrush.svg
I would appreciate some help on that.
Romain.
svg scaling in web browser
Re: svg scaling in web browser
The "Optimized SVG" save option in Inkscape 0.47 does this, among other things. Only use this to save a copy for use on the web, not for your master copy (since it also removes all the Inkscape-specific mark-up).
Alternatively, you can do it by editing the SVG file in text editor: it's just a matter of removing the 'width' and 'height' attributes from the root 'svg' element, and adding a suitable 'viewBox' attribute.
The example file that you link to also has preserveAspectRatio="none" in the root 'svg' element. This is not usually desirable (it means that the image can stretch different amounts horizontally and vertically, distorting the image), but you can add it by hand if you need it.
Alternatively, you can do it by editing the SVG file in text editor: it's just a matter of removing the 'width' and 'height' attributes from the root 'svg' element, and adding a suitable 'viewBox' attribute.
The example file that you link to also has preserveAspectRatio="none" in the root 'svg' element. This is not usually desirable (it means that the image can stretch different amounts horizontally and vertically, distorting the image), but you can add it by hand if you need it.
Re: svg scaling in web browser
I already tried to remove the width/height nodes without success. Maybe there is something else I missed. I do not think I configured the viewport at the same time.
Anyway the Optimized svg works great, thanks!
Romain.
Anyway the Optimized svg works great, thanks!
Romain.