: Why are some SVG Filters automatically converted to PNG when creating an SVG in Adobe Illustrator? I was wondering why some of the SVG Filters found in Illustrator are automatically converted

@Shanna688

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:


Make a new file and draw a single object in it
Make sure the object is selected
Select Effect > SVG Filters… > AI_GaussianBlur_4
Select File > Save
Select SVG in the Format pulldown
Click Save
Click SVG Code…
This will open a text file with the SVG markup in it. No embedded image.
Go back to Illustrator and Cancel out of the Save dialog
Undo the AI_GaussianBlur_4
Select Effect > Stylize > Drop Shadow…
Accept the default settings
Select File > Save
Select SVG in the Format pulldown
Click Save
Click SVG Code…
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

Vote Up Vote Down