dprint-plugin-svg

A dprint Wasm plugin for formatting SVG files.

Install

dprint config add kjanat/svg

Quick start

Add plugin-level options under the "svg" key in your dprint config:

{
  "svg": {
    "attributeSort": "canonical",
    "attributeLayout": "auto",
    "spaceBeforeSelfClose": true
  },
  "plugins": [
    "https://plugins.dprint.dev/kjanat/svg-v0.1.0.wasm"
  ]
}

Global config inheritance

Several options fall back to dprint global config when omitted:

All other options use plugin-specific defaults documented in each page.

Configuration reference

Browse the sidebar for per-option documentation with before/after examples.

lineWidth

Fallback line width for formatting decisions when maxInlineTagWidth is not set.

When maxInlineTagWidth is omitted, its value equals lineWidth. This controls when the formatter wraps attributes or children onto new lines.

Example

lineWidth: 60

Short line width forces earlier wrapping:

<!-- input -->
<svg><rect x="10" y="20" width="100" height="50" fill="#ff0000" stroke="#000" /></svg>

<!-- output -->
<svg>
  <rect
    x="10"
    y="20"
    width="100"
    height="50"
    fill="#ff0000"
    stroke="#000" />
</svg>

lineWidth: 200

Wide line width keeps short tags inline:

<!-- input -->
<svg><rect x="10" y="20" width="100" height="50" fill="#ff0000" stroke="#000" /></svg>

<!-- output -->
<svg>
  <rect x="10" y="20" width="100" height="50" fill="#ff0000" stroke="#000" />
</svg>

Config

{
  "svg": {
    "lineWidth": 80
  }
}

maxInlineTagWidth

Maximum width of a tag (including attributes) before the formatter wraps attributes or children onto new lines.

This is the primary knob for controlling when tags break. When a tag’s total width exceeds this threshold, attributes wrap according to attributeLayout and attributesPerLine.

Example

maxInlineTagWidth: 40

<!-- input -->
<svg><circle cx="50" cy="50" r="25" fill="red" /></svg>

<!-- output -->
<svg>
  <circle
    cx="50"
    cy="50"
    r="25"
    fill="red" />
</svg>

maxInlineTagWidth: 120

<!-- input -->
<svg><circle cx="50" cy="50" r="25" fill="red" /></svg>

<!-- output -->
<svg>
  <circle cx="50" cy="50" r="25" fill="red" />
</svg>

Config

{
  "svg": {
    "maxInlineTagWidth": 80
  }
}

useTabs

Use tabs for indentation instead of spaces.

Example

useTabs: true

<svg>
	<rect x="0" y="0" width="10" height="10" />
</svg>

useTabs: false

Uses indentWidth spaces per level (default 2):

<svg>
  <rect x="0" y="0" width="10" height="10" />
</svg>

Config

{
  "svg": {
    "useTabs": false
  }
}

indentWidth

Number of spaces per indentation level when useTabs is false.

Has no visible effect when useTabs is true.

Example

indentWidth: 2

<svg>
  <g>
    <rect x="0" y="0" width="10" height="10" />
  </g>
</svg>

indentWidth: 4

<svg>
    <g>
        <rect x="0" y="0" width="10" height="10" />
    </g>
</svg>

Config

{
  "svg": {
    "useTabs": false,
    "indentWidth": 4
  }
}

attributeSort

Attribute ordering strategy.

Values

"none"

Preserve the original attribute order:

<!-- input -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>

<!-- output — order unchanged -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>

"canonical" (default)

Sort attributes in SVG-idiomatic order (id, class, positional, dimensional, presentation, etc.):

<!-- input -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>

<!-- output -->
<svg>
  <rect id="box" x="10" y="20" width="100" height="50" fill="#ff0000" />
</svg>

"alphabetical"

Sort attributes in strict alphabetical order:

<!-- input -->
<svg>
  <rect y="20" x="10" height="50" width="100" fill="#ff0000" id="box" />
</svg>

<!-- output -->
<svg>
  <rect fill="#ff0000" height="50" id="box" width="100" x="10" y="20" />
</svg>

Config

{
  "svg": {
    "attributeSort": "canonical"
  }
}

attributeLayout

Attribute line-breaking strategy.

Values

"auto" (default)

The formatter decides based on maxInlineTagWidth. Tags that fit within the threshold stay on one line; longer tags wrap.

<!-- short tag stays inline -->
<svg>
  <circle cx="50" cy="50" r="25" />
</svg>

<!-- long tag wraps -->
<svg>
  <rect
    id="bg"
    x="0"
    y="0"
    width="1920"
    height="1080"
    fill="#1a1a2e"
    stroke="#16213e"
    stroke-width="2" />
</svg>

"single-line"

Force all attributes onto the same line as the tag name, regardless of width:

<svg>
  <rect id="bg" x="0" y="0" width="1920" height="1080" fill="#1a1a2e" stroke="#16213e" stroke-width="2" />
</svg>

"multi-line"

Force every tag to wrap attributes, one per line (or per attributesPerLine):

<svg>
  <circle
    cx="50"
    cy="50"
    r="25" />
</svg>

Config

{
  "svg": {
    "attributeLayout": "auto"
  }
}

attributesPerLine

Maximum number of attributes per line when attributes are wrapped (multi-line mode).

Only applies when attributes are broken onto multiple lines (via attributeLayout or maxInlineTagWidth). Values below 1 are clamped to 1.

Example

attributesPerLine: 1 (default)

<svg>
  <rect
    id="box"
    x="10"
    y="20"
    width="100"
    height="50"
    fill="#ff0000" />
</svg>

attributesPerLine: 2

<svg>
  <rect
    id="box" x="10"
    y="20" width="100"
    height="50" fill="#ff0000" />
</svg>

attributesPerLine: 3

<svg>
  <rect
    id="box" x="10" y="20"
    width="100" height="50" fill="#ff0000" />
</svg>

Config

{
  "svg": {
    "attributesPerLine": 2
  }
}

spaceBeforeSelfClose

Whether to include a space before /> in self-closing tags.

Example

spaceBeforeSelfClose: true (default)

<svg>
  <circle cx="50" cy="50" r="25" />
  <path d="M0 0L10 10" />
</svg>

spaceBeforeSelfClose: false

<svg>
  <circle cx="50" cy="50" r="25"/>
  <path d="M0 0L10 10"/>
</svg>

Config

{
  "svg": {
    "spaceBeforeSelfClose": false
  }
}

quoteStyle

Quote style for attribute values.

Values

"preserve" (default)

Keep whatever quote style the input uses:

<!-- input with mixed quotes -->
<svg>
  <rect x="10" y='20' width="100" height='50' />
</svg>

<!-- output — quotes unchanged -->
<svg>
  <rect x="10" y='20' width="100" height='50' />
</svg>

"double"

Normalize all attribute values to double quotes:

<!-- input -->
<svg>
  <rect x='10' y='20' width='100' height='50' />
</svg>

<!-- output -->
<svg>
  <rect x="10" y="20" width="100" height="50" />
</svg>

"single"

Normalize all attribute values to single quotes:

<!-- input -->
<svg>
  <rect x="10" y="20" width="100" height="50" />
</svg>

<!-- output -->
<svg>
  <rect x='10' y='20' width='100' height='50' />
</svg>

Config

{
  "svg": {
    "quoteStyle": "double"
  }
}

wrappedAttributeIndent

Indent style for wrapped attributes relative to the tag.

Only visible when attributes are broken onto multiple lines.

Values

"one-level" (default)

Indent wrapped attributes by one indentation level from the tag’s opening <:

<svg>
  <rect
    id="box"
    x="10"
    y="20"
    width="100"
    height="50" />
</svg>

"align-to-tag-name"

Align wrapped attributes to the character after the tag name:

<svg>
  <rect id="box"
        x="10"
        y="20"
        width="100"
        height="50" />
</svg>

Config

{
  "svg": {
    "wrappedAttributeIndent": "align-to-tag-name"
  }
}

newLineKind

The newline character(s) to use in formatted output.

Values

"auto" (default)

Detect the newline style from the input file and preserve it. Uses \n for new files.

"lf"

Force Unix-style line endings (\n). Typical for Linux/macOS environments and most version-controlled SVG files.

"crlf"

Force Windows-style line endings (\r\n).

Config

{
  "svg": {
    "newLineKind": "lf"
  }
}