SVG with Unique Objekt ID

[Shartl]

Hello everyone, I'm trying to create SVG with a unique object ID. I want to build this into Wordpress with Elementor. When I create an SVG via Affinity I have the following problem after uploading it in Wordpress. If I change the image of the first icon, all other images on the page change. Elementor Support said the following.

 

"When many of your SVG is having the same ids, it results in the icon receiving the styling of the subsequent SVG icon on that page. To resolve this issue, please import and export the SVG files within Adobe illustrator by navigating to File> Export > Export As and simply enabled the unique Object ID's feature as illustrated in the image linked below. " Can someone help me how I can solve this problem.

 

Many Thanks

[v_kyr]

Hi,

hard to tell without seeing your SVG output code here, aka the plain XML code Affinity generates then when exporting your working file as SVG. AS you may know SVG is simply a XML textual based format, thus you can inspect it inside any text editor of your choice.

Object/element IDs when used should of course be unique, in order to distinguish one object/element from another. Meaning here, every image should have it's own unique ID then, so no other image has the same ID. - In Affinity Designer etc. I would name each image layer different (layers and group layers), since that's what finally will build custom ID's here then for an SVG export.

[Shartl]

Hi,

Thanks for the quick answer, I have to admit that I am overwhelmed with the topic, I made an SVG from a PNG, it was only 1 layer which I named differently. I'll attach both SVG. Thank you so much for the help

Letter10.svg Microphone10.svg

[v_kyr]

I assume the problem for this Elementor might be the following then ...

• Letter10.svg
  
  
   
• Microphone10.svg
  
  
   

Since you created two seperate SVG files with always just one embedded image, the "image id" reference part inside the SVG files is in both files the same (namely <image id="_Image1" ...).

You can try if it makes a difference for that Elementor, if you edit let's say the "Microphone10.svg" file to use and reference _Image2 instead ...

• Microphone10.svg

[Shartl]

Thank you very much it worked. Without you I would have been lost. THANK YOU

[v_kyr]

You are welcome!

[DarkClown]

Like to bring up this issue again ... since (despite the fact that it solves the problem) of course this a pretty crippled solution. You can't manually edit large amounts of svg you export for wordpress.

Would be a good idea to enable constantly increasing Object IDs with starting/offset value in the export dialog.

[walt.farrell]

7 minutes ago, DarkClown said:

You can't manually edit large amounts of svg you export for wordpress.

It sounds like you're editing the SVG code to include the code into a wordpress article.

Why not simply point to and embed the SVG file, just as you would an image file, rather than including the code directly.

[DarkClown]

3 minutes ago, walt.farrell said:

It sounds like you're editing the SVG code to include the code into a wordpress article.

Affinity exports all SVG files with an identical Image ID. Wordpress can't deal with that. To distinguish between different SVG it needs unique Image IDs. I'd like to have the different Icons accessible from within the media library for re-usability purpose and because e.g. elementors widgets (icon box) don't support direct linking - instead they point to the media library or their own Icon Libraries.

[Vik Martin]

I'm having a similar problem. I've tried changing the image ID in a text editor but when I do that the image disappears. Can anyone help?

[Vik Martin]

Oops - sorry, I've answered my own question. I was trying to export a rasterised layer!