Format SVG XML — Clean Up Scalable Vector Graphics Markup

Formatting SVG as XML

SVG (Scalable Vector Graphics) files are valid XML documents. They often become difficult to read due to minified path data, inline styles, and tool-generated attributes. Formatting SVG XML makes the structure visible and editable.

SVG Document Structure

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     width="100"
     height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#0000ff" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
  <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
</svg>

Path Data Complexity

SVG <path> elements contain a d attribute with compact drawing commands. This data is typically a single long string:

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />

Formatters should preserve path data as-is within the attribute (reformatting path commands can break them), but properly indent the <path> element itself.

SVG-Specific Namespaces

SVGs may include additional namespaces:

• xmlns:xlink — for hyperlinks and references (deprecated in SVG 2 but still common)
• xmlns:svg — explicit SVG namespace prefix
• xmlns:inkscape — Inkscape editor metadata
• xmlns:sodipodi — Sodipodi editor metadata

Editor-specific namespaces and their attributes can often be safely removed to reduce file size.

Inline Styles vs. Attributes

SVG supports both presentation attributes and CSS styles. Formatting helps distinguish between structural attributes (viewBox, width) and visual attributes (fill, stroke).

Cleaning Up Tool-Generated SVG

Tools like Illustrator, Figma, and Inkscape add metadata, comments, and redundant attributes. Formatting the SVG first makes it easier to identify and remove this bloat manually or with tools like SVGO.