Skip to main content

When working with SVG assets within a design system we’re often using named color variables that are part of the design system so that our designs support different color modes (light, dark etc)


it would be super helpful if there was some way for these variables made their way into the SVG code (with a fallback for situations or usages where the variable may not exist)


So in your SVG export instead of this:


<rect x="0.331604" y="0.717941" width="20.9977" height="20.9977" fill="#ffffff"/>

you’d get something like this


<rect x="0.331604" y="0.717941" width="20.9977" height="20.9977" fill="var(--color-background, #ffffff)"/>

which would then be able to be able to be dynamically changed based on what is being set for --color-background in the consuming web app.

would also be great to be able to strip out any fill opacity values from the svg when using color variables as the fill (as opacity is often already set within the variable)

Hey Tim! Thanks for your feedback on SVH-export! I’ve gone ahead and switched your topic as “Share an idea”.

This would be great.


I would add to have this option in the REST api GET images endpoint too.

I agree!! We need this so badly. We have to use hacks today and switch the color by one bit to identify different semantic colors so that we can handle them correctly in the code. Please add this feature!!

Good suggestion I’d love to see this.

Need this!!!

Could we do this in an optimized way, somehow?

Is there any plugin that could help me do this…?

This would be such a boost for the use of themes in design systems.


Current Behavior:


SVG exports include hardcoded color values, for example:


<path d="..." fill="#008EF2" style="fill:#008EF2;fill:color(display-p3 0.0000 0.5569 0.9490);fill-opacity:1;" />

Proposed Behavior:


SVG exports should use CSS variables when Figma variables are employed in the design:


<path d="..." fill="#008ef2" style="fill: var(--illustration-deco-object-shade, #008ef2);fill-opacity:1;" />

This change would align SVG exports with the current CSS code generation in Dev Mode, which already utilizes variables:


.rectangle {

  background: var(--illustration-deco-object-shade, #008ef2);

  /* ... */

}

Benefits



  1. Consistency across different export formats (CSS and SVG)

  2. Improved maintainability of exported assets

  3. Easier integration with design systems using CSS variables

  4. Enhanced flexibility for developers working with Figma-exported SVGs

While this feature isn’t implemented, maybe there’s a workaround for CSS themes with exported SVGS, such as using ids on elements?

This would also be useful in Android when exporting svg that then get converted into vector Drawables

Hey there

Just published a plugin especially for generating the SVG code with color tokens:

https://www.figma.com/community/plugin/1442959482504071246/svg-with-tokens


Waiting for you feedback of how to improve it 🙂

Oh Wow, @Avner_H !

This ist amazing. You brighten up my Christmas Mood!

This should be supported natively!
Please implement this Figma… We need this urgently to batch export to our Design System Documentation. No Plugin can properly do this...

Hey there, your feedbacks made me work on a second similar plugin, mainly for bulk export.

The new plugin Bulk Export SVGs with tokens is available for design mode (not dev mode), it allows you to select multiple elements to export as SVG into a single zip (or select only one to export as SVG). It works with a better hex->token matching algorithm. It supports only hex color profile currently. Will work on adding support for display p3 too soon.

Any feedback appreciated (please use comments section on the plugin page)

​@Tiziano I hope it will help you achieve what you need

​

Reply


Terms & ConditionsCookie settings