With Figma’s new SVG Exports, less = more | Figma Blog (opens in new tab)
Figma redesigned its SVG exporter around a simple principle: producing less markup makes files easier for people and more compatible with other tools. Its older exports prioritized storing as much structural information as possible, but this created bloated SVGs that many importers—including Android Studio—handled poorly. The new exporter favors pragmatic, compact markup while preserving the visual result. ## Why SVGs Render Differently Across Tools - SVG describes instructions for drawing an image, unlike bitmap formats that store a fixed snapshot. - Although SVG is an open standard, there is no single standardized implementation for converting SVG markup into pixels. - Design tools and importers often support only subsets of the complex specification, sometimes with bugs. - Features such as reusable definitions in `<defs>` referenced through `<use>` are not reliably supported; Android Studio frequently failed to handle them. - Figma’s previous output was difficult to read and unnecessarily large, forcing users to run tools such as SVGO or manually clean up files. ## A More Pragmatic Export Strategy - Figma originally hoped SVG would become a universal interchange format between design tools. - Feedback from users led the team to abandon that idealized assumption and optimize instead for compatibility with real-world tools. - A simple rectangle example illustrates the change: - The old exporter generated deeply nested groups, clipping paths, masks, reusable definitions, and verbose path data. - The new exporter reduced the same design to a direct `<rect>` element with a fill and stroke. ## Using SVG Primitives - Simple shapes such as rectangles and circles are now exported using native SVG elements. - For example, a verbose rectangle path like: ```markup <path d="M0 100V0H100V100H0Z"/> ``` becomes: ```markup <rect width="100" height="100"/> ``` - Primitive elements are smaller, clearer, and more likely to be understood by other software. ## Simplifying Inside and Outside Strokes - SVG natively supports centered strokes, but design tools also need inside and outside stroke behavior. - Figma previously simulated these effects with doubled stroke widths plus masks, substantially increasing complexity and file size. - The new exporter adjusts path coordinates so the original stroke width produces the desired visual result. - This removes unnecessary masks and makes the resulting geometry easier to inspect and process. ## Removing Unnecessary Markup - Informational elements such as `<title>` and `<desc>`, grouping elements such as `<g>`, and attributes like `id` and `version` are omitted when they do not affect rendering. - Clipping paths are generated only when clipping is actually needed rather than for every clipped frame. - Figma also inlines elements that were previously deduplicated through `<use>` references in `<defs>`. - Although inlining sacrifices some deduplication, the simpler structure improves compatibility with limited SVG importers. Figma’s updated exporter demonstrates that SVG output should prioritize practical interoperability over preserving every possible piece of design-tool metadata. Simpler primitives, fewer masks and references, and only meaningful markup produce files that are smaller, easier to understand, and more broadly usable.