Fills

In the section about shapes, you already were able to learn 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 text, for example.

There are also interesting options for strokes. For example, you can control the appearance of a dashed stroke by substituting 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 a similar property in CSS:

circle {
  fill: gold;
}

The result will be the same:

The color can be set using whatever format is convenient.