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
- 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).
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.
- If you need to support fallbacks for inline SVG, you can use Modernizer, hiding/showing image and SVG elements, and other Javascript solutions.
- You should also optimize your SVG files like you optimize other Web graphics. SVG-O is a tool that can do that for you.
SVG also supports animations, filters (including CSS filters), and more. It's a massive world of potential.