Color & toolsOpen source

Nibble SVG

An in-browser SVG optimizer with a side-by-side diff before you export

About this resource

Nibble SVG cleans up exported SVG files: it strips editor metadata, merges paths, rounds coordinates and removes hidden layers, typically cutting files by 40 to 70 percent. Unlike most optimizers it shows the original and optimized versions side by side with a pixel diff, so you see if a setting breaks the drawing before you ship it.

It's useful for front-end developers adding icons and illustrations to a codebase, and designers handing off clean assets. It's open source under the MIT license, works offline as an installable web app and processes up to 200 files at once. The caveat: it doesn't optimize embedded raster images inside SVGs.

Highlights

  • 01Pixel diff between original and optimized files
  • 02Batch processing for up to 200 SVGs
  • 03Works offline, files stay on your machine

Tags

Related resources

More in Color & tools
  • An open-source generator for layered, realistic box shadows

    • shadows
    • css
    • open source
    Open sourceFree
  • Rampsmith

    NewFeatured

    Generates accessible 11-step color ramps and checks every pair for contrast

    • color ramps
    • accessibility
    • tokens
    FreemiumFree / $6/mo
  • A Figma plugin that audits every text layer in a file for contrast issues

    • accessibility
    • figma plugin
    • wcag
    Paid$8/mo
Live demo · Kerning Shelf— View template →