0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>In the section<a>about shapes</a>, 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.</p>
1
<p>In the section<a>about shapes</a>, 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.</p>
2
<p>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.</p>
2
<p>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.</p>
3
<p>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.</p>
3
<p>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.</p>
4
<p>Let’s start with fills. Unless some other color is specified, the shape is filled with black by default:</p>
4
<p>Let’s start with fills. Unless some other color is specified, the shape is filled with black by default:</p>
5
<circle r="60" cx="150" cy="50%"></circle><p>The fill color is set using the fill attribute:</p>
5
<circle r="60" cx="150" cy="50%"></circle><p>The fill color is set using the fill attribute:</p>
6
<circle r="60" cx="150" cy="50%" fill="gold"></circle><p>or a similar property in CSS:</p>
6
<circle r="60" cx="150" cy="50%" fill="gold"></circle><p>or a similar property in CSS:</p>
7
circle { fill: gold; }<p>The result will be the same:</p>
7
circle { fill: gold; }<p>The result will be the same:</p>
8
<p>The color can be set using whatever format is convenient.</p>
8
<p>The color can be set using whatever format is convenient.</p>