Chris Coyier — SVG is for everybody

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

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.

  1. Shapes are in the dom and available through CSS]
  2. No additional HTTP Request (like data URI but better)
  3. 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.

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 inline icon.

Aweseome stuff
eleqtriq – check the code pen related.


Hands On: SVG Filter Effects.

Leave a comment

Your email address will not be published. Required fields are marked *