SVG is for Everybody: Chris Coyier at An Event Apart Seattle

I can’t tell you how much I’ve learned and how much code I’ve used from Chris Coyier‘s CSS Tricks site. I’ve also wanted to know forever how to use SVG. So this was a great, fast overview to get me started.

Chris also published a full article, Using SVG, with much more detail.

  • SVG: Scalable Vector Graphics
  • SVG is Flexible, Sharp and Small.
  • SVG is Responsive & Responsible.
  • <img src=”image.svg”> is all you need. And you can save a graphic from Illustrator in this format.
  • SVG can be made from anything vector.
  • SVG will never replace raster graphics.
  • The format’s been around since 1999, just now getting great support and excitement in the community.
  • Support for SVG is pretty awesome. Have to get back to IE8 before you lose support.
  • This is not just theoretical. You can start using SVG right now.

The benefits of an SVG file

  • The biggest benefit of an SVG image is that they can be resized as much as you need because it’s vector.
  • The other big benefit is the small file size.
  • Side benefit: .svg is the source file, so you can open and edit it in Illustrator (as opposed to .jpg or .png that’s probably sourced from a .psd).
  • Great hack with SVG: IE9 doesn’t support CSS gradients, but you can point to a .svg file as background where gradients work really well.

Inline SVG

  • Inline SVG: <svg>paths</svg>
  • You can style elements in inline .svg  with CSS by giving the element a class.
  • 3 advantages to using inline SVG
    • Shapes are in the DOM, thus able to be controlled by CSS
    • No additional HTTP request (not a separate file)
    • You can define once in the HTML doc and use again multiple times
  • Because you can style with CSS, you can control the graphics with CSS animations.
  • Awesome example that earned a round of applause: Responsive Icons

SVG vs icon fonts

  • Icon fonts can look nasty when they fail (regular font character might display if icon font doesn’t load).
  • Because it’s a font, browser anti-aliasing will kick in, possibly reducing crispness of the vector.
  • CSS control is much more robust and specific with SVG. Can style multiple colors in same icon, for example, by targeting paths.
  • Positioning is good with SVG. With icon fonts, Chris says “die XXX murder”. So I’m guessing it’s bad.
  • Semantics are terrible with icon fonts. SVG is better, tells browser it’s an image.
  • Accessibility is difficult with icon fonts, to ensure it’s not read by a screen reader as a standard character, etc.
  • The only place icon fonts win is with browser support (back to IE6, vs. only back to IE9 on SVG).

Fallbacks for older browsers

  • SVGeezy detects if browser supports your .svg file with img element. If not, it loads a .png named exactly the same that you provide in same folder.
  • Chris has more fallbacks for different situations in his SVG article.

More tools for using SVG

  • Optimizing SVG files is still important to reduce file size further. SVGO is a great tool to help automate this.
  • Adobe has created a library called Snap.svg
  • SVG Filter Effects