Chinese Year of the Horse.
Horse.svg – looks beautiful everyone.
it’s 13.7 k EVERYWHERE. Phone, tablet, desktop…. everywhere!!!!
SVG is Flexible, sharp, small and accessible.
SVG is responsive and responsible.
SVG is as easy as including it in the tag.
Supported in all current browsers and two versions back.
SVG could be learned, but you don’t have to. Just export it like .jpg If you have a vector file then you can get a SVG.
SVG on the monitors…. could this be included on ami.responsivedesign.is
SVG is great for icons, illustrations, diagrams,
Designed specifically for the web. It’s about describing how the image should be drawn, not downloading a picture.
How to use it
Get an SVG from the web. Just steal one.
Now just put it in an image tag and it works.
if it doesn’t work, addType image/svg+xml
Use it in CSS, background: url(horse.svg);
Viewbox – it’s like having a canvas.
Use CSS3 background-size: cover; with SVG because you won’t be scaling up a raster image that will then look too pixelated.
img[src$=.svg] {}
SVG retains it’s edit ability.
Noun Project. Thousands of icons and SVG.
3 Big Advantages.
- Shapes are in the dom and available through CSS]
- No additional HTTP Request (like data URI but better)
- Define a shape once and reuse multiple times
SVG Sprites
Take everything you built with the sub text, then use it as a linked file with
These are better because vector is awesome, no background positioning, CSS Control.
responsiveicons.co.uk
Build Tools
IcoMoon allows you to export as SVG and it will still do exactly what Chris has already described.
Gulp and Grunt already have tools to do this for you if you have a folder of sag’s already. get the Grunt and Gulp links for this
Grunticon is just about to move over to the inlive SVG stuff too.
SVGO – SVG Optimsation – see Kyle Foster
SVG vs Icon Fonts
see images on the phone.
## Fallbacks
SVGeezy – JS that looks for SVG and will fallback to png (but it’s up to you to provide the png in the right spot).
Use Picturefill for easy fallbacks.
Use moderniser .no-svg
JonathanTNeal – SVG for everybody. – fallbacks for SVG, this should be done for rwd.is inline icon.
Aweseome stuff
fixate.it
eleqtriq
2014.cssconf.com – check the code pen related.
snap.svg
Hands On: SVG Filter Effects.