Retina ready adaptive svgs for IE8 +

If you find yourself saving a 2X version of an asset for your website

STOP.. seriously STOP right now.

Let us examine the flaw with 2X assets. Right now it makes sense due to retina displays having 2X the pixel density. But it is only a matter of time until there are 2.5X displays … and so on and so on… thus you would most likely find yourself going back to your original assets and saving them off again. Needless to say I think that you can recognize the issue.

Now for some assets it does make sense to do this, namely photographs and raster artwork, but for everything else this should be your workflow.

I am going to step you through how to take your vector artwork from Photoshop and bring it to the web.

First, open your photoshop document.. select your vector mask/layer and copy it. (command C)

Open up Illustrator and paste it.

Change the fill color to whatever your heart may desire.

Alright, so now we want to clip the art board.

Simply hit shift O and double click on your shape.

Alright, now lets export the shape to a SVG.

Command shift S .. change format to SVG.

Match these settings.

Alright, now comes the dark art of making these work just about everywhere that you care.

If you open the SVG in your text editor you will see the following, you can delete quite a bit of the adobe crud at the top.

You should be left with something like this.

After that you need to wrap the entire svg block in:

<script type="image/svg+xml">
...
</script>

After you have done that you will want to change the ID of the SVG to something unique (not Layer_1).

And finalllly you will need to add an additional attribute to the SVG tag to make it so that it can scale via CSS.

preserveAspectRatio="xMinYMin meet"

So the final piece to plug into your site to make this work is SVG WEB (from Google).

Download it here.

<script src="svg.js"></script>

<!-- Further script tags should follow after SVG Web's script tag -->

<script src="foobar.js"></script>
<script>alert('hello world')</script>

If your HTML page and the SVG Web library are in different directories, you also must provide a data-path HTML 5 attribute pointing to where the SVG Web files are. This helps SVG Web figure out where to load up the extra files it needs.

For example, if the SVG Web library is in ../../src, then you would have the following script tag:

<script src="../../src/svg.js" <b>data-path="../../src"</b></script>

Then just place the SVG on your page, typically I make a partial and include it within the page so that the markup of my page does not get bogged down with the SVG path.

If you are interested in learning more here are a few valuable links dealing with the SVG domain

Hope this helps!

—Sam Saccone

Retina ready adaptive svgs for IE8 +.