Skip to content

Conversation

@muness
Copy link

@muness muness commented Jan 15, 2026

Summary

  • Fix invalid SVG output when user-defined class names contain special characters like quotes
  • Add escapeClassNames helper function using html.EscapeString to properly escape class names
  • Add unit tests for the new escaping function

Problem

When using {class: foo label: "bar"} syntax, D2 generates invalid SVG with unescaped quotes in class attributes:

<g class="YQ== test label: "Hello World"">

This breaks SVG validation:

echo 'a: {class: test label: "Hello World"}' > /tmp/bug.d2
d2 /tmp/bug.d2 /tmp/bug.svg
xmllint --noout /tmp/bug.svg  # fails

Solution

The fix escapes user-defined class names with html.EscapeString before they are written to the SVG class attribute. After the fix:

<g class="YQ== test label: &#34;Hello World&#34;">

Test plan

  • Added unit tests for escapeClassNames function covering various special characters
  • Verified xmllint --noout passes on output with quoted class values
  • Ran go test ./d2renderers/d2svg/... - all tests pass

Generated with Claude Code

User-defined class names containing special characters like quotes
were being written to SVG class attributes without escaping, producing
invalid XML/SVG that fails validation. For example:

  a: {class: test label: "Hello World"}

Would generate:

  <g class="YQ== test label: "Hello World"">

This is invalid because the double quotes break the attribute.

The fix adds an escapeClassNames helper function that uses
html.EscapeString to properly escape special characters (", ', <, >, &)
before they are written to class attributes in the SVG output.

Co-Authored-By: Claude Opus 4.5 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant