SVG icons are increasingly used in modern web design, thanks to their scalability, small file sizes, and CSS styling capabilities, making them ideal for responsive websites.
Although SVG can be styled using CSS, this only works if the SVG code is embedded in the HTML page. This means that a single part of the SVG cannot be modified unless the SVG is embedded.
This article introduces the concept of "removable SVG symbols", where the "skeleton" of the SVG image remains unchanged, but the surface appearance can be easily changed.
The article proposes a solution to the problem of not being able to modify a single part of SVG. This involves creating a symbol for each shape in the SVG, each symbol in the same viewBox, allowing for styles for each element as needed.
The author details the workflow of building SVG symbols using Adobe Illustrator and Gulp, and notes that this method is compatible with all modern browsers.
SVG's widespread use in modern web pages has been significantly improved in 2016, thanks to its file size, scalability and CSS styling capabilities.
It can be used in the icon system (see Building Your Own SVG Icons), although icon fonts may be preferable in some cases (see Icon Wars: Fonts and SVG).
But SVG can also be used for logo or graphic elements (at least not overly complex elements), and its natural flexibility makes it the perfect solution for responsive websites (see Sara Soueidan's "Making Responsive SVG with CSS") .
Using SVG can leverage CSS to locate and change the size and color of an entire element, however, it is not possible to modify its individual parts in this way unless your SVG code is embedded in an HTML page.
Question
Let's look at a simpler example. Here is an image that we need to display in multiple colors.
Traditionally, we create three separate images—each with a different "style". But what if we want to use a single SVG file and style it when rendering?
Also, is there a way to make our images into "SVG symbols" to take advantage of browser cache?
I call it the "skinable SVG symbol" - the "skeleton" of the SVG image remains the same, but the surface appearance is easily changed.
The ideal solution is to access the symbolic element through the CSS selector and add some rules to it (same method used by embedded SVG).
In the example below, I have added a class (top, right, bottom and left) to each triangle, arranged the image as symbols, and tried to modify it via CSS, as follows:
.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */Unfortunately, at the moment this only works for Firefox, as shown in the CodePen demonstration below. Only on Firefox will the second image appear in a blue hue (I embed the symbolic code in the pen for convenience, but using an external SVG file will get the same result).
In large projects, we may have many such elements, and maintenance issues are an important factor, so I'm always looking for a way to better organize project resources.
My goal is a pure CSS solution: the previous example could be rewritten using a single triangle SVG, which can be rotated, moved, and shaded via CSS.
But I don't like this solution: it seems to me that it just shifts the problem and does not solve the problem. How many real-world logo components have the same shape?
Sara Soueidan explains this problem better than I did and provides us with a clever solution to using CSS variables. Unfortunately, CSS variables are still an experimental technique and Microsoft browsers do not support them.
Solution
As often happens, the solution is so simple that you will feel stupid because you didn't expect it before.
I discovered it a few months ago when I saw the new Medium logo (it seems like Medium has changed their logo code – you have to believe me).
You can see that the Medium logo consists of four "shapes", each filled with a different solid color. The black and white version is the same as the green version (except for the color of course).
The solution to owning both versions of a single file is to simply build a symbol for each shape, each symbol in the same viewBox.
Let's apply it to our example and create a symbol for each shape in the image. They all share the same viewBox (0 0 54 54) of the entire image, so they are positioned in the correct position without any additional instructions. Just be careful to avoid using fill, stroke, style and other attributes in symbol code).
<svg xmlns="https://www.w3.org/2000/svg">
<symbol id="top" viewBox="0 0 54 54">
<polygon points="54 0 0 0 27 27 54 0"></polygon>
</symbol>
<symbol id="right" viewBox="0 0 54 54">
<polygon points="54 54 54 0 27 27 54 54"></polygon>
</symbol>
<symbol id="bottom" viewBox="0 0 54 54">
<polygon points="0 54 54 54 27 27 0 54"></polygon>
</symbol>
<symbol id="left" viewBox="0 0 54 54">
<polygon points="0 0 0 54 27 27 0 0"></polygon>
</symbol>
</svg>Now we can combine them into a single SVG container:
<svg>
<use class="top" xlink:href="#top"></use>
<use class="right" xlink:href="#right"></use>
<use class="bottom" xlink:href="#bottom"></use>
<use class="left" xlink:href="#left"></use>
</svg>Each use element can be styled as needed, and most importantly, it is compatible with all modern browsers:
That's it.
We just need to arrange our SVG files like this. Of course, we can do it manually, but if you have to manage many graphic elements, or if you need to quickly edit and reuse them in more projects, you need a smarter, faster workflow. I've found a solution using Adobe Illustrator and some Gulp.
SVG symbol construction workflow
The principle of this technique is the same as I introduced in the articles "Build Your Own SVG Icons" and "Create Icon Fonts with Illustrator and IcoMoon", so check them out for the first step.
Suppose we have two elements, just like the image below. Each element is arranged in a specific artboard:
For convenience, we have added some colors to them, although we know that the fill color (and if any, stroke color, stroke size, etc.) will be edited via CSS.
Since each symbol must have its artboard, we now have to segment each image into as many artboards as each colored part.
This can be done very quickly in Illustrator, cutting each element, selecting the target artboard and selecting the Paste in Place command.
Note that each artboard has a specific name: it will be used for the symbolic ID.
Now we can export our artboard as SVG using the brand new "File → Export → Export as Screen" command.
This is a really useful new tool for the latest Illustrator version: it allows you to save each artboard or user-defined resource in multiple formats using a single command.
Select "Artboard" from the export panel, set "SVG" to output format, and select the target folder:
Each artboard will be exported as a single SVG file:
Now we need to combine all the files into SVG symbols and remove some unwanted SVG properties: a small gulp script will help us do this quickly.
Using Gulp
The next section is a little bit technical, but – if you prefer – it will give you a quick, concise way to generate such a versatile SVG.
I've written about Gulp on SitePoint, and you can also find a lot of resources online about Gulp installation and all related parameters, so I'm assuming you've installed it and you know what we're talking about.
Anyway, if you don't like Gulp, you can also manually complete all the following steps. I've done this several times before I started using Gulp: It's definitely a great way to learn, and it's enough on small projects or places where there is no need for continuous editing and maintenance.
So we have some SVG files, each arranged like the example below (d attribute has been shortened for convenience):
.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */Our goal is to arrange all images into SVG symbols in a single file while removing all unwanted properties:
<svg xmlns="https://www.w3.org/2000/svg">
<symbol id="top" viewBox="0 0 54 54">
<polygon points="54 0 0 0 27 27 54 0"></polygon>
</symbol>
<symbol id="right" viewBox="0 0 54 54">
<polygon points="54 54 54 0 27 27 54 54"></polygon>
</symbol>
<symbol id="bottom" viewBox="0 0 54 54">
<polygon points="0 54 54 54 27 27 0 54"></polygon>
</symbol>
<symbol id="left" viewBox="0 0 54 54">
<polygon points="0 0 0 54 27 27 0 0"></polygon>
</symbol>
</svg>Other than Gulp, our work requires some other extensions:
Now we can arrange our Gulpfile (the code can also be obtained as a public Gist):
<svg>
<use class="top" xlink:href="#top"></use>
<use class="right" xlink:href="#right"></use>
<use class="bottom" xlink:href="#bottom"></use>
<use class="left" xlink:href="#left"></use>
</svg>After loading the module, we instruct the file to parse (svg_files/*.svg).
SVGstore uses the name of each file to set the symbol id attribute (i.e., a file named umbrella.svg will become a symbol with id="umbrella"). If you use the new Illustrator Export as Screen panel, you can avoid the first rename command, because your files will be named exactly the same as the artboard they belong to.
But the old version of Illustrator creates a file name by connecting the Illustrator file name with the artboard name, so we need to rename the file to remove the Illustrator file name prefix:
<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54"> <title>umbrella-handle</title> <path d="..." fill="#603813"></path> </svg>
Now we can clean our files. gulp-svgmin is a Gulp version of SVGO, "a tool based on Nodejs for optimizing SVG vector graphics files" (Jake Archibald has released an online version of SVGO, which is very useful if you want to arrange files manually).
SVGO has a lot of configurable options (you can browse all of them in the project page), but we only need a few (of course, you can customize the scripts as you want):
<style></style> elementsNext, pass the file to the svgstore to combine into a unique file, then rename and save.
After using it a few times, you should be able to schedule it for each project in minutes, and it will allow you to quickly rebuild your SVG symbol file if you need it.
Here is a result example (even in this pen I have embedded the svg file for convenience, but you can safely link it as an external file):
Is there any warning?
Since this method is based on styled use elements, we have problems when polyfills (such as svg4everybody) delete them.
In browsers that do not support external symbolic links (all IEs), svg4everybody replaces all use elements with the content of the matching symbol. Therefore, all css rules applied to use will not take effect.
This can be solved by adjusting the CSS selector to fit internal symbolic elements (path, circle, etc.), but this can be a bit tricky.
Out bonus
There are unlimited variations of this workflow: you can handle strokes, text, and more.
Another interesting feature worth exploring is the use of Illustrator symbols: they are exported as SVG symbols, which brings many possibilities.
Thank you for reading.
Frequently Asked Questions about Skinable SVG Symbols
SVG symbols have many advantages compared to other image formats such as JPEG, PNG or GIF. First, SVGs are scalable vector graphics, meaning they can be resized without losing quality. This is especially useful for responsive web design, where the same image needs to be displayed on different devices at different sizes. Secondly, SVG symbols can be styled using CSS, thereby improving design flexibility. Finally, SVG's file size is usually smaller than its bitmap counterpart, which can speed up loading and improve website performance.
You can use CSS to modify the color of the SVG symbol. By default, SVG inherits the color of its parent element. However, you can override this setting by positioning the SVG or its child elements in CSS and applying the desired color. For example, you can use the fill attribute to change the color inside the SVG, or use the stroke attribute to change the color of its outline.
SVG symbols are widely supported in all modern web browsers including Chrome, Firefox, Safari, and Edge. However, older versions of Internet Explorer (IE8 and below) do not support SVG. If you need to support these older browsers, you may need to provide PNG or JPEG images as fallback.
SVG symbols can be animated using CSS animation or JavaScript. CSS animations are simpler and perform better, but JavaScript offers more control and flexibility. You can animate various properties of an SVG such as its position, size, rotation, color, and opacity.
Yes, SVG symbols can be embedded directly into HTML. This can be done using the <svg></svg> and <symbol></symbol> tags. The <symbol></symbol> tag is used to define the SVG symbol, and the <use></use> tag is used to instantiate it. This allows you to define the SVG symbol at once and reuse it multiple times throughout the HTML.
To make your SVG symbols more accessible, you should use the <title></title> and <desc></desc> tags in the SVG to provide alternative text. The <title></title> tag provides a short descriptive title for SVG, and the <desc></desc> tag provides a longer description. These tags are read by screen readers and provide vital context for visually impaired users.
Yes, the SVG symbol can be used as a background image in CSS. This can be done by encoding the SVG as a data URL and using it as the value of the background-image attribute. However, this method does not allow you to style or animate the SVG with CSS.
There are several ways to optimize your SVG symbols for performance. First, you can compress the SVG code to reduce its file size. Second, you can use gzip compression to further reduce file size. Finally, you can use HTTP/2 to serve your SVG, which allows faster and more efficient data transfer.
Yes, SVG symbols can be operated in JavaScript. This allows you to dynamically change the properties of the SVG, such as its color, size, location, and visibility. You can also use JavaScript to animate SVGs, create interactive SVGs, and load SVGs dynamically.
To create a responsive SVG symbol, you should use relative units (such as percentages) for the width and height of the SVG, rather than absolute units (such as pixels). This allows the SVG to scale with its parent element. You can also use the viewBox attribute to specify the aspect ratio and coordinate system of the SVG, which allows it to scale to scale.
The above is the detailed content of 'Reskinnable' SVG Symbols: How to Make Them (..and Why). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
