dprint-plugin-svg

A dprint Wasm plugin for formatting SVG files.

Install

dprint 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.4.1.wasm"
  ]
}

Top-level config inheritance

Several options fall back to the top-level keys in the same dprint.json (not the user-profile “global” config — those are the per-file root keys dprint passes to every plugin). When omitted from the svg section:

Plugin-owned defaults

Every other option resolves from svg_format::FormatOptions::default() via the plugin’s config-enum mappers. The table below is generated from the live schema on every mdbook build; values shown are whatever the current source ships.

Configuration reference

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

Ignoring Code

Use HTML comments to prevent the formatter from touching specific elements, ranges, or entire files.

Both dprint-ignore and svg-format-ignore prefixes are recognized.

Ignore the next element

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

The <rect> keeps its original attribute order and whitespace.

Ignore a range

<!-- dprint-ignore-start -->
<rect y="20" x="10" />
<circle r="30" cx="1" cy="2" />
<!-- dprint-ignore-end -->

Everything between the start and end markers is preserved verbatim, including blank lines and indentation.

Ignore an entire file

Place this comment anywhere in the file:

<!-- dprint-ignore-file -->

The formatter returns the file unchanged.

Prefix variants

Both prefixes work interchangeably:

attributeLayout

Attribute wrapping mode

Values

Input

<linearGradient id="sky" x1="0%" y1="0%"></linearGradient>

"auto"

Wrap only when inline width exceeds maxInlineTagWidth.

<linearGradient id="sky" x1="0%" y1="0%"></linearGradient>

"single-line"

Always keep all attributes on one line.

<linearGradient id="sky" x1="0%" y1="0%"></linearGradient>

"multi-line"

Always wrap attributes onto separate lines.

<linearGradient id="sky"
                x1="0%" y1="0%">
</linearGradient>

Config

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

attributeSort

Attribute ordering strategy

Values

Input

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

"none"

Keep original source order.

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

"canonical"

SVG-aware canonical grouping (id, class, geometry, presentation, …).

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

"alphabetical"

Strict alphabetical order.

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

Config

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

attributesPerLine

Maximum attributes per line in multi-line mode

Config

{
  "svg": {
    "attributesPerLine": 1
  }
}

blankLines

How blank lines between sibling elements are handled

Values

Input

<svg>
  <rect />


  <!--legend-->
  <circle />
</svg>

"remove"

Strip all blank lines between siblings.

<svg>
  <rect />
  <!--legend-->
  <circle />
</svg>

"preserve"

Keep blank lines from source verbatim.

<svg>
  <rect />


  <!--legend-->
  <circle />
</svg>

"truncate"

Collapse 2+ blank lines to exactly 1.

<svg>
  <rect />

  <!--legend-->
  <circle />
</svg>

"insert"

Force exactly 1 blank line between every sibling.

<svg>
  <rect />

  <!--legend-->

  <circle />
</svg>

Config

{
  "svg": {
    "blankLines": "truncate"
  }
}

formatEmbeddedContent

Delegate embedded content (CSS, JS, HTML) to host plugins

Config

{
  "svg": {
    "formatEmbeddedContent": true
  }
}

indentWidth

Indent width when useTabs is false. Inherited from the top-level indentWidth in dprint.json when unset

Config

{
  "svg": {
    "indentWidth": null
  }
}

lineWidth

Fallback line width. Inherited from the top-level lineWidth in dprint.json when unset

Config

{
  "svg": {
    "lineWidth": null
  }
}

maxInlineTagWidth

Maximum inline tag width before wrapping attributes

Config

{
  "svg": {
    "maxInlineTagWidth": null
  }
}

newLineKind

Line ending style. Inherited from the top-level newLineKind in dprint.json when unset

Values

"auto"

Detect from the source file.

"lf"

Unix-style \n.

"crlf"

Windows-style \r\n.

Config

{
  "svg": {
    "newLineKind": null
  }
}

quoteStyle

Quote style for attribute values

Values

Input

<rect id='box' class="hero" />

"preserve"

Keep the original quote character.

<rect id='box' class="hero" />

"double"

Normalize to double quotes.

<rect id="box" class="hero" />

"single"

Normalize to single quotes.

<rect id='box' class='hero' />

Config

{
  "svg": {
    "quoteStyle": "preserve"
  }
}

spaceBeforeSelfClose

Include a space before /> in self-closing tags

Config

{
  "svg": {
    "spaceBeforeSelfClose": true
  }
}

textContent

How text-node whitespace is handled

Values

Input

<text>  hello   world  </text>

"collapse"

Collapse whitespace runs to single spaces.

<text>
  hello world
</text>

"maintain"

Preserve relative indentation structure.

<text>
  hello   world
</text>

"prettify"

Trim each line and re-indent to SVG depth.

<text>
  hello   world
</text>

Config

{
  "svg": {
    "textContent": "maintain"
  }
}

useTabs

Use tabs for indentation. Inherited from the top-level useTabs in dprint.json when unset

Config

{
  "svg": {
    "useTabs": null
  }
}

wrappedAttributeIndent

Indentation strategy for wrapped attributes

Values

Input

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

"one-level"

Indent one level deeper than the tag.

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

"align-to-tag-name"

Align to the column after <tagName.

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

Config

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