SVG Formatter

Why use an SVG formatter?

SVG files exported from design tools or optimized for size are often a single line thousands of characters long. That is fine for browsers but hard for people: you cannot see which <g> a path belongs to, where a gradient is defined, or which attribute to change. This SVG formatter parses the file as XML with Prettier's XML plugin and prints it with one element per line, nested elements indented and long attribute lists broken over several lines.

Example: a 24×24 icon

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <title>Home</title>
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
  <polyline points="9 22 9 12 15 12 15 22" />
</svg>

The root element's attributes exceeded the 80-column line width, so each went on its own line. Short elements such as <path> stay on one line, and self-closing tags get a space before />.

What is and isn't changed

• Changed: indentation, line breaks between elements, attribute wrapping, and spacing inside tags.
• Kept: attribute values, including long d path data and points lists, which are never split or rounded; element order; comments; <![CDATA[ ]]> sections in <style> and <script>.
• Whitespace: the formatter treats whitespace between elements as insignificant (Prettier's xmlWhitespaceSensitivity: "ignore"). That is right for shapes, but runs of spaces inside <text> and <tspan> are collapsed to one, so check labels afterwards if exact spacing matters.

Options

Indent defaults to 2 spaces. Line width decides when attributes wrap: raise it to 120 or more if you prefer each element on one line, lower it to put every attribute on its own line, which makes diffs of icon changes easy to review.

Formatting vs. optimizing SVG

Formatting makes SVG readable but slightly larger. Optimizing, as tools like SVGO do, makes it smaller by rounding coordinates, merging paths and removing editor metadata such as Inkscape or Illustrator namespaces. A common workflow is to format while editing by hand, then optimize for production. If you inline SVG in HTML, the HTML Minifier can collapse the whitespace again.

SVG in React and other frameworks

Pasting an SVG into a React component needs more than formatting: hyphenated attributes such as stroke-width and fill-rule must become strokeWidth and fillRule, and class becomes className. Format the SVG here first so the structure is clear, then convert it with HTML to JSX. Vue and Angular templates accept SVG attributes unchanged.

Common errors

• Unclosed tag – SVG is XML, so every element must be closed: <path ... />, not <path ...>.
• Undefined entity – HTML entities like   are not defined in XML. Use   instead.
• Missing namespace – a standalone .svg file needs xmlns="http://www.w3.org/2000/svg" on the root to display as an image; inline SVG in HTML does not.

To see the drawing while you edit, open it in the SVG Viewer. For other XML documents use the XML Formatter. All processing happens in your browser.