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 isnone
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 is1
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 isnone
stroke-linecap
-
Shape of ends of line. Possible values are:
butt
,round
,square
. Default isbutt
stroke-linejoin
-
Shape of polygon bend. Possible values are:
miter
,round
,bevel
. Default ismiter
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 isblack
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 isnonzero
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
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
).