I believe I first heard about this format a long time ago, maybe five years ago, but many junior designers I teach don't know about the possibilities of the SVG format. Let’s get into it.
What is SVG?
Scalable Vector Graphics (SVG) consists of circles, rectangles, and paths represented in XML and combined into images on web pages. You can apply solid fills, gradients, and some SVG filters - not all browsers support all types of filters. You can include text and images and you can copy your SVGs as much as you want. SVG is most often used in graphics programs, to create diagrams, illustrations, and animations.
The pros of SVG from a website user's point of view:
-
clear image
-
lightweight
-
simplicity and time-saving in small projects.
Cons for development:
-
If we use SVG code, the code itself becomes quite large as the icon itself can be very complex in terms of colors and the number of vectors inside
-
The second problem is if we connect the icon in this way, then it is problematic for us to change its color through CSS or even JS. You will have to export a duplicate of the icon but with a different color. In the case of the object tag, the link will not work properly at all if we wrap it in the <a> tag.
There is also a small disadvantage - it is related to the fact that we cannot set the icon size through the font-size property (that is, we do not inherit the font size). You have to "play" with width and height all the time
.
Anyway working as a designer in products and studios, I have learned that this is the most common format for transferring icons to the layout. I often use graphics format for icons, and vector images for a wide range of projects - from services to e-commerce. You can get this format in both Adobe Illustrator and Figma.
Today we're gonna talk about how to use it in both cases.
Export SVG in Adobe Illustrator
Once the design is approved, we assemble it all into one Adobe Illustrator file.
Open the Assets Export panel (Window-Asset Export). Drag and drop each item there and give it a name. Customize export parameters by clicking the button at the very bottom of the Asset Exports panel.
Next, go to the settings and check All Assets (if we want everything to be highlighted) select the place where the icons will be saved, and customize SVG settings (click on the gear).
Next, select SVG and customize the parameters as shown in the image below
Click Save Settings, check again the path where the file is saved, and click Export Asset.
This is a final step. It could be useful, especially if you're used to Adobe Illustrator or looking for an alternative to Figma for exporting SVG icons