Last year, I wrote [an article about how to create an SVG library in Angular](https://cloudengineering.studio/articles/componentize-svgs-in-angular-and-style-them-on-the-fly "Componentize SVGs in Angular and style them on the fly") by making components that link to SVG files instead of HTML templates. Shortly afterwards, my boss tasked me with finding a solution to the [excessive DOM size problem](https://web.dev/dom-size/ "Avoid an excessive DOM size"), which we discovered was being caused by all of the elements that make up our SVGs. ## How to create references instead of actual clones to your SVGs After doing extensive research and trying different methods, I came across the __'symbol'__ and __'use'__ HTML elements. [This article gives great in-depth explanations](https://www.sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/ "Structuring, Grouping, and Referencing in SVG") into why this is the correct approach. If you have ever worked in Flash...I mean Animate, you will remember how awesome symbols were. They enabled you to create one symbol and then reference that symbol so any changes you did to the original were cascaded to all of its references. By using 'symbol' and 'use', you are essentially doing the same thing. To make this solution even more enticing, [the 'use' element acts as a container](https://www.w3.org/TR/SVG2/struct.html#UseElement "W3 API: The 'use' element") and stores its children in the shadow DOM. In other words, your SVG elements no longer count towards your DOM size. ## The drawbacks of the shadow DOM and how to overcome them There are some drawbacks though with using a closed shadow DOM. For example, you can't access or manipulate the [SVG's viewBox](https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844 "SVG Viewport and viewBox (For Complete Beginners)") through JavaScript. Therefore, you won't be able to do things like pull out the SVG's exact dimensions without inspecting the element through a browser or updating the paths of the SVG without an image editor. This can be problematic because if you don't set the SVG's width and height, it will automatically have a width of 300 pixels and a height of 200 pixels. If your SVG is considerably smaller, you will see a lot of blank space around the SVG. Because we're going to create one component for all of your SVGs, you can't set one universal viewBox to handle this problem. The viewBox isn't the only thing that's inaccessible. All of the SVG's styles are as well. This is actually a pretty good benefit because a change to the original would be applied to all of its references. Don't fret; we can easily overcome these hurdles by making our SVG generic and adaptable. We can use properties like __'inherit'__ on the SVG's width and height and __'currentColor'__ for its fill and outline so they can be set through a parent or ancestor. ## How to create the SVG component ### Step 1: Create a graphic and export it as an SVG __Note: In order to individually style your SVG and have it scale gracefully to any size, you must use actual paths instead of embedded images for your SVGs.__ For example, I made my logo with vector art using Illustrator. This is what it looks like when I export just the cloud as an SVG: ### Step 2: Prepare your SVG The next step is to add __'symbol'__ tags to the elements inside of your SVG and to move the viewBox to the newly created __'symbol'__ element. __You must also add an id attribute to the symbol so that you can call it externally.__ If you want to change the colors differently for each reference, you have to set the __'fill'__ and __'outline'__ attributes to __'currentColor'__ or __'inherit'__. Use __'currentColor'__ to set the color through the __'color'__ property. Use __'inherit'__ to set the color through the __'path'__ property. I also learned a trick from using Font Awesome icons. You can automatically make the SVG be two-colored by setting the opacity of the secondary color. Now, your SVG will look something like this: ### Step 3: Create a component that will fetch your SVGs __svg.component.ts__ import { Component, Input, OnInit } from '@angular/core'; import { SvgSize } from './svg'; @Component({ selector: 'ces-svg', templateUrl: './svg.component.html', styleUrls: ['./svg.component.scss'] }) export class SvgComponent implements OnInit { link: string = ''; @Input() size: SvgSize | undefined; @Input() type: string = ''; @Input() dropShadow: boolean = true; constructor() { } ngOnInit(): void { this.link = `/assets/images/svgs/${this.type}.svg#${this.type}`; } It's crucial to remember you can't just link a file to the SVG. You must add a hash tag and the name of your id to the end of the file name *after the file extension*. You can save on http requests if you house multiple SVGs in one file, aka sprites. But you must use unique ids for each SVG in the file. Also, if you want to add classes to apply styles that fit exactly to the shape of the SVG like drop shadows or borders, you have to add them directly to the SVG element or else they will be applied to the component host. However, you can define those classes in the component or as a global class. __svg.component.html__ I'm specifying the two href attributes because [__'xlink:href'__ is being deprecated](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href "MDN Web Docs API: xlink:href") and is just there for backwards compatibility. __svg.component.scss__ @import 'variables'; svg { width: inherit; height: inherit; } .xs { width: $icon-xs-sm; height: $icon-xs-sm; } .sm { width: $icon-sm-sm; height: $icon-sm-sm; } .md { width: $icon-md-sm; height: $icon-md-sm; } .lg { width: $icon-lg-sm; height: $icon-lg-sm; } @media (min-width: $breakpoint-md) { .xs { width: $icon-xs-md; height: $icon-xs-md; } .sm { width: $icon-sm-md; height: $icon-sm-md; } .md { width: $icon-md-md; height: $icon-md-md; } .lg { width: $icon-lg-md; height: $icon-lg-md; } } Don't forget to set the width and height to __'inherit'__ using the __'SVG'__ selector or else you won't be able to set them outside of the component. In order to get around the problem of not being able to view or set the viewBox per reference, I use art boards with square dimensions when exporting SVGs. That way, I don't have to worry about getting the exact width/height ratio correct and can easily avoid distorted graphics. In order to enforce standardized sizes, I also created different classes for each size. I defined them using variables so different apps that use this component can have their own standardized sizes. ## Example Usage Alas, here is an example of how to use the SVG component we just created in a button: The SVG's styles that we set earlier will automatically inherit those of the button. But they can also be set by adding a class to the SVG component. ## Source Files Here is [a link to the source files](https://gist.github.com/yokoishioka/8234eb4484f3dd29988b440f6f8baf46 "Github gist for the SVG component"). Please send me any thoughts or ideas for improvement. Thanks!

Search