Link: references an external image (useful if several SVGs reference the same raster image to reduce extra bytes transferred) Type: (only matters if SVG has text) svg file as data URI (increasing filesize)

Images: (only matters if SVG has images)Įmbed**: actually stores the rasterized image data inside the. Inaccurate settings for these properties can lead to bloated file sizes, broken images, or weird cross-browser bugs with text rendering. Choose the Correct Image and Font Settings (export optimization) See note below for more guidance from one of our Art Directors Mindy Wagner.ģ. When working with icons, fine lines or crisp geometries, careful consideration should be taken to ensure alignment with a pixel grid based on expected display size. Remember, despite the fact that Illustrator lets you author vector graphics, you are often designing for screens which are made of pixels. Align All Shapes to Pixel Grid (path alignment) A hole should be a hole, not a solid shape colored the same as the background. When combining shapes together, consider which shapes a developer may need to independently apply styles or animations to. Use your love of the pathfinder tool to craft clean paths and shapes. Verify Shape Combinations Support Use Cases (path construction) Here's a short list of tips for avoiding common problems with exported SVG. Authoring an SVG in Illustrator and then properly exporting it for the web can be.

Adobe illustrator svg