Tiny SVG guide

tiny-svg-guide.md

Existing SVG

1. use https://aydos.com/svgedit/
2. change viewport to 999x999 or 99x99
3. make relative
4. round to integer

From Scratch

1. use https://yqnn.github.io/svg-path-editor/ or https://github.com/MewPurPur/GodSVG
2. upload your reference image and use 999x999 or 99x99 as the image size (preserve aspect ratio)
3. set reference transparency to 50%
4. enable snap to grid, fill, and minify output
5. start path with move to at point closest to top left
6. always trace counterclockwise
7. prefer
   1. v/h line
   2. line
   3. quadratic bezier curve
   4. shorthand / simplified curve
   5. curve
   6. arc (sometimes better than curve)
8. switch each command (click letter) between relative and absolute to find most optimal

Finalizing the SVG

1. convert regular paths to svg shapes (use inkscape)
2. merge paths (in the same d path)
3. group common attributes
4. simplify colors (#cacbce -> #ccc)
5. remove whitespace
6. run through one (or both) of the following to smart optimize paths:
   1. https://vecta.io/nano
   2. https://devina.io/svg-minifier
   3. https://online-converting.com/svg-optimizer/
7. manually remove all metadata (do this last since the tools add some extra metadata)

IMPORTANT NOTE

For inverse / negative space clipping, the clipped path must be drawn in the opposite rotation. (fill:clockwise, clipped:counter-clockwise, or vice versa)