Import and use SVG filters in Adobe Illustrator - Spicing up illustrations
Popular vector editor Adobe Ilustrator is a great tool for creation of various types of 2D graphics. Smart and interesting way how to spice up any artwork can be the use of our free SVG filters - Salt & Pepper, Sandy Noise - as a texture generators. The source files and example are available for download at the end of this article.
Quick step by step guidline
1. Download and unpack archive file (.zip) on your hardrive
2. Create New or Open an existing artwork in Adobe Illustrator
3. Select Effect > SVG Filter > Import SVG Filter
4. Search for and select the file "fractal-noise-filters.svg" from the unpacked archive and click Open ... (Import status click OK)
5. Create or select any object - shape, text, group etc.
6. Apply the filter on selected object by selecting Effect > SVG Filter > ...and one of the following ...
PEPPER (2 variations)
SALT (2 variations)
SAND_dark (3 variations)
SAND_light (3 variations)
Enjoy and don't forget save your artwork :)
Filter customization
Here is a short overview on how these filter effects works ( how they are built).
<filter x="0%" y="0%" width="100%" height="100%" id="SALT-more" filterUnits="objectBoundingBox"> <!-- Step 1 - generation of noise texture (fullcolour) by using feTurbulence SVG filter --> <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.3" numOctaves="1" seed="1" /> <!-- Step 2 - conversion to grayscale mode together with tonal range limit to achieve desired amount/sizes of fragments --> <feColorMatrix type="matrix" values="-23 0 0 0 7 -23 0 0 0 7 -23 0 0 0 7 0 0 0 0 1" in="f1" result="f2" /> <!-- Step 3 - transparent background - the result is visible fragments of texture only --> <feColorMatrix type="luminanceToAlpha" in="f2" result="f3" /> <!-- Step 4 - intersection of texture with initial object (or vice-versa) --> <feComposite in="f3" in2="SourceGraphic" result="f4" operator="in" /> <!-- Step 5 - invert of colour - SALT, set up of brightness - SAND. (Note: this step is not used in effect PEPPER) --> <feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0" in="f4" result="f5" /> <!-- Step 6 - at last, merging of created texture with initial object --> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="f5" /> </feMerge> </filter>
In general you can modify any SVG filter directly in Adobe illustrator by performing some of the following steps:
1. Go to Effect > SVG Filters> Apply SVG Filter
2. Choose filter which you want to modify
3. Click Edit SVG filter button (fx)
4. Modify ... Save
or if you have already applied filter on your object
1. Click on applied filter label in Appearance panel
2. Click Edit SVG filter button (fx)
3. Modify ... Save
For example, if you want to have noise texture with more detailed fragments try to set higher value for "numOctaves" and lower value for baseFrequency in feTurbulence (Step 1), together tonal range improvements to keep approximately same look (Step 2):
<filter x="0%" y="0%" width="100%" height="100%" id="SALT-more" filterUnits="objectBoundingBox"> <!-- Step 1 --> <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.25" numOctaves="3" seed="1" /> <!-- Step 2 --> <feColorMatrix type="matrix" values="-19 0 0 0 5 -19 0 0 0 5 -19 0 0 0 5 0 0 0 0 1" in="f1" result="f2" /> <feColorMatrix type="luminanceToAlpha" in="f2" result="f3" /> <feComposite in="f3" in2="SourceGraphic" result="f4" operator="in" /> <feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0" in="f4" result="f5" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="f5" /> </feMerge> </filter>
Conclusion
Even our free SVG filters are built mainly for web usage (to keep max. performace) you can use them also for print graphics (don't forget to "Expand appearance", "Flatten transparency" ...). More details and test cases of the usage of our SVG filters on the web can be found in this article:
DOWNLOAD source files .zip 
BACK