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.

13

Generator not working

content.bundle.js:56169
Refused to create a worker from ‘blob:https://products.aspose.app/27f25b62-9022-4dd6-baff-dd94ab3d203c’ because it violates the following Content Security Policy directive: “default-src * ‘unsafe-eval’ ‘unsafe-inline’ data:”. Note that ‘worker-src’ was not explicitly set, so ‘default-src’ is used as a fallback. Note that ‘*’ matches only URLs with network schemes (‘http’, ‘https’, ‘ws’, ‘wss’), or URLs whose scheme matches self’s scheme. The scheme ‘blob:’ must be added explicitly.

14

@alexvoz

We are further investigate this issue. You’ll be notified as there’s any update.

15

@alexvoz

Based on the error message you’ve provided:

It appears that your application’s Content Security Policy is preventing the creation of web workers from blob: URLs, which is necessary for the SVG Sprite Generator to function correctly.

Suggested Solution

  1. Modify the worker-src Directive To fix this issue, you need to adjust your Content Security Policy to explicitly allow blob: URLs for web workers. Here’s how you can update your Content Security Policy to include blob: in the worker-src directive. This tells the browser to allow web workers from blob: URLs. Content-Security-Policy: worker-src 'self' blob:;
  2. Adjust the default-src Directive If you cannot modify the worker-src directive directly, you can include blob: in the default-src directive, though this is less specific. Content-Security-Policy: default-src 'self' blob: * 'unsafe-eval' 'unsafe-inline' data:; Including blob: in default-src is less secure than specifying it in worker-src, but it may be a practical solution depending on your application’s needs.

The SVG Sprite Generator uses web workers to process SVG files efficiently without blocking the main thread. Modern browsers enforce strict CSP rules, and without the correct directives, they will block the creation of web workers from blob: URLs, leading to the error you’re encountering.

If the problem persists after updating your CSP settings, please provide the following details to help us diagnose the issue more effectively.

A brief description of how you’re using Aspose.SVG in your application. Are you using it in a web application, a desktop application, or a service?

Steps to Reproduce the Error:

Detailed steps or code snippets that lead to the error. This will help us replicate the issue on our end.

Browser Console Logs:

Any additional error messages or warnings from the browser’s developer console that might provide more context.