sin3

SVG

Published by Sindre Wimberger on May 7th, 2014

Introduction



Techniques
Can I use SVG
http://caniuse.com/#feat=svg

Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility.

grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike.

takes your SVG drawings and processes them to a CSS icon kit, coming in several different flavors.
http://iconizr.com/


A fast, caching, dynamic inline SVG DOM injection library.
https://github.com/iconic/SVGInjector

A simple JavaScript plugin which detects SVG images on your website, and automatically "looks" for a standard image fallback for those older, less capable browsers.
http://benhowdle.im/svgeezy/

SVG `text` and Small, Scalable, Accessible Typographic Designs

Advanced
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
http://snapsvg.io/

Animated SVG Icons with Snap.svg
https://github.com/codrops/AnimatedSVGIcons

The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS
http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

Accessibility
Tips for Creating Accessible SVG
http://www.sitepoint.com/tips-accessible-svg/

Using ARIA to enhance SVG accessibility
http://blog.paciellogroup.com/2013/12/using-aria-enhance-svg-accessibility

Iconsets

NodeJS

**SVG O**ptimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
https://github.com/svg/svgo

Node-WebKit based GUI for SVGO
https://github.com/svg/svgo-gui

Sindre Wimberger Posted on May 7th, 2014