600 West

Adobe Svg Filters

Installing Sprout’s SVG blurs in illustrator

  1. If you have illustrator open, close it. No really, close it.
  2. Go to finder
  3. hit ⌘command + shift + g
  4. Copy & paste the following into the dialog that appears ~/Library/Application Support/Adobe/
  5. Open the folder named after latest version of illustrator, for example mine is Adobe Illustator 22 then open the folder en_US
  6. You should see a file called Adobe SVG Filters.svg
  7. Rename it to Adobe SVG Filters old.svg
  8. Leave finder open
  9. Download Adobe SVG Filters.svg to your desktop (or somewhere), and move it into the same folder as Adobe SVG Filters old.svg
  10. Open illustrator
  11. Open a new file
  12. Add a shape
  13. Go to Effects > SVG Filters, and at the bottom you should see Sprout_Shadow_Device & Sprout_Shadow_Mini

Notes

  • Usage You may get an error that says Illustrator will not accuartely paint your blur. It does though. Don’t worry.
  • Exporting When saving an svg with filters, Make sure to go to the file menu, and use save as. It sounds weird, but export removes percent symbols from the filter, which breaks it in safari. Also make sure you check it out in Safari.
  • Give it room to breathe Make sure you check out the image on a white background, the shadows are tricky and if you don’t have a white background to check it on, you’re probably going to leave edges where the value of the shadow meets a hard edge

Updating Blur Filters

Updating filters is the worst in Illustrator. Illustrator is a fantastic vector manipulation tool. But it’s a bad text editor, and it’s desire to replace all dumb quotes with smart quotes is wonderful. But breaks everything when it comes to code. The best thing to do if you want to adjust the blur amounts, is apply the blur, export it, and go talk to a developer. Or open up the Adobe SVG Filters.svg in an editor and play with these settings.

Shadow Transparency - feFlood

<feFlood flood-color="#000" flood-opacity="0.25" result="offsetColor"></feFlood>

Is the opacity of the blur, increasing it will get it closer to black, decreasing it will get it closer to transparent.

feOffeset

<feOffset dx="5" dy="5" in="blur" result="offsetBlur"></feOffset>

These are two length values to set the shadow offset. dx specifies the horizontal distance. Negative values place the shadow to the left of the element. dy specifies the vertical distance. Negative values place the shadow above the element.

If both values are 0, the shadow is placed behind the element (and may generate a blur effect if feGaussianBlur is set).

Blur Amount - feGaussianBlur

<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="10"></feGaussianBlur>

stdDeviation attribute in the <feGaussianBlur> is the third length value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow’s edge is sharp). The specification does not include an exact algorithm for how the blur radius should be calculated, however, it does elaborate as follows:

Width and Height

<filter filterUnits="userSpaceOnUse" height="160%" id="Sprout_Shadow_Mini" width="122%" x="-10%" y="-30%">

This creates a Frame around your that holds your filtered element. There’s kinda no way around this. If your seeing weird edges at the ends of your blur, you can increase the width and height, (and decrease the x & y by half the amount) but beware, down this path lies madness.