Geek Answers Handbook

How to handle exported SVG SVG with identifiers

I want to use svg icons on my page. The designers I work with use Sketch to create an image and export the result to svg. The sketch adds various id tags to the exported code (note the id="Page-1" , id="My-Star" and id="Star-1" attributes):

 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="My-Star" stroke="#979797" fill="#D8D8D8"> <polygon id="Star-1" points="11.9860934 18.5835921 5.4876995 22 6.7287823 14.763932 1.47147118 9.63932023 8.73689646 8.58359214 11.9860934 2 15.2352904 8.58359214 22.5007157 9.63932023 17.2434045 14.763932 18.4844873 22 "></polygon> </g> </g> </svg>

I include svg directly in html. In doing this, I entered the same id several times. Besides the invalid html resulting from this way of working, I need to style svg elements based on id s. This is bad practice.

I am using css to create svgs, see example

Question:
Is there a way to replace id with class es when exporting svgs from Sketch? Is there any plugin or settings that I can give designers? If not, what is the optimal workflow when receiving svg assets from designers and using it on a page?

+6
source share
3 answers

There seems to be no good solution other than asking designers to use unique group names .

Group names become group identifiers in the generated SVG.

0
source

In Sketch, I did not find any solution, but I found a simple walk with PHP. In Sketch, I name each group or path that I want, as a class starting with. dot, for example .person , and export the file. Obviously, the group still has id=".person"

And then I load .svg into the page using PHP and replace all identifiers starting with dot after markup: <?php echo str_replace('id=".', 'class="', file_get_contents( 'sample.svg' )); ?> <?php echo str_replace('id=".', 'class="', file_get_contents( 'sample.svg' )); ?>

I know this is not perfect, but it works in my case.

0
source

I ran into the same problem, so I made a plugin. With this plugin, all identifiers in svg exported from slices are named in BEM style.

https://github.com/Knowre-Dev/svg-namespacing

-1
source

More articles:


All Articles