Scaling SVG images in HTML
Sasha1024
of original size 32x32, and I want to display them in some sections of
my webpage as 16x16 (without editing them, of course).
I tried the following ways:
1. '<img src="aaa.svg" width="16" height="16">' -- doesn't work at all.
Unlike Opera, Firefox doesn't display SVG images though <img> tag.
2. '<object type="image/svg+xml" data="aaa.svg" width="16"
height="16"></object>' -- doesn't work. Firefox shows clipped image
instead of scaled (shows upper-left quarter of image).
2a. The same using CSS (style="width: 16px; height: 16px") -- with the
same result.
Why doesn't Firefox display SVG images though <img> tag? How can I scale
them in another way? Do I need to add some <param> to <object>?
Just to clarify: The final version of website will not contain SVG
images, I'll rasterize them to PNG. But before rasterizing I want to see
what size looks better on the site. So right now I actually don't need a
correct way that will work in any browser, just a quick-and-dirty way to
display on my own computer. E.g. some change in about:config to allow
SVG through <img> will be enough for me now.
(However, the correct way of scaling is interesting too.)
Sasha1024
write answer here myself, cause it may be useful for other users.
So, at first, image was not scaled, not because I used incorrect way to
specify its size in the webpage ('<object ... width="16"
height="16"></object>' was correct), but because of the contents of the
SVG-file itself.
SVG file contained '<svg ... width="32px" height="32px" ...>...</svg>',
as Inkscape created it. To be properly scaled it should contain '<svg
... width="100%" height="100%" viewBox="0 0 32 32" ...>...</svg>'. I've
edited it manually in text editor, and now it scales correctly in
Firefox, Opera and Konqueror.
At second, about displaying SVG through <img>. It doesn't works in
Firefox now, but will be implemented later.