svg + img == awesome

I used an SVG file as the src attribute of an HTML img to solve two problems over the last couple weeks. First, I was working on an HTML5 replacement for the flash (.swf) banner at the top of http://mysticriver.org/. The slideshow worked fine, but we ran into a problem compositing the logo over the animating background images. The logo was created in illustrator. We were loading the logo as a gif with transparent background, and we ran into a problem where the logo would render with a white outline artifact. We found a trick to remove the artifact when compositing against a solid background, but that didn't work for an animating sequence of background images. We finaly tried referencing an svg version of the logo from the img tag, and that worked great - the browser (we tested IE10, Firefox, Chrome, iPhone Safari, Android Chrome) smoothly rendered the svg over the img background. We kept the gif around too as a fallback for older browsers.

I was so happy with how well svg worked with the banner that I decided to use inkscape to create an svg icon for little ToDo:

Another benefit of an svg icon is that it nicely scales to the different sizes that various devices prefer:

<link rel="shortcut icon" href="/littleware_apps/resources/img/appIcons/littleToDo/checkbox.16x16.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/littleware_apps/resources/img/appIcons/littleToDo/checkbox.57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/littleware_apps/resources/img/appIcons/littleToDo/checkbox.72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/littleware_apps/resources/img/appIcons/littleToDo/checkbox.114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/littleware_apps/resources/img/appIcons/littleToDo/checkbox.144x144.png" />

I did run into a couple weird svg corner cases. First, internet explorer required that the svg file specify the viewBox and preserveAspectRatio properties in order to properly override the img dimensions via CSS or the width and height img attributes. Next, and related, inkscape does not set the viewBox and preserveAspectRatio attributes, so I set them by hand with inkscape's XML editor.