An Event Apart: SVG is for Everybody

by Luke Wroblewski September 23, 2014

In his SVG is for Everybody talk at An Event Apart in Austin TX 2014, Chris Coyier walked through the current state of SVG and how Web designers and developers can use it on their sites today. Here are my notes from his talk:

  • No matter where you display an SVG file, it will render with the right size & resolution: flexible & sharp at any size.
  • SVG is small in file size, accessible, and can be styled, scripted, animated, interactive.
  • SVG is not new -its been around since 1999. It was designed for the Web but coverage was not great.
  • SVG can made from essentially anything "vector". You can learn the syntax but you don't need to. If you can open it in Illustrator, you can save it as SVG.
  • SVG will never replace raster graphics (sets of pixels), it is good for icons, illustrations, diagrams, charts, logos, etc.
  • Generally, the simpler the art the more likely SVG will be a good fit. If there are too many vector points, PNG may use less bandwidth.
  • To create SVG, you can hand-craft code or use a vector editing tool. SVG syntax can actually be learned. In the new version of Illustrator, you can copy and paste inline SVG.
  • When making SCG in Illustrator, combine shapes to simplify your image and export with Illustrator editing features to reduce file size.
  • You can display SVG as a SRC in an IMG tag or as a background image in CSS.
  • Because SVG can be resized worry-free, you will probably resize them most of the time. Images set to max-width 100% will fill the size of their container and not more. With vector images, you can instead set width to 100%.
  • Inline SVG is just SVG code right inside HTML. You can set styles on each element in the markup.
  • Three big advantages to inline SVG. 1) all the elements are in the DOM so they can be styled and scripted. 2) No additional http requests are needed to load the image 3) You can define it once and reuse it again.
  • SVG templating system: sites need a system for icons. Use inline SVG and wrap elements with DEF tags, which makes sure it does not render. Then display: none on the whole SVG element.
  • From that point on, you can reference the DEFs in your SVG throughout the site (can even link to it in your templates). Define an object once and reuse it in many places. This allows you to reuse the same objects across the page.
  • Interent Explorer won't allow you to link to external files, you need a Javascript solution to load it in.
  • You can set a folder of SVGs and use Grunt to create the inline code and DEFs you need for it. This is the idea of sprites for SVG
  • Unlike image sprites, SVG sprites are vector based, don't require background positioning code, can be restyled with colors, strokes, etc. (including SVG CSS controls).
  • You can control individual parts of SVG using CSS. You get some of these advantages with SVG images but not all of them.

Icon Fonts vs. SVG

  • Both are vectors but icon fonts use anti-aliasing rules.
  • Both have CSS control but SVG has lots more: class names, target parts, SVG specific
  • Positioning of icon fonts is subject to line-heights and letter spacing. SVG is a lot easier to position.
  • Icon fonts have weird failures like CDNs/headers, IE6 supports font-face but other versions of Windows phone do not.
  • SVG has better semantics as it is just images instead of images in text/fonts.
  • Accessibility with icon fonts requires a lot of care. SVG is better as it is just an image tag.
  • Icon fonts win at support (IE6+) vs. SVG (IE9). This is a bigger win for icon fonts.

SVG Sizing

  • In raster images, you have a set of pixels in height and width.
  • Vector drawings are unit-less. They have an intrinsic width and height based on the form of a ViewBox.
  • SVG has a viewport and a ViewBox. If these are the same, things work well.If the viewport is bigger, the ViewBox will center itself.

Dealing with Fallbacks

  • SVG needs fallback for IE 6-8 and Android 2.
  • One fallback is to show nothing. If you are using SVG for icon enhancements, you may not need them on lower end browsers.
  • Multiple background support is basically as good as SVG support so you can use them as fallbacks in background-images.
  • CSS is decorative and non-vital to content, so no fallback might be needed.
  • If you need to support fallbacks for inline SVG, you can use Modernizer, hiding/showing image and SVG elements, and other Javascript solutions like SVG for Everybody".
  • You should also optimize your SVG files like you optimize other Web graphics. SVG-O is a tool that can do that for you.
  • There's a number of build tools you can use to help with the creation & authoring of SVG images.

SVG also supports animations (with SMIL), filters (including CSS filters), and more. It's a massive world of potential.