SVG: Shape Styles

By Xah Lee. Date: . Last updated: .

This page shows the basic style attributes for SVG shapes.

For ways to specify SVG style, see: SVG: Specifying Styles .

Style Attributes

Here is a list of the most basic style attributes for SVG shape elements.

stroke
  • Default is none
  • Value is a CSS Color or none.
stroke-width
  • Default is 1
  • Value is a length value or percentage (e.g. 1%), relative to view port. .
  • length value can be a CSS Unit, e.g. 2px (note, CSS length requires a unit), or just a integer. If just a integer, it means the unit of current coordinate.
stroke-dasharray
  • Default is none
  • Value should be a sequence of pairs of numbers, e.g. 10 2.
  • If missing one, first value is used to fill last value.
stroke-dasharray:20 5
stroke-dasharray:10 5 90 30
stroke-linecap
  • Default is butt
  • Shape of ends of line.
  • Possible values are: butt, round, square.
stroke-linecap:butt
stroke-linecap:round
stroke-linecap:square
<svg width="100" height="100">
<line  x1="20" y1="50" x2="80" y2="50"
 style="stroke:blue; stroke-width:20;
stroke-linecap:butt" />
</svg>
stroke-linejoin
  • Default is miter
  • Shape of polygon bend.
  • Possible values are: miter, round, bevel.
stroke-linejoin:miter
stroke-linejoin:round
stroke-linejoin:bevel
<svg width="200" height="200">
<polygon points="
0 0
150 150
150 100
0 100
"
style="stroke: blue; fill: yellow;
stroke-width:20;
stroke-linejoin:bevel
" />
</svg>
stroke-linejoin:bevel
stroke-miterlimit
  • Default is 4
  • Value is a integer.
  • max ratio of miter point to line thickness.
stroke-opacity
  • Default is 1
  • Value is 0 to 1.
  • Value of 0 means transparent.
fill
  • Default is black
  • Value is a CSS Color or none.
fill-opacity
  • Default is 1
  • Value is 0 to 1. Value of 0 means transparent.
<svg width="100" height="100">
<rect x="9" y="0" width="30" height="80"
style="fill:green; stroke:blue; stroke-width:20;
stroke-opacity:.5;
fill-opacity:.5" />
<circle cx="70" cy="70" r="50"
style="fill:yellow; stroke:red; stroke-width:20;
stroke-opacity:.5;
fill-opacity:.5" />
</svg>
  • Note: A shape is filled before its outline is drawn.
  • Half of stroke's width overlap with fill.
  • This is particularly pronounced when stroke is thick (big stroke-width).
fill-rule
  • Default is nonzero
  • Possible values are: nonzero, evenodd, inherit.
  • This is used when a shape intersect itself.
  • The value is used to determine coloring of interior.