SVG Sprite Generator. IDs by Filenames

Aspose.SVG App Product Family
1

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">
2

@alexvoz

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

3

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

Error
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
svgs.zip (4.6 KB)

4

@alexvoz
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
5

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?

LinkedSprite.zip (7.8 KB)

6

@alexvoz

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

7

@alexvoz

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

8

I don’t see any changes

<!DOCTYPE html>
<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">
</html>

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

¯\_(ツ)_/¯
9

@alexvoz

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

10

@alexvoz

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

11

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

Logo_of_Google_Lens.svg
adobe-1.svg
tinder-2.svg
Microsoft_365_Copilot_Icon.svg
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
svg.zip (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
12

@alexvoz

Glad to the know that it’s working now.

We’ll further look into this scenario.