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

SVG Shapes Stroke Related Style Attributes
ExampleMeaningDefault
strokeValue is none or a CSS Color.none
stroke-widthValue 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-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
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

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)

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Specifying Styles
  5. Shape Styles
  6. Viewport
  7. viewBox
  8. Coordinate Transformation
  9. Text Element
  10. Font Size
  11. Structure Elements
  12. Scripting SVG
  13. SVG Clock
  14. Animation
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog