Recently I tried to add a feature to this site. The feature is to display a Russian flag near links that point to web-sites, language of which is Russian. Of course, I wanted its height to be equal to that of a letter.

So, basically, I want my image to scale up to the size of a letter by user's browser capabilities. "What format does that mean?" I thought. Of course Scalable vector graphics (wiki)! Then this stuff would be scaled with a simple style

But it doesn't work. I tried googling, and it seems that there's no way to make it work. The conclusion is that a Scalable Vector Graphics image just doesn't scale!

A typical attempt to resize SVG via HTML

Here's a sample code:

And here's a sample result:

Vector graphics surely can scale, and what "scalable" should mean is that the format is designed in such a way, that image is easy to scale in size. Perhaps, format allows it, but the way it is integrated in HTML code doesn't allow it.

It was a great surprise to me: I misunderstood the word "scalable" within the definition of SVG. The ability to grow/shrink in size is not appealing enough for standard developers that live in their ivory tower (SVG has been arount for 10 years, and is still not fully supported anywhere). Here's what "scalable" really means:

To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size. On the Web, scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word.

SVG graphics are scalable to different display resolutions, so that for example printed output uses the full resolution of the printer and can be displayed at the same size on screens of different resolutions. The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. SVG graphics can be magnified to see fine detail, or to aid those with low vision.

SVG graphics are scalable because the same SVG content can be a stand-alone graphic or can be referenced or included inside other SVG graphics, thereby allowing a complex illustration to be built up in parts, perhaps by several people. The symbol, marker and font capabilities promote re-use of graphical components, maximize the advantages of HTTP caching and avoid the need for a centralized registry of approved symbols.

from Concepts section of SVG v1.1 specification

Scalability happens to mean something more cool than just resizing, wow! The ability to be re-sized was lost in the row of cool practices SVG allows. But still, while the standard says about different sizes that "it can", in realty it can't. Totally useless.

Comments imported from the old website

S. on 03 May 2010 commented:

In fact it scales, but it depends on the SVG file you use. If you use Inkscape you should remember that by default, when saving as plain SVG, it writes width and height attributes which prevent the image from being scaled. For web you should save it as an Optimized SVG.

An example:

Look into the source of your SVG and you'll be surprised.

The link was consumed in a dark Flash. Once again.

Live example:


Pavel Shved on 04 May 2010 commented:

Thank you for your link, but I already tried it with no effect. The quote from the page you linked:

As far as I know, Gecko does not support SVG in img tag yet.

That guy's right. I tried hard to make it work, and I didn't succeed with my Firefox browser.

That's what I've been talking about. Scaling wasn't considered nice enough to implement its support as soon as possible. Some browsers support it, some don't. I now resize it with JavaScript, which doesn't work in IE and on Nokia n900 default browser... A Pain-in-the-ass Vector Graphics (PVG) instead of Scalable Vector Graphics (SVG).

P.S. Your use of markdown seems to be not supported... I'll try to dig what's happening here, but anyway, Markdown is less of a standard than SVG...