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
  • Penumbra

    Color & tools

    Open source

    An open-source generator for layered, realistic box shadows

    Free4.7
    • shadows
    • css
  • Rampsmith

    Color & tools

    Freemium

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

    Free / $6/mo4.8
    • color ramps
    • accessibility
  • Contrast Ledger

    Color & tools

    Paid

    A Figma plugin that audits every text layer in a file for contrast issues

    $8/mo4.6
    • accessibility
    • figma plugin
Live demo · Swatchyard— View template →