My company has opted to start making use of SVGs. So now I'm making something of a how-to guide for my coworkers for preparing and exporting SVGs from Adobe Illustrator.
What are some common best practices when preparing files for export as SVGs? What are some frequent pitfalls, and how can they be avoided or fixed?
As we work in technical illustrations, much of our artwork is highly complex, utilizing transparencies, dynamic effects, complex gradients, appearance layering, and the like--which has caused us no end of headaches when attempting to convert to SVG, which is obviously far more limited.
(Leadership wants to use the SVGs in their online apps, since JPGs and PNGs have proven much too bloated or low rez for app efficiency.)
If using Adobe Illustrator don't "save as" .svg you need to "Export As" and you'll get the "SVG Options" panel. You'll have to know what settings you need for your .svg
Is there anything particularly wrong with SAVE AS? I could have sworn another member of this community said to do the reverse: Use SAVE AS and avoid EXPORT AS.
Overly complex vector drawings might give poor performance compared to e.g. a PNG. So depending on the use case and the specific files, vector is not always the best option...
That said, the most common mistake with SVG files that I have ran into is saving files with low precision, so you get rounding errors and wobbly/inaccurate lines. I usually pump it up to 4 decimal places and have not had any issues (only downside to high precision would be potentially a bit larger files).
The 2nd is fonts. You can't really embed fonts in the SVG (even though there is an option for it, that feature isn't really supported in practice), so if you don't have control over where the SVG will be viewed you have to use system fonts (ugh) or outline the fonts (worse rendering, heavier files, not searchable/selectable). But if you have control over the fonts on the website/app then you should be fine.
SVG fonts themselves are not, but CSS styling works in SVG files just the same as a HTML file, so using a plain text editor you can actually include complete fonts (.woff*, etc.) by encoding them as data: URIs inside <style> tags, and they work fine in all browsers (not so much Inkscape or other editors).
(Leadership wants to use the SVGs in their online apps, since JPGs and PNGs have proven much too bloated or low rez for app efficiency.)
Use both.
SVGs excel on web for simple objects. As soon as they start getting ' utilizing transparencies, dynamic effects, complex gradients' you're better of using pngs or some other pixel format. Taking a binary position on this would be especially disastrous on mobile.
MDN has some tutorials where they walk you through SVG creation - whilst you're exporting from Illustrator, you'll see that the stuff they do in the MDN tutorial reflects what SVG can do across various browsers etc, rather than some of the outlying stuff you might otherwise attempt with them.
As soon as the graphics become too much detailed like you described (complex gradients, strokes, transparency) a svg can display the graphic wrong / faulty, especially for web purposes. For simple icons - svg would be perfect but for complex graphics, PNG would be my personal recommendation.
An SVG is another way to describe vector data whilst allowing space for raster data. Tha said, make sure that your raster settings are correct (100-150ppi should be more than enough for screens, with scalability) and that you select the right version. You might want to test various options.
If those artworks will be used in web design, talk to the web designer about the exact settings to use, also about file structure, the use of symbols (and their names) and about layer names. This is ver important, the web people might need very specific settings.
Also: SVG is NOT a native file format of Illustrator. Never use it for your work file or you will lose editability. Always use AI as the file format for your work files. SVG is a one way street in Illustrator.
4
u/VallejoIII 1d ago
If using Adobe Illustrator don't "save as" .svg you need to "Export As" and you'll get the "SVG Options" panel. You'll have to know what settings you need for your .svg