Fills

In the section about shapes, you have already learned a little about the design capabilities of vector shapes. Now we will consider this issue in a little more detail.

SVG shapes have a rich range of design options: they, just like HTML elements, can be filled with a color, gradient, or image. But in addition to this, you can also separately control the opacity of the fill and stroke, and you can also fill elements with a pattern containing text, for example.

There are also interesting options for strokes. For example, you can control the appearance of a dashed stroke by using dots, dashes, or even Morse code, and you can also style a stroke not only with color, but also with a gradient or image.

Let’s start with fills. Unless some other color is specified, the shape is filled with black by default:

<circle r="60" cx="150" cy="50%"></circle>

The fill color is set using the fill attribute:

<circle r="60" cx="150" cy="50%" fill="gold"></circle>

or the fill property in CSS:

circle {
  fill: gold;
}

The result will be the same:

The color can be set using whatever format is convenient.