question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

duplicate generated linearGradient id in symbol mode

See original GitHub issue

Consider two icons with linear gradient and each gradient having its own unique id. for example:

bike.svg: 
<linearGradient id="BIKE_1" ... > ... </linearGradient>
<linearGradient id="BIKE_2" ... > ... </linearGradient>
<linearGradient id="BIKE_3" ... > ... </linearGradient>
...
<path fill="url(#BIKE_1)" ... />
<path fill="url(#BIKE_2)" ... />
<path fill="url(#BIKE_3)" ... />

and second icon:

car.svg: 
<linearGradient id="CAR_1" ... > ... </linearGradient>
<linearGradient id="CAR_2" ... > ... </linearGradient>
<linearGradient id="CAR_3" ... > ... </linearGradient>
...
<path fill="url(#CAR_1)" ... />
<path fill="url(#CAR_2)" ... />
<path fill="url(#CAR_3)" ... />

When sprite.svg is generated using symbol mode, these unique ids are replaced with a,b,c , … and since this auto generating id names is reset in each file, we might face a sprite.svg file with more than one id name corresponding to a gradient. Is there any way to stop generating these ids automatically and use the ones which are in original svg files?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:7

github_iconTop GitHub Comments

4reactions
kirill-talkcommented, Feb 21, 2018

I’ve made some code that fix this problem

...
.pipe(svgSprite({
  mode: "symbols",
  preview: {
    symbols: './preview/symbols.html'
  },
  selector: "%f",
  svg: {
    symbols: 'symbols.svg'
  },
  transformData: function (data, config) {
    data.svg.map(function(item) {
      //change id attribute
      item.data=item.data.replace(/id=\"([^\"]+)\"/gm, 'id="'+item.name+'-$1"');

      //change id in fill attribute
      item.data=item.data.replace(/fill=\"url\(\#([^\"]+)\)\"/gm, 'fill="url(#'+item.name+'-$1)"');

      //change id in mask attribute
      item.data=item.data.replace(/mask=\"url\(\#([^\"]+)\)\"/gm, 'mask="url(#'+item.name+'-$1)"');

      //replace double id for the symbol tag
      item.data=item.data.replace('id="'+item.name+'-'+item.name+'"', 'id="'+item.name+'"');
      return item;
    });
    return data; // modify the data and return it
  }
}))
...
0reactions
donomroncommented, Jun 23, 2018

@kirill-talk sorry for my late response. this solves the problem

I’m closing this issue as @kirill-talk and @idmistir solutions worked for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

repeating-linear-gradient() - CSS: Cascading Style Sheets
The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() ...
Read more >
How to handle duplicate IDs for inline SVGs? - Stack Overflow
Here is a rough outline for a script to make the IDs of one SVG unique: 1. Generate a random token 2. Search...
Read more >
Create gradients in Illustrator - Adobe Support
To copy a freeform gradient from one object to another, use the Color Picker tool in the toolbar. Create freeform gradient in points...
Read more >
Gradients and Patterns – SVG 1.1 (Second Edition) - W3C
When gradientUnits="objectBoundingBox" and 'gradientTransform' is the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector ...
Read more >
Creating and Managing ArchestrA Graphics User's Guide
Viewing a Symbol in Read-Only Mode . ... The ArchestrA Symbol Editor is a powerful addition to the ... A copy of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found