stroke

The stroke attribute is a presentation attribute defining the color (or any SVG paint servers like gradients or patterns) used to paint the outline of the shape;

Note: As a presentation attribute stroke can be used as a CSS property.

As a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>

html,body,svg { height:100% }

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color stroke -->
  <circle cx="5" cy="5" r="4" fill="none"
          stroke="green" />
 
  <!-- Stroke a circle with a gradient -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%"   stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
 
  <circle cx="15" cy="5" r="4" fill="none"
          stroke="url(#myGradient)" />
</svg>

Usage notes

Specifications

Browser compatibility

Note: For information on using the context-stroke (and context-fill) values from HTML documents, see the documentation for the non-standard -moz-context-properties property.