SVG file --> how to change color code to a customized name?

Ask the community
1

In order to save time and effort for the development team, i’d like the SVG exported file to show the colors as customized fields.
For example:
I’d like to be able to define a color with a name.
So that in the SVG code for example, the #31567A (in BOLD) will show “#Primarycolor” and #0575E5 (in BOLD italic) will show “#Seconderycolor”.
This will allow automation of implementation of design.

travel baggage

SVG namespace" d=“M40.2498 34.0371V22.0091C31.1243 22.0091 29.2026 17.2316 29.2026 17.2316C29.2026 17.2316 27.2801 22.0091 18.1546 22.0091V34.0371C18.1546 34.0371 17.415 39.8168 29.2026 45.3691C40.9894 39.8168 40.2498 34.0371 40.2498 34.0371Z” stroke="#31567A" stroke-width=“1.2” stroke-miterlimit=“10” stroke-linecap=“round” stroke-linejoin=“round”/>

SVG namespace" d=“M31.6481 28.5683H33.1778C33.4983 28.5683 33.7606 28.8282 33.7606 29.146V34.1049C33.7606 34.4227 33.4983 34.6826 33.1778 34.6826H25.3433C25.0228 34.6826 24.7606 34.4227 24.7606 34.1049V29.146C24.7606 28.8282 25.0228 28.5683 25.3433 28.5683H30.7144V30.0097” stroke=“#0575E5” stroke-width=“1.2” stroke-miterlimit=“10” stroke-linecap=“round” stroke-linejoin=“round”/>

2

The plugin called SVG Export might be able to help you with that!

3

Sorry to bump a two year old thread, but I’m really curious to find out whether you achieved this somehow @Jonathan_Arad. I’ve checked out and tested the link shared by @bazoo, but I cannot get this to work.

I’m looking to achieve exactly the same result as you put in your example.

2 Likes
4

@Carlos_Garcia any success so far?

5

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 :slight_smile: