Resizing SVG in html?

Question

So, I have an SVG file in HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it.

I know with a jpeg or whatever I could have it stored as a 50 by 50 icon, then actually display it as a (rather pixelated) 100 by 100 thumbnail (or 10 by 10), by manually setting the height and width in the image_src tag.

However, SVG files seem to be used with object/embed tags, and changing the height or width of THOSE just results in more space being allocated for the picture.

IS there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?

Answer 1

Open your .svg file with a text editor (it's just XML), and look for something like this at the top:

<svg ... width="50px" height="50px"...

Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.

Answer 2

Cool! Thank you for pointing me to the code.

Here's the result: http://www.normanfellows.com/images/item_2097-light-resizable.svg

The Futura Bold font does not reproduce but otherwise the copy is faithful.

Answer 3

The Futura font does not reproduce because it is not installed on your machine.