SVG basics: Styling shape elements

By Matt Visiwig Mar 7, 2023

There are a few foundational attributes you can use to change the appearance of SVG shape elements: fill, stroke, and opacity.

We will breakdown these style attributes that you can manipulate to affect SVG element styles.

Styling SVG fill

Fills can be solid colors, gradients, or patterns and it behaves similar to the background property in CSS.

When you don’t specify a fill on a shape element, the fill will default to black (fill="black"). To override this behavior, you need to specify the fill or give it a fill of NONE like so: fill="none".

If you define a <linearGradient>, <radialGradient>, or a <pattern>, you can reference the element’s ID in your fill attribute as demonstrated below:

<defs>
   <pattern id="My_Pattern" ...>
</defs>
<path fill="url(#My_Pattern)" ...>

You can manipulate the fill in CSS, for example:

.my-class{
   fill: purple;
}

Styling SVG strokes

Strokes are the outlines along a shape’s path and unlike the single attribute dedicated to the fill, there are nearly 10 attributes that style the stroke’s appearance.

The main attribute is stroke and the default value is stroke="none" so you’ll never see a stroke unless you specify one. This attribute determines the coloring of the stroke. The stroke can be a color, gradient, or pattern, exactly like the fill.

The thickness of the stroke is controlled by the stroke-width attribute, which has a default value of 1 (stroke-width="1").

Vector graphic software, such as Adobe Illustrator, allows you to position the stroke inside, outside, or centered between in-and-out-side. Unfortunately, there is no attribute to achieve this positioning with SVG, The stroke is always positioned half inside and half outside.

Let me illustrate what that means below.

Above: You’re looking at three circles of the same size, only the stroke position is different. The inside stroke is applied to the left circle and the outside stroke is applied to the right circle. SVG can only achieve strokes positioned like the middle circle, where you see the stroke half inside and half outside.

Since we are only covering the basics of styling SVG elements, we’ll take a deeper dive on stroke attributes another time, but let’s mention the remaining attributes.

You’ve got stroke-linejoin, stroke-linecap, and stroke-miterlimit to determine how the stroke appears at corners and ends. This is how you can achieve rounded strokes and bevels.

The attributes stroke-dasharray and stroke-dashoffset allow you to achieve gaps in where the stroke appears along a given path. The combo of the two attributes is often used in animations where a line is drawn right before you’re eyes.

You can manipulate the stroke in CSS, for example:

.my-class{
   stroke: purple;
   stroke-width: 5;
   stroke-linejoin: round;
   stroke-linecap: round:
   stroke-miterlimit: 10;
   stroke-dasharray: 4 4 16 16;
   stroke-dashoffset: -3;
}

Styling SVG opacity

Opacity is a numeric value that determines how visible or transparent an element appears. The value can be a number from 0 to 1, where the lower the number, the more see-through the given element appears. A value of 0 makes the shape completely invisible and 1 makes the shape is completely visible.

There are three relevant opacity attributes:

1. Opacity
2. Fill-opacity
3. Stroke-opacity

The opacity attribute affects both the fill and stroke of the associated elements, while you can also target strictly the fill or stroke opacity respectively with the fill-opacity and stroke-opacity attributes.

You can also place opacity attributes on the <g> (group) element to affect grouped elements together, as though they were one graphic. For instance, if you have two overlapping red circles and you applied an 0.5 opacity to each individually, they’d look like a Venn diagram where the intersecting part is less opaque. However, if those circles where a group with the very same opacity instead, they would appear to be a single partially visible shape.

What we learned about SVG style attributes

In the world of SVG, you can do a lot visually with the simple attributes we learned about today: fill, stroke, stroke-width, and opacity. These attributes are commonly found in SVGs and once you get a hang of the basics, you can achieve a wide range of designs and effects with SVG.

If you’d like to explore and learn more about SVG and get introduced to all the crazy things you can do, make sure you visit SVGBackgrounds.com/intro — it’s both in blog and video format.

---

Video of SVG basics: Styling shape elements