SVG Sprite Generator. IDs by Filenames

In final Linked Sprite SVG file IDs look like “src-1”, “src-2”, “src-3”… It is not comfortable for embedding. How I must remember, where and what icons?

If it possibly makes ID by name of original file without extension. Example:

For files fb-icon.svg, instagram-icon.svg and follow-btn.svg IDs: fb-icon, instagram-icon and follow-btn

<... src="LinkedSprite.svg#fb-icon">
<... src="LinkedSprite.svg#instagram-icon">
<... src="LinkedSprite.svg#follow-btn">


Are you trying our free web app for this task or backend API?
Could you please share the problematic/source file(s)?

I use web app on the site
But now I can’t make example because web app don’t work

One or more errors occurred (Object reference not set to an instance of an object.)

Sprite Generator and SVG Optimizer generate same error

That SVG files, what I tried to upload in web apps (4.6 KB)

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): SVGAPP-105
1 Like

WebApp work today. But in final Linked Sprite SVG file IDs still look like “src-1”, “src-2”, “src-3”…

It possibly makes ID by name of original file without extension? (7.8 KB)


Thanks for the details. We’ll continue investigation and notify you in case of any progress update.


We did corresponding changes in the application. Could you please try the web app again?

I don’t see any changes

<!DOCTYPE html>
<img width="50" height="50" src="LinkedSprite.svg#src-1">
<img width="50" height="50" src="LinkedSprite.svg#src-2">
<img width="50" height="50" src="LinkedSprite.svg#src-3">
<img width="50" height="50" src="LinkedSprite.svg#src-4">
<img width="50" height="50" src="LinkedSprite.svg#src-5">
<img width="50" height="50" src="LinkedSprite.svg#src-6">
<img width="50" height="50" src="LinkedSprite.svg#src-7">
<img width="50" height="50" src="LinkedSprite.svg#src-8">
<img width="50" height="50" src="LinkedSprite.svg#src-9">
<img width="50" height="50" src="LinkedSprite.svg#src-10">
<img width="50" height="50" src="LinkedSprite.svg#src-11">
<img width="50" height="50" src="LinkedSprite.svg#src-12">
<img width="50" height="50" src="LinkedSprite.svg#src-13">

ID’s still src-1, src-2, src-3… but not by filenames



Let us further investigate it. We’ll notify you in case of any progress update.


Could you please try the web app once again? Let us know if issue persists.

Work nice.

<img width="50" height="50" src="LinkedSprite.svg#pay-mastercard">
<img width="50" height="50" src="LinkedSprite.svg#pay-pci">
<img width="50" height="50" src="LinkedSprite.svg#soc-tiktok">
<img width="50" height="50" src="LinkedSprite.svg#soc-viber">

But then I got files with different strange names

google-translate-logo (1).svg

And they look not correct
01.png (11.2 KB)

Extra characters in filenames break the sprite. Files in archive (16.1 KB)

I’m tired to change id in svg-sprite and in html, but it didn’t help. I think bug right in the process of creating a sprite. All extra symbols in file names can be changed by “_” or “-”

google-translate-logo (1).svg = google-translate-logo__1_ or something else

But if it uses normal names - all OK.

And one more thing. Download links look not very nice
02.png (12.1 KB)
Maybe should add space between links or break line

1 Like


Glad to the know that it’s working now.

We’ll further look into this scenario.