Cleaner SVGs with Sketch & Ai

Tom Williams |

Cleaner SVGs with Sketch

At time of writing, several bugs exist in Sketch to muddy SVG output with additional html in export. As noted by Sean Kesterson these can be avoided by removing:

  1. Half pixels from artboard’s position.
  2. Icon rotations.

General steps to achieving cleaner SVGs

Some helpful points noted by Sara Soueidan.

  1. Simple Shape Elements, Not <path> 's.
  2. Simplify Paths.
  3. SVG Filters, (Not Photoshop Effects/alternatives).
    Effect → SVG Filters
  4. Fit Artboard to Drawing.
    Object → Artboards → Fit to Artwork Bounds
  5. Remove bounding boxes (unnecessary).
  6. Use Good Naming, Grouping and Layering Conventions.
  7. Select Suitable Export Options.
  8. Optimize with SVGO if no intent to animate.
Example

An example of a clean SVG from Ivan Petropolsky.

<?xml version="1.0" standalone="no"?>  
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">  
  <path d="M8,7.4 L9.51351351,6 L16,12 L9.51351351,18 L8,16.6 L12.972973,12 L8,7.4 Z" fill="#000"/>
</svg>
Show Comments