Why are some SVG Filters automatically converted to PNG when creating an SVG in Adobe Illustrator?

Question

I was wondering why some of the SVG Filters found in Illustrator are automatically converted to PNG when I export the entire file to SVG. I don't want any hidden PNG files because of scalability.

To put it differently:

Why do some of the effects I create get rasterised, even though I'm working in a vector application with a vector file format?

Answer 1

SVGs can reference other SVGs or images. When I tested SVG output from Illustrator (Illustrator CC 17.1.0), applying the SVG AI_GaussianBlur_4 to a circle object with a gradient fill resulted in only SVG markup in the file. I did this over, but this time applied a Drop Shadow and then the SVG AI_GaussianBlur_4. The code included an image. If I applied 2 SVG Filters onto the object, the SVG contained an image.

Based on this I would say:

• If your file contains any effects that are not SVG Filters, and do require rasterization to take place (Stylize > Drop Shadow or any of the Photoshop filters) you're going to end up with an image embedded in the file.
• If your file has more than one SVG filter applied to an object in it you're going to end up with an embedded image.

I would speculate that one or two things are the case, alone or in tandem:

• The SVG plugin that Illustrator uses simply checks out and hands the artwork to the rasterizer and asks for a .png back any time it encounters more than one effect on an object.
• In order to preserve the look of the artwork, especially considering browser variations, Illustrator rasterizes any object that has effects that are not specifically SVG or could render badly because of complexity and unaccounted for browser differences.

To test:

1. Make a new file and draw a single object in it

2. Make sure the object is selected

3. Select Effect > SVG Filters… > AI_GaussianBlur_4

4. Select File > Save

5. Select SVG in the Format pulldown

6. Click Save

7. Click SVG Code…

8. This will open a text file with the SVG markup in it. No embedded image.

9. Go back to Illustrator and Cancel out of the Save dialog

10. Undo the AI_GaussianBlur_4

11. Select Effect > Stylize > Drop Shadow…

12. Accept the default settings

13. Select File > Save

14. Select SVG in the Format pulldown

15. Click Save

16. Click SVG Code…

17. This will open a text file with the SVG markup in it. It will have an embedded image.

I did various combinations of filters and objects using this method. I note:

• Both a Stylize and the SVG filter to a single object = embedded image
• Two SVG filters applied to a single object = embedded image
• Two SVG filters, one applied to Object A, the second applied to Object B = NO embedded image
• Three SVG filters, one applied to Object 1, and 2 applied to Object 2 = embedded image