Gradient Stop Badge

An SVG badge defines a reusable linearGradient and fills a rounded rectangle with ordered color stops.

Program

defs stores reusable paint servers such as gradients. A shape can reference the gradient by url(#id).

gradient_stop_badge.html

<svg viewBox="0 0 180 80" width="360" height="160" role="img" aria-label="Launch badge">
  <defs><linearGradient id="launch" x1="0" x2="1">
    <stop offset="0" stop-color="#0f766e"/>
    <stop offset="1" stop-color="#f59e0b"/>
  </linearGradient></defs>
  <rect x="16" y="18" width="148" height="44" rx="12" fill="url(#launch)"/>
  <text x="90" y="47" text-anchor="middle" font-size="20" fill="white">Launch</text>
</svg>

defs defs stores reusable SVG definitions that are not painted directly.

linearGradient linearGradient interpolates between color stops.