SVGs on web pages
Saturday, 4. August 2007, 16:04:27
Up until now, I've been using code similar to the following to put SVG images on my web pages:
The problem with that is that it's clunky and duplicates the src/data, width and height attributes, which makes it easy to mistakenly put different values in the two elements.
A recent project of mine involving a web-enabled microcontroller caused me to revisit the above code. I was running really tight on memory, literally counting bytes to get everything to fit. The above code was a good candidate for trimming a bit of fat.
After some searching and trial-and-error, I found that ASV's problem with the object element was nothing more than the type attribute! The above code reduced to:
This has changed, see below. I tested it to work with IE+ASV, Firefox, Opera and Safari(Windows). It also validates, of course. The only caveat is that the web server must use the correct MIME type ("image/svg+xml"), which it should be doing anyway.
The bytes saved enabled me to polish off the last couple of remaining bugs in my microcontroller project without spending ages scrounging around for fatty code elsewhere - with a whole two bytes to spare!
Edit: Last night I was reviewing this and found it had stopped working in IE and Firefox, but I was too tired to be bothered investigating. However, this morning it's working again! It never stopping working in Opera.
Edit2: I've just found the following that seems to be more reliable:
Source of above: http://joliclic.free.fr/html/object-tag/en/object-svg.html
<!--[if !IE]> <--> <object type="image/svg+xml" data="foo.svg" width="420" height="360"></object> <!--> <![endif]--> <!--[if IE]> <embed src="foo.svg" width="420" height="360"></embed> <![endif]-->The common mood on the 'net at large is that the Adobe SVG Viewer (ASV) (the only way to get IE to display SVGs) is not happy with the standards-compliant object element, but works much better with the embed element. The conditional comments ensure that standards-compliant browsers (including the HTML validator) got the standards-compliant code, while IE and ASV got what they wanted.
The problem with that is that it's clunky and duplicates the src/data, width and height attributes, which makes it easy to mistakenly put different values in the two elements.
A recent project of mine involving a web-enabled microcontroller caused me to revisit the above code. I was running really tight on memory, literally counting bytes to get everything to fit. The above code was a good candidate for trimming a bit of fat.
<object data="foo.svg" width="420" height="360"></object>So much shorter, simpler and more maintainable!
This has changed, see below. I tested it to work with IE+ASV, Firefox, Opera and Safari(Windows). It also validates, of course. The only caveat is that the web server must use the correct MIME type ("image/svg+xml"), which it should be doing anyway.
The bytes saved enabled me to polish off the last couple of remaining bugs in my microcontroller project without spending ages scrounging around for fatty code elsewhere - with a whole two bytes to spare!
Edit: Last night I was reviewing this and found it had stopped working in IE and Firefox, but I was too tired to be bothered investigating. However, this morning it's working again! It never stopping working in Opera.
Edit2: I've just found the following that seems to be more reliable:
<object type="image/svg+xml" data="foo.svg" width="420" height="360"> <param name="src" value="foo.svg" /> <a href="foo.svg">Demo SVG</a> </object>(The anchor is not required, it's just there as a fallback)
Source of above: http://joliclic.free.fr/html/object-tag/en/object-svg.html
WIDGETIZE