SVG Images

Now that Safari came out with SVG support, I thought I would start using SVG graphics in this blog. Having worked on the Macintosh I was always fond of vector graphics, and always thought it was a shame that Web content could not even match the functionality of Quickdraw pictures of 1985. Vector graphics are particularly useful for web browser that can zoom in and out, like the one of the iPhone: when zoomed-in, bitmaps are really ugly. The wikipedia logo on the right is in vector format and will look fine even if you zoom in, or print the page.

You would think that the img tag would be the natural choice for embedding images into web pages. You would be wrong: it seems the spec disagrees, you are supposed to use the object tag and Firefox will not display anything if you use the img tag. Safari happily display a img tag pointing to a SVG file.

Why complain? I can see the following reasons for supporting SVG in img:

  • The img is the known way of putting images into web pages.
  • This is the model supported by most web related tools.
  • The alt tag is defined for alternative content.
  • The content of img tags is resized (which is the whole point of vector images), the content of svg content images get clipped, I do not know if this is supposed to be the case or a bug.
  • The content of img tags can be defined as a hyperlink.
    Try clicking on the logo in the upper right corner of this page.
  • The content of img tags can be selected and copied.
    Try copying the image of the logo in the upper right corner of this page.

The only reason I can see against is that the spec does not mention it. Which makes you wonder, what is the point? You would think that whatever group that is pushing for the adoption of SVG would try to make the life of web-developers as easy as possible. Forcing the change of tag basically makes SVG as easy to use as Flash, and Flash has way more features.

Oh surprise, two years later, Firefox 4 implements svg as image, and it is a feature!

2020, I updated the page to use the SVG data from an IMG, as the old way I was decrying is now broken, and IMG supports SVG the way it should have from the beginning…

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: