Reuse, Symbols, and Defs

Defs Gradient Reuse

A vertical gradient lives in defs. Both a rounded rectangle and a circle reference the same gradient by id, so two shapes share one paint.

Program

Definitions inside defs are reusable. One gradient, marker, or symbol can be referenced by many shapes, keeping the SVG small and the visual identity consistent.

defs_gradient_reuse.html
Visuals: captured from real browser rendering
<svg class="demo-svg" viewBox="0 0 360 220" role="img" aria-label="Reused gradient">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0ea5e9" />
      <stop offset="100%" stop-color="#1e3a8a" />
    </linearGradient>
  </defs>
  <rect width="360" height="220" fill="#f8fafc" />
  <rect x="36" y="40" width="130" height="140" rx="12" fill="url(#sky)" />
  <circle cx="262" cy="110" r="62" fill="url(#sky)" />
</svg>

  1. Paint the viewport background.

    The viewport shows the pale background.
    A background frames the two shapes that will share the gradient.

  2. Define the sky gradient.

    The viewport is unchanged while the gradient is defined.
    A defined gradient is reusable paint inside defs.

  3. Fill a panel using the gradient.

    A vertical blue-to-indigo panel appears on the left.
    The rectangle pulls the sky gradient through fill="url(#sky)".

  4. Fill a circle with the same gradient.

    A circle with the same gradient appears on the right next to the panel.
    A second shape can share the same gradient definition by id.
defs reuse One definition can be referenced by many shapes through its id.
consistent identity Sharing a gradient or paint keeps the visual identity of a scene consistent.