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

Other sections: