Updated by Svija Tech · up one level

SVG Shadows

SVG shadows are a nice way to add depth to your web page.

If you use SVG effects, you can make your Adobe Illustrator page significantly smaller by changing the page’s Raster Effects settings.

Raster Effects Settings

To access the Raster Effects settings for a page, navigate to:

Effect › Document Raster Effects Settings…

You can change the resolution to anything — it has no effect on page display (it only affects how the page is displayed in Illustrator).

The lower you make it (e.g. 10), the smaller your Illustrator file will be:

An Example

  • 1.2 MB — an Illustrator file containing a single 500px square
  • 3.1 MB — adding a single SVG drop shadow at 72 ppi raster resolution
  • 35.3 MB — changing the document raster resolution to 300 ppi
  • 1.2 MB — dropping the raster resolution to 10 ppi

The last one will appear blocky in Illustrator, but display perfectly in the browser.

Pages in this section:

  1. An Illustrator document must contain at least two layers
  2. Using alt-eyedropper tool to apply styles
  3. Setting New Document Defaults
  4. Don’t use the “All Caps” button
  5. Kerning must be set to Zero
  6. Desktop & Mobile Document Widths
  7. Shift-click to sample colors for a gradient
  8. Placed PDF’s may not contain placed bitmapped images
  9. SVG Decimal Places
  10. Don’t use _ in layer names
  11. Hidden Layers will be Hidden
  12. Don’t use transparency in gradients in placed Ai’s or PDF’s
  13. Pasted text does not retain paragraph style
  14. Non-printing Illustrator Layers
  15. How to use Hard Spaces in Adobe Illustrator
  16. Placed Illustrator files are embedded, not linked
  17. Illustrator Layers and SVG Object ID’s
  18. Installing Illustrator Scripts
  19. Mac shortcuts for AI scripts
  20. at least two layers
  21. Potential Illustrator Issues
  22. Large Canvas in Illustrator
  23. Layers·
  24. SVG Shadows
  25. Unsupported Techniques & Workarounds·

Other sections: