Build

A blank line inside inline SVG will silently delete half your diagram

Markdown ends a raw HTML block at the first empty line. My diagram lost five of six shapes and still rendered, so nothing errored and nothing looked broken.

J-HooX · 1 min read

I put an inline SVG diagram into a post about speech matching today. It rendered. It was also missing five of its six shapes, and nothing anywhere told me so.

The SVG was formatted the way you would format any code, with blank lines between the logical groups:

<figure class="figure">
<svg viewBox="0 0 680 250">
  <rect x="0" y="8" width="200" height="46" />
  <text x="16" y="30">HEARD</text>

  <rect x="0" y="196" width="200" height="46" />
  <text x="16" y="218">EXPECTED</text>
</svg>
</figure>

Markdown ends a raw HTML block at the first empty line. Everything after that blank line gets parsed as Markdown instead of HTML, and the SVG tags in it are simply dropped.

What made it take a while to spot is that it fails quietly. The build passed. The page rendered. There was an <svg> on screen with a box in it, so at a glance the diagram was “there”. I only caught it counting elements in the console:

document.querySelectorAll('.figure svg rect').length  // 1, should have been 6

The fix is to delete every blank line between <figure> and </figure>. Ugly to read in the source, fine everywhere else.

Two things I did not expect while working this out. fill="var(--accent)" works — CSS custom properties resolve inside SVG presentation attributes, so diagrams can use the same design tokens as the rest of the page. And an SVG with viewBox plus width: 100%; height: auto scales into a text column without any other work, which is how the alarm diagrams sit inside a 680px column without me sizing anything by hand.