Technical drawing in SVG, Markdown to PDF

A dimensioned part has center lines, arrow markers and hatching, as it appears in a datasheet or a quotation.

A machined part drawn in SVG: dashed center lines, arrow markers on dimension lines, hatching, circles and labels, as a drawing in a datasheet or a quotation.

Open PDF Open in editor Markdown file

Markdown source

Markdown · 60 lines

# A technical drawing

A mounting plate, 120 by 80 millimeters, with four fixing holes and a central bore. Dimension lines use arrow markers, the center lines are dashed, and the text is real text.

```svg
<svg viewBox="0 0 420 300" width="560" height="400" font-family="sans-serif" font-size="11">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0 0 L10 5 L0 10 Z" fill="#1e293b"/>
    </marker>
    <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <line x1="0" y1="0" x2="0" y2="6" stroke="#94a3b8" stroke-width="1"/>
    </pattern>
  </defs>
  <!-- plate -->
  <rect x="60" y="50" width="240" height="160" fill="#f1f5f9" stroke="#1e293b" stroke-width="2"/>
  <rect x="60" y="50" width="240" height="160" fill="url(#hatch)" opacity="0.5"/>
  <!-- holes -->
  <g fill="white" stroke="#1e293b" stroke-width="1.5">
    <circle cx="90" cy="80" r="7"/>
    <circle cx="270" cy="80" r="7"/>
    <circle cx="90" cy="180" r="7"/>
    <circle cx="270" cy="180" r="7"/>
    <circle cx="180" cy="130" r="24"/>
  </g>
  <!-- center lines -->
  <g stroke="#1e293b" stroke-width="0.8" stroke-dasharray="12 3 3 3">
    <line x1="40" y1="130" x2="320" y2="130"/>
    <line x1="180" y1="30" x2="180" y2="230"/>
  </g>
  <!-- dimensions -->
  <g stroke="#1e293b" stroke-width="1" fill="#1e293b">
    <line x1="60" y1="240" x2="300" y2="240" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
    <line x1="60" y1="215" x2="60" y2="245"/>
    <line x1="300" y1="215" x2="300" y2="245"/>
    <text stroke="none" x="180" y="256" text-anchor="middle">120</text>
    <line x1="330" y1="50" x2="330" y2="210" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
    <line x1="305" y1="50" x2="335" y2="50"/>
    <line x1="305" y1="210" x2="335" y2="210"/>
    <text stroke="none" x="345" y="134">80</text>
    <line x1="90" y1="270" x2="270" y2="270" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
    <line x1="90" y1="190" x2="90" y2="275"/>
    <line x1="270" y1="190" x2="270" y2="275"/>
    <text stroke="none" x="180" y="286" text-anchor="middle">90</text>
    <line x1="205" y1="105" x2="240" y2="70" marker-start="url(#arrow)"/>
    <text stroke="none" x="244" y="66">⌀ 24 H7</text>
    <line x1="97" y1="73" x2="130" y2="40" marker-start="url(#arrow)"/>
    <text stroke="none" x="134" y="36">4 × ⌀ 7</text>
  </g>
  <text x="60" y="22" font-size="13" font-weight="bold" fill="#1e293b">Mounting plate MP-120, aluminium 6082, 8 mm</text>
  <text x="300" y="296" text-anchor="end" fill="#64748b">Dimensions in mm. Tolerances ISO 2768-m.</text>
</svg>
```

| Feature | Dimension | Tolerance |
|:--------|:----------|:----------|
| Plate | 120 × 80 × 8 mm | ±0.2 mm |
| Central bore | ⌀ 24 mm | H7 |
| Fixing holes | 4 × ⌀ 7 mm on 90 × 100 mm | ±0.1 mm |
| Edge break | 0.5 × 45° | |

Rendered pages

PDF · 1 page · 25 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