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…