SVG: Shape Styles

By Xah Lee. Date: 2014-07-23. Last updated: 2017-12-22.

This page shows the basic style attributes for SVG shapes.

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

Style Attributes

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

SVG Shapes Stroke Related Style Attributes
Example	Meaning	Default
`stroke`	Value is `none` or a CSS Color.	`none`
`stroke-width`	Value is a percentage e.g. `1%`, relative to view port. Or, `length` value. `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. Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)#StrokeWidthProperty	`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.	`none`
`stroke-linecap`	Shape of ends of line. Possible values are: `butt`, `round`, `square`	`butt`
`stroke-linejoin`	Shape of polygon bend. Possible values are:`miter`, `round`, `bevel`	`miter`
`stroke-miterlimit`	Value is a integer. max ratio of miter point to line thickness.	`4`
`stroke-opacity`	Value is 0 to 1. Value of 0 means transparent.	`1`

SVG Shapes Fill Related Style Attributes
Example	Meaning	Default
`fill`	Value is `none` or a CSS Color. Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)#FillProperty	`black`
`fill-opacity`	Value is 0 to 1. Value of 0 means transparent.	`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”.	`nonzero`

Stroke Examples

Dash Example

stroke-dasharray:20 5

stroke-dasharray:10 5 90 30

stroke-linecap Example

stroke-linecap:butt

stroke-linecap:round

stroke-linecap:square

Here's 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

stroke-linejoin:miter

stroke-linejoin:round

<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

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>

fill-opacity example

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

Reference

Styling – SVG 1.1 (Second Edition)

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Patreon me $5. Ask me question on patreon