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
strokeValue is none or a CSS Color.none
stroke-widthValue 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. 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
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


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

stroke-linejoin examples

<svg width="200" height="200">
<polygon points="
0 0
150 150
150 100
0 100
style="stroke: blue; fill: yellow;
" />

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;
fill-opacity:.5" />
<circle cx="70" cy="70" r="50"
style="fill:yellow; stroke:red; stroke-width:20;
fill-opacity:.5" />
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).


Styling – SVG 1.1 (Second Edition)

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. ViewBox Unit Size
  10. Coordinate Transformation
  11. Text Element
  12. Font Size
  13. Structure Elements
  14. Scripting SVG
  15. SVG Clock
  16. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials