![]() ![]() SVGO is an NPM package that runs an optimisation process on your SVG assets at build time, and it’s absolutely a good idea to make something like that part of your workflow. Let’s look at some ways to remove this and serve the smallest possible assets for our purpose. The code contains a lot of unnecessary data – groups that could be collapsed, paths that could be merged, metadata created by the program itself, and more: Įvery graphics program will have its own way of saving SVGs, but regardless of which one you use, they are still likely to contain a lot of extra data if left unoptimised. However, if we take a look at the code of our saved SVG, we’ll see that it is quite bloated. We can save this by going to File > Save as and selecting the “SVG” option. Here’s a fairly simple icon created in Illustrator ( Fig 01): Fig 01 I mainly use Adobe Illustrator for creating and editing my SVGs. But if you’re creating your own graphics, or they are supplied by another designer, you might want to run them through a few optimisation steps. Many icon libraries supply SVG assets that are already well-optimised. I’ll assume that you’re already sold on the benefits of SVG over, say icon fonts or PNGs – but in case you’re not, here’s a handy article to persuade you. ![]() In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web. But plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |