[ZanGetsu]

A simple set of python functions to help working with animated SVGs exported from Illustrator

Overview

Part of animating with SVGs is getting references to elements in code and passing them to animation functions. For complicated animations this becomes difficult and hand editing SVG code is slow and gets overwritten when your artwork updates. We decided to write a post-processer for SVGs produced by Illustrator to help speed this up. Layer names are used to create attributes, classes and ID's making selecting them in JS or CSS far easier.

Functions

• process_svg(src_path, dst_path, options)
  
  
• Processes a single SVG and places it in the supplied destination directory. The following options are available.
  
  
• process_layer_names: Converts layer names as defined in Illustator into attributes. Begin the layer name with a '#' to indicate the layer should be parsed. For example #id=my-id, class=my-class my-other-class, role=my-role ...etc. This is useful for fetching elements with Javascript as well as marking up elements for accessibility - see this CSS Tricks Accessible SVG article. You can also use origin=100 100 to set origins for rotating/scaling with GSAP (expands to data-svg-origin). NOTE: Requires using commas to separate the attributes as that makes the parsing code a lot simpler
  
  
• namespace: Appends a namespace to classes and IDs if one is provided. Useful for avoiding conflicts with other SVG files for things like masks and clipPaths.
  
  
• nowhitespace: Removes unneeded whitespace. We don't do anything fancier than that so as to not break animations. Use the excellent SVGO if you need better minification.
  
  
• attributes: An object of key:value strings that will be applied as attributes to the root SVG element.
  

Download