frontend
Episode 4
Automating an Inline SVG Workflow
Building on last episode, we cover a seriously compelling workflow blending the best of both worlds — authoring an SVG spritesheet in Sketch but injecting them as Inline SVG, without a bunch of manual steps in between.

In this episode you'll learn

  • How Sketch exports SVG — how objects, layers, masks and artboards are represented in the output
  • How to structure a spritesheet with a series of icons that can be loaded as one but used individually.
  • Javascript to load the SVG, parse it efficiently and inject only the markup that's required.
  • The optimisations that are safe to use that don't destroy crucial information about the SVG file's structure.
  • How to tune the rendering of the output for retina vs non-retina displays, and transition colours or fills based on user input.