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.

You can use this attribute with the following SVG elements:


<svg viewBox="0 0 20 10" xmlns="">
  <!-- Simple color stroke -->
  <circle cx="5" cy="5" r="4" fill="none"
          stroke="green" />

  <!-- Stroke a circle with a gradient -->
    <linearGradient id="myGradient">
      <stop offset="0%"   stop-color="green" />
      <stop offset="100%" stop-color="white" />

  <circle cx="15" cy="5" r="4" fill="none"
          stroke="url(#myGradient)" />

Usage notes

Value <paint>
Default value none
Animatable Yes


Scalable Vector Graphics (SVG) 1.1 (Second Edition)
# SpecifyingStrokePaint

Browser compatibility

BCD tables only load in the browser