SVG infographic in Markdown to PDF

Symbols defined once and placed many times, gradients, clip paths and text on a path are the SVG features one-page summaries use.

Symbols defined once and placed many times with <use>, radial gradients, clip paths, rounded cards and text on a path, for a one-page summary of a survey.

Open PDF Open in editor Markdown file

Markdown source

Markdown · 67 lines

# An infographic

Everything below is one SVG fence. The person icon is defined once and placed twelve times; the ring chart is a stroked circle with a dash array; the band at the top is clipped to a rounded rectangle.

```svg
<svg viewBox="0 0 600 360" width="600" height="360" font-family="sans-serif">
  <defs>
    <symbol id="person" viewBox="0 0 24 24">
      <circle cx="12" cy="6" r="4"/>
      <path d="M4 22 C4 15 8 13 12 13 C16 13 20 15 20 22 Z"/>
    </symbol>
    <radialGradient id="glow" cx="30%" cy="30%">
      <stop offset="0" stop-color="#60a5fa"/>
      <stop offset="1" stop-color="#1e3a8a"/>
    </radialGradient>
    <clipPath id="band"><rect x="0" y="0" width="600" height="70" rx="16"/></clipPath>
    <path id="arc" d="M330 352 A90 90 0 0 1 510 352"/>
  </defs>

  <g clip-path="url(#band)">
    <rect width="600" height="70" fill="url(#glow)"/>
    <circle cx="520" cy="10" r="60" fill="white" opacity="0.12"/>
    <circle cx="80" cy="70" r="40" fill="white" opacity="0.1"/>
  </g>
  <text x="24" y="44" font-size="22" fill="white" font-weight="bold">Commuting survey 2026, 1,200 responses</text>

  <!-- card 1: ring -->
  <rect x="24" y="90" width="176" height="150" rx="14" fill="#f8fafc" stroke="#e2e8f0"/>
  <circle cx="112" cy="160" r="40" fill="none" stroke="#e2e8f0" stroke-width="14"/>
  <circle cx="112" cy="160" r="40" fill="none" stroke="#2563eb" stroke-width="14" stroke-dasharray="163 251" transform="rotate(-90 112 160)"/>
  <text x="112" y="166" text-anchor="middle" font-size="22" font-weight="bold" fill="#1e293b">65%</text>
  <text x="112" y="225" text-anchor="middle" font-size="12" fill="#475569">cycle or walk at least weekly</text>

  <!-- card 2: people -->
  <rect x="212" y="90" width="176" height="150" rx="14" fill="#f8fafc" stroke="#e2e8f0"/>
  <g fill="#2563eb">
    <use href="#person" x="228" y="110" width="26" height="26"/>
    <use href="#person" x="256" y="110" width="26" height="26"/>
    <use href="#person" x="284" y="110" width="26" height="26"/>
    <use href="#person" x="312" y="110" width="26" height="26"/>
    <use href="#person" x="340" y="110" width="26" height="26"/>
    <use href="#person" x="228" y="142" width="26" height="26"/>
    <use href="#person" x="256" y="142" width="26" height="26"/>
  </g>
  <g fill="#cbd5e1">
    <use href="#person" x="284" y="142" width="26" height="26"/>
    <use href="#person" x="312" y="142" width="26" height="26"/>
    <use href="#person" x="340" y="142" width="26" height="26"/>
  </g>
  <text x="300" y="200" text-anchor="middle" font-size="22" font-weight="bold" fill="#1e293b">7 in 10</text>
  <text x="300" y="225" text-anchor="middle" font-size="12" fill="#475569">would use a secure bicycle park</text>

  <!-- card 3: bars -->
  <rect x="400" y="90" width="176" height="150" rx="14" fill="#f8fafc" stroke="#e2e8f0"/>
  <g font-size="11" fill="#475569">
    <text x="416" y="120">Car</text><rect x="470" y="110" width="92" height="12" rx="3" fill="#94a3b8"/>
    <text x="416" y="146">Train</text><rect x="470" y="136" width="64" height="12" rx="3" fill="#2563eb"/>
    <text x="416" y="172">Bicycle</text><rect x="470" y="162" width="48" height="12" rx="3" fill="#16a34a"/>
    <text x="416" y="198">Walk</text><rect x="470" y="188" width="30" height="12" rx="3" fill="#f59e0b"/>
  </g>
  <text x="488" y="225" text-anchor="middle" font-size="12" fill="#475569">main mode, share of responses</text>

  <!-- footer with text on a path -->
  <text font-size="13" fill="#1e3a8a"><textPath href="#arc" startOffset="50%" text-anchor="middle">Average door-to-door time: 34 minutes</textPath></text>
  <text x="24" y="330" font-size="11" fill="#64748b">Online survey, 3 to 21 March 2026. Figures rounded.</text>
</svg>
```

Rendered pages

PDF · 1 page · 13 KB

The sample documents describe invented organizations in several countries. All names and figures are illustrative.

SVG graphics in Markdown to PDF: every sample In the Markdown reference