An Event Apart: SVG is for Everybody

In his SVG is for Everybody talk at An Event Apart in Seattle WA 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:

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.

SVG is not new -its been around since 1999. It was designed for the Web but coverage was not great.

10% of sites on the Web are using SVG according to Google.

To create SVG, you can hand-craft code or use a vector editing tool.

IE 9 does not support gradients but it does support SVG, so you can use it to create gradients in that browser.

SVG will resize itself to whatever space it has to fill, without loosing resolution.

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. Define an object once and reuse it in many places.

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