SVG: Basic 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's a list of the most basic style attributes for SVG shape elements.

SVG Shapes Fill Related Style Attributes
ExampleMeaningDefault
fillValue is none or a CSS Color. Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)#FillProperty black
fill-opacityValue is 0 to 1. Value of 0 means transparent.1
fill-rulePossible 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
SVG Shapes Stroke Related Style Attributes
ExampleMeaningDefault
strokeValue is none or a CSS Color.none
stroke-widthValue is a integer.1
stroke-dasharrayvalue 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-linecapShape of ends of line. Possible values are: butt, round, squarebutt
stroke-linejoinShape of polygon bend. Possible values are:miter, round, bevelmiter
stroke-miterlimitValue is a integer. max ratio of miter point to line thickness.4
stroke-opacityValue is 0 to 1. Value of 0 means transparent.1

Stroke Examples

Dash Example

<svg width="500" height="30">
<line  x1="0" y1="15" x2="500" y2="15"
 style="stroke:blue; stroke-width:3;
 stroke-dasharray:20 5 40 10" />
</svg>

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)

See also: CSS Color Tutorial

SVG Topics

  1. SVG: Basic Examples
  2. SVG Path Tutorial
  3. SVG Path: Elliptical Arc
  4. SVG: Specifying Styles
  5. SVG: Basic Shape Styles
  6. SVG: Viewport
  7. SVG: viewBox, User Coordinate
  8. SVG: Coordinate Transformation
  9. SVG: Text Element Tutorial
  10. SVG: Structure Elements
  11. JS: Scripting SVG, Basic Example
  12. JS: SVG Clock
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon