Tags: svg

Tips for Creating and Exporting Better SVGs for the Web

Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Better SVG Fallback and Art Direction With The <picture> Element

Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).

Progressive Enhancement and Data Visualizations | CSS-Tricks

A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.

SVG Fallbacks | CSS-Tricks

Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.

SVG and image tag tricks

A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

joshje/svg-for-web · GitHub

If, like me, you’ve been using the “export to SVG” plugin for Fireworks and then opening up the resultant file to trim it down, Josh has got you covered: here’s a version of “export to SVG” that will result in much slimmer files.

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

phuu/sparksvg · GitHub

Remember when I made that canvas sparkline script? Remember when Stuart grant my wish for an SVG version? Well, now Tom has gone one further and created a hosted version on sparksvg.me

Not a fan of sparklines? Bars and circles are also available.

Trimming the Fat — Paul Robert Lloyd

A great in-depth description by Paul of how he optimised his site. More of this please!

LukeW | Vector Images for Mobile

Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

Did you have a nice day? - Made by Rattle

A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.


A JavaScript/SVG library for displaying maps in a variety of interesting ways.

Geonames Maps « optional.is/required

Brian documents his beautiful Geonames SVG maps.

Firefox 4: the HTML5 parser – inline SVG, speed and more ✩ Mozilla Hacks – the Web developer blog

Henri Sivonen gives the lowdown on the HTML5 parser that will ship with the next version of Firefox. This is a huge development ...and yet users won't even notice it (by design).

SVG in WebCore

Weep not, Ethan! SVG lives... possibly in Safari and Dashboard.