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

<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>

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.