SVG Optimizer / Formatter
Format and minify SVG files in the browser. Remove comments, metadata, and empty attributes to reduce file size.
SVG is parsed and re-serialized using the browser's built-in XML parser. For heavy optimization (path simplification, transform merging), consider svgo or Squoosh.
About this tool
SVG (Scalable Vector Graphics) is an XML-based vector image format that scales without quality loss at any size. SVG files exported from design tools like Adobe Illustrator, Figma, Inkscape, or Sketch typically contain significant amounts of unnecessary data: application-specific metadata elements, editor namespace declarations, comments, empty or default attributes, unused definitions in defs blocks, and excessive whitespace. This extra data does not affect the rendered output but inflates file size.
Optimizing SVGs reduces file size, improving page load performance and reducing bandwidth consumption. Common optimizations include removing editor-specific XML namespace declarations (xmlns:sodipodi, xmlns:inkscape, xmlns:xlink when unused), stripping metadata elements (title, desc, and metadata elements, unless needed for accessibility), removing XML comments, deleting elements with empty attribute values or display:none, and eliminating redundant attribute declarations that match the default values.
SVG optimization is particularly important for icons and illustrations used on high-traffic pages. An optimized inline SVG eliminates both the HTTP request overhead and the potential FOIC (Flash of Invisible Content) associated with img-tag SVGs. However, note that title and desc elements inside SVGs provide important accessibility information — screen readers use these to describe the image to visually impaired users. Preserve these elements for informational SVGs (diagrams, charts) and only remove them for decorative SVGs that convey no information.