SVG Optimizer

The SVG Optimizer reads your file with a FileReader (as text) and rewrites it entirely with a chain of regular-expression passes in the browser, so the markup never leaves your machine. It is not a wrapper around the SVGO library; each cleanup is a hand-written regex. The lossless passes strip the XML declaration (<?xml ... ?>), the DOCTYPE, HTML comments, empty attributes like fill="", and the editor cruft that design tools leave behind: it removes inkscape:, sodipodi:, adobe:, and sketch: namespaced attributes, and additionally removes whole inkscape, sodipodi, and adobe elements (the element-removal regex does not cover sketch), plus <metadata>, <title>, and <desc> blocks. A typical Figma or Illustrator export shrinks noticeably from these passes alone because that tooling embeds large metadata and namespace blocks. After running, three stat cards show the original size, optimized size, and a savings percentage computed from the actual byte length of each Blob.

Two passes trade fidelity for size and are worth understanding before you ship the result. The number-precision pass matches any decimal number (the regex (\d+\.\d{1,})) and runs it through toFixed at the chosen precision, then trims trailing zeros; it only activates when precision is below 6 and only touches numbers that already contain a decimal point, so integer coordinates are left alone. Rounding path coordinates can visibly shift curves and positions, which is why precision is a real size-vs-accuracy lever rather than free savings. The color pass collapses #RRGGBB to the three-digit #RGB form when the pairs repeat, and converts a small fixed set of eight CSS color names (white, black, red, green, blue, yellow, cyan, magenta) to their hex equivalents, but only where they appear as a quoted attribute value (="red"); other named colors and colors written inside style strings are left untouched. Inline style attributes are separately minified by removing spaces around colons and semicolons and dropping the trailing semicolon.

Three presets drive the option set. Safe keeps precision at 6 and disables whitespace collapsing, style minification, color shortening, and XML-declaration removal, so it only removes metadata, comments, empty attributes, the DOCTYPE, and editor data. Balanced is the default (precision 3 with most passes on). Aggressive turns precision down to 1 decimal place, which is where curve distortion is most likely. The Options panel exposes every toggle plus a 1-to-6 precision dropdown, and both the precision and the active preset are stored in the URL so a configuration can be shared via the Share Config button. Note that two checkboxes in the UI, Remove Unused Defs and Shorten Ids, are presented as options and set by presets but are never referenced inside the optimization routine, so toggling them has no effect on the output. The side-by-side preview renders both versions on a checkerboard background after stripping their width and height attributes (keeping viewBox) so you can confirm the optimized graphic still looks right before downloading it as <name>-optimized.svg or copying it to the clipboard.