SVGs play a central role in today's web. not only have they displaced icon fonts, but they also offer the possibility of manipulation via CSS or JavaScript. if you want to save a vector graphic for the web from Adobe Illustrator as SVG, you have to make some settings to avoid pitfalls and reduce loading times, which I will present in the following article.
The general export function can be found under " File> Export> Export as ... ". Finally, select " SVG (* .SVG) " as the file type. If you do not want to cut transparent areas and take the drawing area into account, check " Use drawing areas ", otherwise not. In the following dialog you select the following options:
If you are not satisfied with the level of detail of the paths in the result, you gradually increase the decimal places to 3 or 4.
It gets interesting when you have embedded clipping masks in the vector file. These can also be eliminated (this leads to again smaller file sizes and increased compatibility when using printing tools such as dompdf ).
There are two well-known ways in Illustrator: First you mark all objects with CTRL + A and select " Object> Reduce transparency ... ". Then you remove the existing clipping masks via " Object> Clipping Mask> Convert Back ". If that doesn't work, do the following instead of the last two steps: First select " Object> Convert ...> OK " and then select the " Remove overlap area " option in the Pathfinder dialog:
The final SVG can then be further optimized with tools like svgo (on the command line or in the web GUI ).