Edit SVG data | Easy & Fast?

HARRY · 12 January 2023 11:28

I’d like to use multiple svg files on one site.

When I generate svg files, let’s say in illustrator, or Designer, each svg stage start with the id “st1”.
The next is named “st2” and so on.
To be able to display multiple svg’s without error, each object has to have a unique id/name.
Up to now I edited by hand, one id after the other.
If you have complex graphics, it takes years.

How do you guys do it?
Is there a faster way to change the id’s across different svg’s?
Or maybe a workaround?
Please help ;o)

Webdeersign · 12 January 2023 11:52

Can you post one of the SVG’s or paste the contents here so we can see one?

Also can you explain what you mean by “To be able to display multiple svg’s without error, each object has to have a unique id/name.”

HARRY · 12 January 2023 18:01

Yes.
It’ll come soon ;o)

Geoff · 13 January 2023 01:36

Hi Harry,

You’re not alone. I had a similar issue when Illustrator updated to 27.1.1 (2023).

Every SVG created had an xml prefix - before the svg tag. Broke the whole page. (Image here shows my minimal settings - used successfully for years until now).

I’ve reported the issue to Adobe and I would guess that many others will do the same.

The workaround is to open the svg in a plain text editor (like the excellent BBEdit) and delete the xml prefix.

jamessouttar · 13 January 2023 01:51

Do they need to be SVGs, though? If you just want to show a complex vector graphic, you could save it as a PDF and then import it (from the server) into an iframe.

Konfuzzious · 13 January 2023 10:44

Try this tool: https://macsvg.org/
It’s brilliant!

Webdeersign · 13 January 2023 10:51

I once accidentally found that if you drag an SVG into the ImagOptim App, that it optimises the SVG by stripping out stuff. ImageOptim does not advertise this feature, but to my surprise, the SVG’s I tried worked perfectly.

I just checked an SVG and the one ID in the original test SVG, was stripped out.

Tophat · 13 January 2023 12:00

Hiya, hope this helps, I use SVGs a lot, with many on one page. Here is what I do and have no problems.

Create your SVG in Illustrator or Designer
Export as SVG as normal
Right click the exported SVG file and open in text edit
Now with this bit - copy and paste only the text from SVG to /SVG. Leave out the bit at the beginning, see screenshot.
Now paste that raw text in to a Foundation SVG stack, BWD Blueprint SVG stack or the brand new this morning free extra content SVG stack created by Joe Workman.

Your SVGs will work perfectly and you can have many as you want.

fapkogi · 13 January 2023 15:04

I think this is the easiest way to strip unwanted code from SVGs. The added bonus: ImageOptim is free and open source and it is the best image optimizer I have ever tried.

HARRY · 13 January 2023 15:16

This would be the code i get from graphic one:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 419.53 297.64" style="enable-background:new 0 0 419.53 297.64;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#009FE3;}
	.st1{fill:#DEDC00;}
	.st2{fill:#008D36;}
	.st3{fill:#BE1622;}
	.st4{fill:#F39200;}
</style>
<polygon class="st0" points="117.07,120.08 54.04,121.67 21.15,67.89 51.28,12.5 114.31,10.91 147.2,64.69 "/>
<circle class="st1" cx="207.28" cy="157.8" r="22.85"/>
<circle class="st2" cx="238.09" cy="134.96" r="22.85"/>
<circle class="st1" cx="247.75" cy="182.74" r="22.85"/>
<polygon class="st3" points="342.92,103.1 324.19,81.99 296.18,85.46 310.47,61.12 298.52,35.55 326.08,41.62 346.71,22.35 
	349.45,50.44 374.15,64.1 348.28,75.39 "/>
<polygon class="st4" points="67.2,218.57 85.61,250.44 104.01,282.32 67.2,282.32 30.4,282.32 48.8,250.44 "/>
</svg>

This would be the code i get from the second graphic:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 419.53 297.64" style="enable-background:new 0 0 419.53 297.64;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#E6007E;}
	.st1{fill:#1D1D1B;}
</style>
<rect x="224.12" y="77.26" class="st0" width="98.17" height="63.97"/>
<polygon class="st1" points="170.34,251.67 97.03,241.3 69.35,172.63 114.98,114.33 188.29,124.7 215.97,193.37 "/>
</svg>

In both graphics you find “.st0” and “.st1”.
To use them on the same site, would cause problems, so you have to rename one of the files to unique id’s.
So “.st0” could be renamed into “.st01”, or whatever.

Up to now, I do that by hand.
Now I#m looking for a different possibility, 'cause it is taking me years on complex graphics.

HARRY · 13 January 2023 19:43

Where did you find that SVG Stack of Joe?

Konfuzzious · 13 January 2023 20:34

According to this page:

New export options—export plain SVG code, which can be easily edited; minified SVG to reduce code size; and unique IDs

Tophat · 14 January 2023 07:34

The post by jamessouttar yesterday morning highlighted the release of the Starter Pack found here Starter Pack. There is the SVG stack included in this pack.

Webdeersign · 14 January 2023 10:46

I coppied your 2 SVG examples and pasted into a Source page using 2 Source SVG stacks. Both appear to work in RW preview and also in Safari, Firefox and Chrome. They look fine in Inspector even though they both have the same ID and same multiple classes.

I have also checked out my SVG creation workflow and that too also creates an ID of Layer_1in every SVG and I have been using the Source SVG stack for over 2 years, with multiple SVGs with the ID of Layer_1 without any issues.

That leads me to think the SVG stack or Framework you are using, may depend on a system ID that matches what your Graphic App is using to insert into your SVG’s.

SVG stacks are often not much more than a basic HTML stack. So you can paste the SVG onto a page and it will work exactly as it is defined in the SVG.

@doobox - Great idea for an App here to remove all the unnecessary code from SVG’s and load into the clipboard in one drag and drop action.

jamessouttar · 14 January 2023 13:09

The fact that the SVG itself has an id (id=“Ebene_1”) means that the same classes given to the individual paths should not be a problem — “#Ebene_1 .st0” would make sure that only the st0 class in the Ebene_1 SVG is targeted (I’m struggling to imagine a stack targeting SVG paths, but it’s always possible). Having paths with the same classes in each SVG is, in fact, a benefit. For instance, if ‘st0’ were a selection path in each SVG (and this would depend on the way you create the SVG) it could be targeted in CSS without the SVG id and given a particular style (for instance, a stroke width and color that appears on hover). It could even be animated. That would then apply to all SVGs.

thinkfilm · 14 January 2023 18:32

I think joeworkman’s Drift Pro stack animates SVG’s by targeting classes in this way.