currentColor value in CSS comes in very handy when you’ve got an SVG sprite and you want icons to inherit their colour from the surrounding text.
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
I think this might be the most tasteful, least intrusive use of scroll events to enhance a Snowfallesque story. It’s executed superbly.
You can read all about the code. Interestingly, it’s using canvas to render the maps even though the maps themselves are being stored as SVG.
(There’s a caveat saying: “This is a highly experimental project and it might not work in all browsers. Currently there is no IE support.” I don’t think that’s true: the story works just in IE …that browser just doesn’t get the mapping enhancements.)
Quite a few moving parts in this technique from Emil, but it’s very clever.
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.
Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.
An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.
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).
A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.
Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.
A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.
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.
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.
Chris takes a look at all the different ways you can use SVG today.
A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.
Everything you ever wanted to know about using SVG today.
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.
A great in-depth description by Paul of how he optimised his site. More of this please!
Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).
A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.
Brian documents his beautiful Geonames SVG maps.
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).
Weep not, Ethan! SVG lives... possibly in Safari and Dashboard.