Illustrator comes with a decent (but minimalist) set of SVG filters, but here are some tips on how to find and add SVG filters as well as resources for creating your own SVG filters. For those who work with web and app developers, make their lives easier and more productive by checking out the cheat sheet for handing off SVG code.
How to apply SVG filters in Illustrator
When you create SVG files for screens in Illustrator and you want to apply effects (like drop-shadows), you should apply those as SVG filters. That way, your SVG files retain infinite scalability without distortion.
The following steps walk you through applying an SVG filter to graphics in Illustrator:
- Select the object(s) to which you are applying the filter.
- Choose Effect→SVG Filters.
- Select a filter from the list that appears.
Most filters have descriptive names. For example, the ones with shadow in the name are drop-shadows, the ones with gaussian in the name are gaussian blurs. The workflow is a bit odd and roundabout, but you need to first select a filter to access all the options available for applying one. - To change the selected filter:
- Keep the object to which the filter was applied selected, and open the Appearance panel by choosing Window→Appearance.
- In the Appearance panel, click the SVG filter that appears in the Fill section of the panel. The Apply SVG Filter panel opens.
- In the Apply SVG Filter panel, change the applied filter.
- To see how the filter will look, select the Preview check box, as shown in the figure.
- After you settle on a filter, click OK in the Apply SVG Filter panel.
How to add SVG filters to Illustrator
Illustrator’s set of SVG filters is minimalist, but you can enhance it by designing your own filters or downloading prepackaged sets of SVG filters from online sources. Designing filters involves coding, but it is doable if you’re comfortable with HTML. I recommend the tutorial at w3Schools for creating SVG filters. Or you can purchase sets of filters online, and even find some nice sets of free SVG filters at Creatingo.
After you purchase or create your own SVG filters, here’s how you install them in Illustrator:
- Choose Effect→SVG Filters→Import SVG Filter.
- In the dialog that opens, navigate to and double-click the SVG filters file you created or downloaded free.
The file you’re looking for should be an SVG file (multiple filters are bundled in a single SVG file).
Your new filters are now available in the SVG Filters submenu. - Choose Effect→SVG Filters to apply your new filters to selected objects.
How to hand off SVG code from Illustrator to a developer
Often the SVG graphics you create in Illustrator are handed off to game designers, animators, infographics, or other output, where developers will work with the code behind the SVG graphic. As an illustrator, you don’t need to know how to create that code, but you may need to know how to get it and turn it over to a developer. Here’s how.
The pathway to exporting your SVG graphics as code runs through Illustrator’s Save functions. The Save menu has options (not easy to find) that export your file as SVG code. You will likely want to be in real-time communication with your screen developer as you generate that code because several options are determined by how that code will be used:
- Choose File→Save (or Save As if you’re resaving a file).
- In the dialog that opens, select SVG from the Format menu.
Ignore the SVGZ file option, which is for a compressed file that does not display in browsers. - Click Save to open the SVG Options dialog.
- Always choose SVG 1.1 in the SVG Profiles drop-down. Other versions are obsolete.
- If you have embedded or linked images in your SVG file, choose Embed from the Image Locations drop-down. However, consult with your web developer about this choice first.
- Select Preserve Illustrator Editing Capabilities to make the file editable in Illustrator.
This choice increases file size but allows you to work with a single SVG file that you can edit, update, and share with web developers. - If the More Options button is displayed, click it to access advanced options. and make your selections.
Essentially, the different options generate CSS with your file that defines properties in the following ways. Consult with your web developer teammate on how to define these CSS properties:- Presentation Attributes embeds styling in SVG code. This option is the simplest and the default. Use this if you’re not collaborating with a web or app developer.
- The two Style Attributes options rely on CSS to manage styling where possible.
- Style Elements generates class style selectors for styling.
- The Include Unused Styles option generates code that likely increases the SVG file size without adding functional value.
- Deselect the five check boxes at the bottom of the SVG Options dialog, unless your developer-partner requests that you select them.
These options are for highly specialized applications. - To generate SVG Code based on the selections you make in the SVG Option dialog, click the SVG Code button.
The generated SVG code is displayed in your operating system’s text editor. You can save that code as a text file using your operating system’s text editor, and hand off the file to a developer. - After you’ve generated code, click OK to save your file.
You can re-open and edit this file in Illustrator.