The Core Skeleton of Every Clean SVG Document

A complete, self-contained 24×24 SVG icon in 11 lines of readable XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" fill="none" stroke="currentColor"
  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <defs>
    <clipPath id="badge-clip"><rect width="24" height="24" rx="6" /></clipPath>
  </defs>
  <g clip-path="url(#badge-clip)">
    <circle cx="12" cy="12" r="9" />
    <path d="M12 8v4l3 2" />
  </g>
</svg>
  • xmlns="http://www.w3.org/2000/svg": Required when serving standalone .svg files or CSS Data URIs so the XML parser recognizes SVG tags rather than generic XML.
  • <defs>: Non-rendering dictionary storing reusable <linearGradient>, <clipPath>, <mask>, and <filter> definitions referenced via url(#id).
  • <g>: Logical group element that passes shared fill, stroke, or transform attributes down to its child shapes.

Decoding the <path d="..."> Command Mini-Language

Uppercase letters use absolute viewBox coordinates; lowercase letters move relative to the current pen position:

  • M / m (MoveTo): Lifts the pen and places it at x y without drawing.
  • L / H / V (LineTo / Horizontal / Vertical): Draws straight segments—M5 12h14 moves to (5,12) and draws 14 units right to (19,12).
  • C / S & Q / T (Cubic & Quadratic Béziers): Smooth curves guided by control points.
  • A / a (Elliptical Arc) & Z / z (ClosePath): Draws circular/elliptical arcs and seals the path back to its subpath start.

You can watch how changing any node attribute updates the live XML immediately by opening a mark from the SVG Nexus catalog inside the browser SVG Editor.