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

Next lesson: SVG hover effects

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies