An in-depth article on how to style the contents of the SVG <use> element and overcome some challenges it brings.
One of the most common use cases for SVG graphics is icon systems, and one of the most commonly-used SVG spriting techniques is one that uses the SVG element to “instantiate” the icons anywhere they are needed in a document.
Instantiating icons or any other SVG element or image using the element introduces some challenges when it comes to styling the instance of that element. The aim of this article is to give you an overview of some of the possible ways to work around the styling limitations introduced by .
But before we get started, let’s take a quick look into SVG’s main structuring and grouping elements that will gradually take us into the world of use, the shadow of its DOM, and then bring us back into the light with CSS. We’ll go over why styling content can be challenging and ways to work around that.
Quick Overview of SVG Structuring, Grouping and Referencing (Re-using) Elements in SVG
There are four main elements in SVG that are used to define, structure and reference SVG code within the document. These elements make reusing elements easy, while maintaining clean and readable code. Because of the nature of SVG, some of these elements have the same functionality as certain commands in graphics editors.
The four main SVG grouping and referencing elements are: , , and . The element (short for “group”) is used for logically grouping together sets of related graphical elements.
In terms of graphics editors, such as Adobe Illustrator, the element serves a similar functionality as the Group Objects function. You can also think of a group as being similar to the concept of a layer in a graphics editor, since a layer is also a grouping of elements.
Grouping elements together is useful for when you want to apply a style and have that style be inherited by all the elements in the group, and is particularly useful for when you want to animate a group of elements while maintaining their spatial relationships with each other.
The element is used to define elements that you want to reuse later. Defining elements with is useful for when you want to create sort of a “template” that you want to use multiple times throughout the document. Elements defined inside a element are not rendered on the canvas except if you “call” them somewhere in the document. is useful for defining many things, but one of the main use cases is defining patterns like gradients, for example, and then using those gradients as stroke fills on other SVG elements. It can be used to define any elements that you want to render anywhere on the canvas by reference. The element combines the benefits of both the and the elements in that it is used to group together elements that define a template that is going to be referenced elsewhere in the document. Unlike , is not usually used to define patterns, but is mostly used to define symbols such as icons, for example, that are referenced throughout the document. The element has an important advantage over the other two elements: it accepts a viewBox attribute which allows it to scale-to-fit inside any viewport it is rendered in. The element is the element you use to reference any element defined elsewhere in the document. It lets you reuse existing elements, giving you a similar functionality to the copy-paste functionality in a graphics editor. It can be used to reuse a single element, or a group of elements defined with the element, the element, or a . To use an element you pass a reference to that element—an ID—inside the use‘s xlink:href attribute, and you position that element using x and y attributes. You can apply styles to the use element and those styles will cascade into the contents of the use element. But what is the content of ? Where is it cloned? And how does the CSS cascade work with that content? Before we answer these questions, and since we only covered a quick overview of SVG’s structuring and grouping elements, it’s worth mentioning a couple of articles to learn more about these elements and about the viewBox attribute used with : Structuring, Grouping, and Referencing in SVG — The , , and Elements Understanding SVG Coordinate Systems (Part 1): The Viewport, viewBox and PreserveAspectRatio