10/12/2016 - No Comments!

Practical SVG, Notes

I'll occasionally publish my personal notes from reading a new book, attending an industry conference or something similar on this  blog. I personally refer back to my own posts frequently, revisiting technical skills or refreshing myself on the highlights for a new project.

This is one of those posts. I just completed reading Practical SVG by Chris Coyier from the A Book Apart series. As usual, it was a fantastic read and brought me up to speed on the current state of SVGs for the web! My notes follow.


  • Clever description of how/when to use HTML vs CSS delivered images. If the image is considered content, use HTML, along with the other content in the markup such as text, videos etc. If the image is considered part of the page design itself, use a background image served via CSS. like buttons, borders, backgrounds etc.
  • SVG doesn't have a native layer stacking system like z-index. It relies on sources order: whichever element s come later in the source code are on top.
  • The g tag in SVG acts similarly to the div tag in HTML. It doesn't do much on its own but is useful for grouping elements to be referenced together later.
  • Symbol is the element to use when building a reusable SVG system.
  • SVG referencing external content (xlink:href=_) file paths require the use of an SVG polyfill. SVG for Everybody is a solid resource for this.
  • Symbol elements wrap the shapes that draw the icons.
  • ViewBox defines the area for them.
  • Use grunt + plugins to automatically generate SVG sprites for production. Or, other automated build tools like gulp, webpack, etc.
  • SVGO is a command line node.js tool that optimized SVG files for the web, commonly saving ~70% file size. It can be integrated easily into your automated Grunt or Gulp scripts.
  • Keep in mind for sizing SVG images
    • The viewport is simply the height and width of the element: the visible area of the SVG image. It's often set as width and height attributes right in the SVG itself, or through CSS.
    • The viewBox is an attribute of SVG that determines the coordinate system and aspect ration. The four values are x, y, width and height.
  • SVGs can respond to breakpoints in CSS. This opens up unlimited opportunity in the realm of responsive web design and the progressive enhancement of SVG elements.
  • There are many methods available to animate SVG. Javascript seems most applicable for my use case at the moment.
    • SnapSVG - The JavaScript SVG library for the modern web. "The jQuery of SVG".
  • SVG has some powerful design features built in, including:
    • Filters
    • Patterns
    • Clipping& Masking
  • Browser support for SVG is pretty good but not ubiquitous.
    • IE8 and Android 2.3 don't support it at all,
    • Book outlines a number of fallback methods depending on how you are using SVG.
    • The best fallback is no fallback in cases where your page's design doesn't require the image for the content's meaning to come through.
  • Make SVG Accessible
    • Similar to inline images, use title, desc and alt tags when applicable to clearly explain what the image is showing for assistive technologies.
    • Use Aria roles to describe an elements purpose.
    • Use text in SVG. It's searchable and helps SEO as well as scales properly with the rest of the image, which is difficult to do with HTML itself.

Published by: Ray in Learning, Technology