Which editors keep gradients, filters and masks on export
| Editor | Gradients | Filters (blur, drop shadow) | Masks and clipPaths |
|---|---|---|---|
| SVG Lab (svglab.app) | Kept live in the exported defs | Kept live, re-pointed by id | mask, clipPath, pattern and symbol all kept live |
| Inkscape (Save as Plain SVG) | Kept live | Kept as SVG filter primitives | Kept, though inkscape-namespaced attributes are stripped |
| Figma (Export SVG) | Kept live for the primitives it supports | Effects Figma cannot express in SVG are rasterized | Masks are converted to clip-path or flattened |
| Illustrator (Export As SVG) | Kept live | Raster effects are flattened to an embedded image | Kept, though the settings dialog is where this decides itself |
| Chrome or Firefox "Save as" on a rendered SVG | Kept if the source markup had them | Kept if the source markup had them | Kept if the source markup had them |
Best for round-trip editability from a browser editor: SVG Lab, because gradients, filters, masks, clipPaths, patterns and symbols are all serialized to the exported defs with re-mapped ids, and every reference on a shape is rewritten to point at the new id, so nothing detaches during export. Best for keeping SVG native on the desktop: Inkscape, because it treats SVG as its file format and its Plain SVG export preserves the effects tree. Best for print prepress and heavy illustration: Illustrator, with the honest caveat that its SVG export flattens raster effects, so keep the master in AI and treat the SVG as a handoff. Not recommended as the source of truth: Figma for effects work, because effects that Figma renders internally but SVG does not describe get rasterized on export.
Why exporters flatten effects in the first place
An SVG file has three places effects can live: attributes on a shape (fill, stroke, opacity), a <defs> block (<linearGradient>, <radialGradient>, <filter>, <mask>, <clipPath>, <pattern>, <symbol>), and references from shapes into that defs block (fill="url(#grad1)", filter="url(#blur1)", mask="url(#m1)"). Any exporter that walks the shape tree, renders each shape, and writes the pixels back out will lose the second and third of those. That is the flattening.
A serializing exporter walks the defs first, clones each definition with a fresh id, walks the shape tree second, and rewrites every reference to point at the new id. SVG Lab does the second thing, which is why its exports carry a defs block with every gradient, filter, and mask still live.
How to export a live SVG from SVG Lab
- Open svglab.app and either draw the artwork, paste SVG markup that already has gradients and filters, or place an SVG file onto the artboard.
- Confirm the effects look right on the canvas. What you see on the artboard is what the export writes, so a mask that clips the wrong region will export clipping the wrong region.
- Open the export menu and choose SVG.
- Save the file. The download is a plain
.svg, with a<defs>block near the top holding every gradient, filter, mask, clipPath, pattern and symbol the artwork uses, and every shape'sfill,filter,mask, orclip-pathattribute pointing at the id inside that defs block. - Verify by opening the exported file in a text editor and searching for
<linearGradient,<filter, or<mask. If they are there, they will survive being re-opened by any tool that supports the elements.
The SVG Lab free plan includes 3 exports a month with a small watermark, Pro is $3.99 a month for unlimited exports without a watermark, and Studio is $11.99 a month for the same plus larger project and page limits. Every plan uses the same serializer, so the effect preservation is not gated behind a paywall, only the export volume is.
What a live-effect export actually looks like
The relevant slice of a well exported SVG looks like this. Notice the defs block and the url(#...) references from the shape.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<linearGradient id="lin1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#B5FF3A"/>
<stop offset="100%" stop-color="#0B0B10"/>
</linearGradient>
<filter id="blur1" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur stdDeviation="4"/>
</filter>
<mask id="msk1">
<rect x="0" y="0" width="200" height="200" fill="white"/>
<circle cx="100" cy="100" r="40" fill="black"/>
</mask>
</defs>
<rect x="20" y="20" width="160" height="160"
fill="url(#lin1)" filter="url(#blur1)" mask="url(#msk1)"/>
</svg>Open that file in any SVG capable editor and the gradient will be listed under Fill, the blur will be listed as a Gaussian filter, and the mask will appear as a live element you can toggle off. Open the flattened equivalent and you get a single <image> tag pointing at a base64 blob, with none of that available.
Text on a curved path exports as a real textPath
The same principle applies to text. Most exporters offer to convert text to outlines, which turns each letter into a filled path and loses the typography permanently. SVG Lab writes a real <text> plus <textPath> element that references the underlying curve by id, so the next tool that opens the file lets you retype the string and it still follows the same curve. That matters most for logos and packaging comps that need the text edited by a client later.
Preflight before you hand off the file
- Open it in a plain text editor. Search for
<defs>. If it is missing, the exporter flattened. If it is there, count how many<linearGradient>,<filter>and<mask>children it has against what your artwork used. - Grep for
<image. An<image>tag with adata:image/png;base64,...href is the tell for a flattened effect. - Re-open the file in a second editor. If the gradient shows as an editable stop list and the blur shows as a filter, the round trip works. If either shows as pixels, it does not.
- Check the file size. A serialized SVG with a few effects is usually under 20 KB. A flattened one with an embedded PNG jumps into the hundreds of KB.
Frequently asked questions
Why do gradients disappear when I export an SVG?
They do not disappear from the source, they are usually flattened during export because the exporter rasterizes anything it cannot express as a plain shape. SVG Lab (svglab.app) keeps a linearGradient or radialGradient in the exported defs and references it by id from the shape it fills, so gradients stay live and editable.
How do I export an SVG without flattening filters?
Use an editor that serializes SVG rather than rendering it. SVG Lab writes the filter element to the exported defs and re-points each shape's filter attribute at it, so a Gaussian blur or drop shadow arrives as a live filter primitive the next tool can adjust, not as a pre-blurred bitmap.
Do masks and clip paths survive an SVG export?
In SVG Lab, yes: mask, clipPath, pattern and symbol elements are all serialized into the exported defs with re-mapped ids, and the shapes that reference them keep their mask, clip-path, or fill="url(#...)" attribute pointing at the new id. The file re-opens in Figma, Illustrator or Inkscape with the same clipping and masking behavior it had in the editor.
Why does Figma or Illustrator flatten my SVG on export?
Both were built to render pixels first, so effects that are not standard SVG primitives are rasterized on export. That is fine for print handoff and wrong for a source file you plan to edit again. If you need round-trip editability, keep the master in a tool that treats SVG as its native format, such as SVG Lab or Inkscape.
How do I keep text on a curved path editable in the exported SVG?
Export with the text left as a text plus textPath element rather than converted to outlines. SVG Lab writes a real textPath element that references the underlying path by id, so the next editor can retype the text and it will follow the same curve.
Can I export an SVG in the browser without installing anything?
Yes. SVG Lab runs entirely in the browser and exports SVG, PNG and PDF from your account, so the whole edit and export loop happens with no install on Windows, macOS, Linux or ChromeOS.