Scaling in Web Pages

Post about projects that use Inkscape for web design.
ElMarko

Scaling in Web Pages

Postby ElMarko » Sun May 25, 2008 5:02 pm

I thought vectored images would be great for web pages assuming that it would be scaled to fit the window given, at least, in Firefox.

This doesn't seem to be the case. Or am I doing something wrong?

User avatar
sas
Posts: 404
Joined: Sat Oct 06, 2007 5:42 am

Re: Scaling in Web Pages

Postby sas » Sun May 25, 2008 7:58 pm

The problem is that Inkscape gives its SVG files an absolute width and height. In order to make the image scale to fit the available space, you need to remove the height and width and add an appropriate viewBox. For example, instead of width="400" height="300" you would have viewBox="0 0 400 300". See this earlier thread: how to add viewBox to inkscape document.

ElMarko

Re: Scaling in Web Pages

Postby ElMarko » Sun Jun 01, 2008 4:37 pm

Now I'm confused. I thought the units were just a convenience for the user and that the image was stored as arbitrary values to be scaled.

I used vi to add the viewBox line using the height and width values and eliminated the height and width lines. When I went to edit the image in inkscape it was scaled differently. I had lots of 60x60 squares that were now some size that had fractions to the thousandths.

So how do I start an image that isn't associated with any real world unit of measurement.

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Scaling in Web Pages

Postby microUgly » Sun Jun 01, 2008 6:07 pm

I don't know how Inkscape handles a SVG that uses a viewBox, but you could can create such a file (based on the default template) and save it as a new template (or replace the default one).

User avatar
sas
Posts: 404
Joined: Sat Oct 06, 2007 5:42 am

Re: Scaling in Web Pages

Postby sas » Sun Jun 01, 2008 6:28 pm

ElMarko wrote:Now I'm confused. I thought the units were just a convenience for the user and that the image was stored as arbitrary values to be scaled.

Yes, it is. But putting something like width="60" height="60" on the image tells the SVG viewer to show it at a particular size (though it may be possible for the user to override this, e.g., by zooming in or out).

I used vi to add the viewBox line using the height and width values and eliminated the height and width lines. When I went to edit the image in inkscape it was scaled differently.

I didn't realise that you intended to edit it further after adding the viewBox. Inkscape still has lots of problems with viewBox.

I had lots of 60x60 squares that were now some size that had fractions to the thousandths.

Yes, A4 size. This bug was fixed a few weeks ago, so it will be gone in 0.47. For now, if you want to edit files that have a viewBox in Inkscape, I suggest putting width="100%" height="100%" rather than omitting the width and height entirely - the meaning is the same, but it avoids the bug.

In general, I wouldn't recommend trying to edit a file in Inkscape while it has a viewBox, but this particular combination (width="100%" height="100%" viewBox="0 0 ... ..." and no preserveAspectRatio) seems to work OK.

So how do I start an image that isn't associated with any real world unit of measurement.

Given Inkscape's current feeble support for viewBox, microUgly's suggestion of making a new template is probably the best option.


Return to “Inkscape & the Web”