SVG

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2" />
</svg>

viewBox defines coordinate system: "min-x min-y width height"

<!-- Inline (full CSS/JS access) -->
<svg>...</svg>

<!-- Image tag (no scripting) -->
<img src="image.svg" alt="..." />

<!-- CSS background -->
background-image: url('image.svg');

<!-- Object (scriptable) -->
<object data="image.svg" type="image/svg+xml"></object>

<!-- Data URI -->
<img src="data:image/svg+xml;utf8,<svg>...</svg>" />

<svg preserveAspectRatio="xMidYMid slice">
  <!-- ... -->
</svg>

<rect x="10" y="10" width="80" height="60" />

<!-- Rounded corners -->
<rect x="10" y="10" width="80" height="60" rx="5" ry="5" />

<!-- Circle -->
<circle cx="50" cy="50" r="40" />

<!-- Ellipse -->
<ellipse cx="50" cy="50" rx="40" ry="25" />

<!-- Line -->
<line x1="10" y1="10" x2="90" y2="90" />

<!-- Polyline (open) -->
<polyline points="10,10 50,50 90,10" />

<!-- Polygon (closed) -->
<polygon points="50,5 90,90 10,90" />

Uppercase = absolute coordinates, lowercase = relative

<!-- Triangle -->
<path d="M 50 5 L 90 90 L 10 90 Z" />

<!-- Bezier curve -->
<path d="M 10 80 C 40 10, 65 10, 95 80" />

<!-- Smooth curve -->
<path d="M 10 80 Q 95 10 180 80" />

<!-- Arc -->
<path d="M 10 50 A 40 40 0 1 1 90 50" />

<path
  d="M x1 y1 A rx ry 
         x-rotation 
         large-arc-flag 
         sweep-flag 
         x2 y2"
/>

<rect fill="red" fill-opacity="0.5" fill-rule="evenodd" />

<line
  stroke="blue"
  stroke-width="3"
  stroke-linecap="round"
  stroke-linejoin="round"
  stroke-dasharray="5,3"
/>

<!-- Global opacity -->
<rect opacity="0.5" />

<!-- Separate fill/stroke -->
<rect fill-opacity="0.8" stroke-opacity="0.3" />

<text
  x="50"
  y="50"
  text-anchor="middle"
  dominant-baseline="central"
  font-family="Arial"
  font-size="16"
  fill="black"
>
  Hello SVG
</text>

<text>
  <tspan x="10" dy="1.2em">Line 1</tspan>
  <tspan x="10" dy="1.2em">Line 2</tspan>
  <tspan x="10" dy="1.2em">Line 3</tspan>
</text>

dy = vertical offset from previous position

<defs>
  <path id="curve" d="M10,80 Q95,10 180,80" />
</defs>
<text>
  <textPath href="#curve"> Text along a path </textPath>
</text>

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#000" />
    <stop offset="50%" stop-color="#f00" />
    <stop offset="100%" stop-color="#fff" />
  </linearGradient>
</defs>

<rect fill="url(#grad1)" width="100" height="100" />

x1, y1, x2, y2 define gradient vector (direction)

<defs>
  <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="white" />
    <stop offset="100%" stop-color="blue" />
  </radialGradient>
</defs>

<circle fill="url(#grad2)" cx="50" cy="50" r="40" />

<linearGradient gradientUnits="objectBoundingBox" spreadMethod="pad">
  <!-- stops -->
</linearGradient>

<rect transform="translate(50, 50)" />
<rect transform="rotate(45)" />
<rect transform="rotate(45, 50, 50)" />
<rect transform="scale(2)" />
<rect transform="scale(2, 0.5)" />
<rect transform="skewX(30)" />
<rect transform="skewY(15)" />

<!-- Applied right-to-left -->
<rect transform="translate(50,50) rotate(45)" />

<!-- Equivalent to: -->
<!-- 1. rotate(45) -->
<!-- 2. translate(50,50) -->

<rect transform="matrix(a, b, c, d, e, f)" />

Matrix: [a c e]
[b d f]
[0 0 1]

<g fill="red" opacity="0.5">
  <rect x="10" y="10" width="30" height="30" />
  <circle cx="70" cy="25" r="15" />
</g>

Groups inherit attributes to children

<defs>
  <symbol id="icon" viewBox="0 0 24 24">
    <path d="M12 2 L22 22 L2 22 Z" />
  </symbol>
</defs>

<use href="#icon" x="10" y="10" width="24" height="24" />
<use href="#icon" x="50" y="10" width="48" height="48" />

<defs>
  <!-- Gradients -->
  <linearGradient id="grad">...</linearGradient>

  <!-- Patterns -->
  <pattern id="pattern">...</pattern>

  <!-- Clip paths -->
  <clipPath id="clip">...</clipPath>

  <!-- Filters -->
  <filter id="blur">...</filter>
</defs>

<defs>
  <!-- Gaussian blur -->
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <!-- Drop shadow -->
  <filter id="shadow">
    <feDropShadow
      dx="2"
      dy="2"
      stdDeviation="2"
      flood-color="#000"
      flood-opacity="0.5"
    />
  </filter>
</defs>

<rect filter="url(#blur)" ... />
<circle filter="url(#shadow)" ... />

<filter id="complex">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
  <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
  <feMerge>
    <feMergeNode in="offsetBlur" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

<defs>
  <clipPath id="clip">
    <circle cx="50" cy="50" r="40" />
  </clipPath>
</defs>

<image clip-path="url(#clip)" href="photo.jpg" width="100" height="100" />

Clip path defines visible region (hard edges)

<defs>
  <mask id="mask">
    <rect width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="30" fill="black" />
  </mask>
</defs>

<rect mask="url(#mask)" width="100" height="100" fill="blue" />

Mask uses alpha channel (soft edges)

<clipPath clip-rule="evenodd">
  <!-- complex path -->
</clipPath>

<defs>
  <marker
    id="arrow"
    viewBox="0 0 10 10"
    refX="5"
    refY="5"
    markerWidth="6"
    markerHeight="6"
    orient="auto-start-reverse"
  >
    <path d="M 0 0 L 10 5 L 0 10 z" />
  </marker>
</defs>

<line
  x1="10"
  y1="50"
  x2="90"
  y2="50"
  marker-start="url(#arrow)"
  marker-end="url(#arrow)"
/>

<circle cx="50" cy="50" r="10">
  <animate
    attributeName="r"
    from="10"
    to="40"
    dur="1s"
    repeatCount="indefinite"
  />
</circle>

<rect x="25" y="25" width="50" height="50">
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 50 50"
    to="360 50 50"
    dur="2s"
    repeatCount="indefinite"
  />
</rect>

<circle r="5" fill="red">
  <animateMotion
    dur="3s"
    repeatCount="indefinite"
    path="M10,80 Q95,10 180,80"
  />
</circle>

<defs>
  <pattern
    id="dots"
    x="0"
    y="0"
    width="20"
    height="20"
    patternUnits="userSpaceOnUse"
  >
    <circle cx="10" cy="10" r="5" fill="blue" />
  </pattern>
</defs>

<rect fill="url(#dots)" width="200" height="200" />

<pattern id="stripes" patternTransform="rotate(45)">
  <rect width="4" height="10" fill="black" />
  <rect x="4" width="6" height="10" fill="white" />
</pattern>

<svg style="color: red;">
  <circle fill="currentColor" ... />
  <!-- Uses parent's color -->
</svg>

<style>
  .my-shape {
    fill: blue;
    stroke: black;
    stroke-width: 2;
  }
  .my-shape:hover {
    fill: red;
  }
</style>

<rect class="my-shape" ... />

<svg id="mySvg">
  <circle id="myCircle" ... />
</svg>

<script>
  const circle = document.getElementById("myCircle");
  circle.setAttribute("r", "50");
  circle.style.fill = "red";
</script>

• ⚠️ viewBox vs dimensions: viewBox defines coordinate system; width/height define display size
• ⚠️ Path case matters: Uppercase = absolute, lowercase = relative coordinates
• ⚠️ Arc complexity: Four possible arcs for same endpoints — understand flags
• ⚠️ Transform order: Applied right-to-left: translate() rotate() ≠ rotate() translate()
• ⚠️ Text doesn't wrap: Use <tspan> with dy for multi-line text
• ⚠️ Gradient references: Must use id and url(#id) — inline values don't work
• ⚠️ Fill rule: Default is nonzero — complex paths may need evenodd
• ⚠️ SMIL support: Works but CSS animations preferred for modern browsers

• Use <defs> for reusable elements
• Prefer <symbol> over <g> for icons
• Optimize paths with SVGO
• Use aria-label for accessibility
• Minimize precision (2 decimals sufficient)
• Group related elements with <g>