Fill and stroke
Learn fill and stroke properties.
fill: the inside color
To paint the inside of an SVG shape, you use the fill property. The value can be a color name, a hex code, or rgb(). The default is black, so a shape with no fill at all comes out black.
To make the shape completely hollow, write fill: none. This is useful for outline-only visuals: the circle's inside becomes transparent and only its edge shows.
stroke: the edge line
To draw the edge of an SVG shape, use the stroke property. The value is again a color: stroke: #1e40af makes the edge navy.
The line thickness is a separate property: stroke-width. It defaults to 1 unit; stroke-width: 3 gives a thick edge, stroke-width: 0.5 a thin one.
Exercise Paint the logo navy with a thick edge
Inside the .logo selector, write two declarations: set fill to #1e40af (navy) and stroke-width to 3.
Show example solution
open .logo and write fill: #1e40af; and stroke-width: 3; inside.
Example solution:
.logo {
fill: #1e40af;
stroke-width: 3;
}Test yourself
-
What does the fill property set?
- The inside color
- The edge thickness
- The shape size
- The rotation angle
Show answer
The inside color — Correct! fill sets the inside color of an SVG shape.
-
Make the inside red
.logo path { ____: #e11d48; }Show answer
.logo path { fill: #e11d48; } -
Match the properties
- fill
- inside color
- stroke
- edge color
- stroke-width
- edge thickness
- none
- hollow value