Hello.

I've just started using Inkscape, I've created an image mostly consisting of bezier curves and I want to export in svg format. I've just realized that I cant make this image resize to a percentage unit in the browser, and that to do this all the units in the image should had been in percentage values.

Is that correct? or can I resize the image as is? If not, is there a way to convert my paths so that they use percentage values, or do I need to create the design all over again?

Tnx

You don't need to make all the units percentage values (which isn't possible anyway, as you can't do it in paths). Instead, you should use a viewBox attribute on the root 'svg' element.

For example, if your image currently has width="300" and height="200", then add viewBox="0 0 300 200" and change the width and height to percentages. The percentages are percentages of whatever region the image is being displayed in, so most of the time it's best to set the width and height attributes to "100%" (or just remove them altogether, as they default to 100% anyway) - this way the image scales to fit the viewing region (subject to maintaining aspect ratio, which I assume is what you want - otherwise you need a slightly more complicated viewBox).

The only way to do this in Inkscape is with the XML editor, as Inkscape currently has very little support for viewBox.

Tnx for your help..

I've done what you've told me but still nothing this is what i have in the root "svg" element:



Then when i embed it into the page, I use this code (basically i want to add it as a footer in my page, and i want it to stretch to 100% of the width of my page



Also when i leave the height undefined, it only shows about the top 100px of the image and cuts off the rest..

any ideas or pointers? tnxx!

found it viewBox instead of viewbox works fine, tnx so much for your help!

still have problems

when i create a page just to test whether it stretches it works just fine. when i try to embed it into my actual page, even though im using the exact same code, it actually shrinks to half its size in firefox.

in internet explorer with the adobe plugin, it stretches fine to 100% of the page, but it leaves a huge white gap at the top and the bottom of the frame

this is the code im using:



and in css:



any ideas on how to fix either the internet explorer white space problem or the non-stretching problem in firefox? tnx

I don't have time right now to play with this, but if you can post complete code for both the image and HTML I'll be happy to tool around with it when I can.