KOEN

SVG Optimizer & SVG to CSS

SVG · OPTIMIZE · DATA URI

Minify SVG by stripping comments, metadata and editor junk and rounding numbers, then turn it into a CSS background or mask data URI. Runs in your browser.

0 B
0 B
SAVED 0%

0 B → 0 B

Add an SVG and you'll see what was removed.

Preview

Original SVG preview
Original
Optimized SVG preview
Optimized

Use in CSS

Encoding
Live CSS preview

0 B

        

      

    

    
Your SVG code is never uploaded. It's processed on this device with the browser's DOMParser.

  









  

    

      HOW TO
      
How to use

      
    
      
  1. Paste SVG code, drop a .svg file or press Open SVG file.
    2. 
      
  2. Choose what to strip, like comments, metadata, editor data and default attributes, and set the decimal places.
    3. 
      
  3. Check the size savings and the side-by-side preview. A pixel comparison tells you if the shape changed.
    4. 
      
  4. Copy the optimized code or download the .svg.
    5. 
      
  5. Under Use in CSS, pick background-image or mask-image and URL or Base64 encoding, then copy the CSS.
    6. 
      

    

    

      PAIRS WELL WITH
      
Pairs well with

      
    

  

  
  

    FAQ
    
FAQ

    
Is my SVG uploaded?
No. The SVG is parsed and optimized in your browser with DOMParser, and nothing is sent to a server.

    
Will optimizing change how my SVG looks?
Usually not. After optimizing, both versions are rendered at 256px and compared pixel by pixel. If they differ, increase the decimal places or turn options off one at a time.

    
Should I use background-image or mask-image?
background-image keeps the colors inside the SVG. mask-image uses only the shape and paints it with background-color, so you can recolor the icon with CSS, for example on hover or with currentColor.