SVG: Shape Styles

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

Value is a CSS Color or none. Default is none

stroke-width

Value is a percentage example: 1%, relative to view port. Or, length value. length value can be a CSS Unit, example: 2px (note, CSS length requires a unit), or just a integer. If just a integer, it means the unit of current coordinate. Default is 1

stroke-dasharray

value should be a sequence of pairs of numbers, for example, 10 2. If missing one, first value is used to fill last value. Default is none

stroke-linecap

Shape of ends of line. Possible values are: butt, round, square. Default is butt

stroke-linejoin

Shape of polygon bend. Possible values are:miter, round, bevel. Default is miter

stroke-miterlimit

Value is a integer. max ratio of miter point to line thickness. Default is 4

stroke-opacity

Value is 0 to 1. Value of 0 means transparent. Default is 1

fill

Value is a CSS Color or none. Default is black

fill-opacity

Value is 0 to 1. Value of 0 means transparent. Default is 1

fill-rule

Possible values are: {nonzero, evenodd, inherit}. This is used when a shape intersect itself. The value is used to determine coloring of which is “interior”. Default is nonzero

Stroke Examples

Dash Example

stroke-linecap Example

Here is the code:

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

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

fill-opacity Example

<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 will overlap with fill. This is particularly pronounced when stroke is thick (big stroke-width).