Does it support references to another symbol?

[tleunen]

Let's say I have 1 sprite, but I'd like multiple symbols referencing the same sprite. Is there a mechanism to create a reference? Is it done automatically maybe if we had twice the same file?

Maybe to produce something like this, with super-fish referencing fish instead of duplicating the path.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">  
  <symbol id="fish" viewBox="0 26 100 48">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
	c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
	c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
	C88,48.9,86.9,50,85.5,50z"/>  
  </symbol>
  
  <symbol id="super-fish">
    <use href="#fish"/>
  </symbol>
</svg>

[jkphl]

@tleunen I didn't do this for a long time, but within certain limits regarding the resulting shape names you should be able to do this by (mis)using the displaced shape copy feature. (I have no idea when Github started produce these red bars in the docs; please ignore them).

[tleunen]

Great, thank you for the quick reply. I'll give it a try.

[jkphl]

Please let me know if this works, would be interested in the result as well. Btw I just started a major rewrite of svg-sprite. If you've got any suggestions, please drop them at https://github.com/jkphl/svg-sprite/issues/230. Thanks!

[tleunen]

I have tried something. I don't see the svg in my sprite yet, but I have noticed something while debugging, it seems %s is always prepend with the name of the new alignment. Is there a way to prevent this? Sometimes, I'd like to alias with a complete different name.

//edit: I don't really see where the copies are written in the file... Maybe you can help me? I only see where they get removed with the master svg, but then it seems nothing is done with the "copies"?

[tleunen]

I'm reopening it.

It seems the alignment only works for a css output, right? Could make sense because there's no alignment in a symbol mode anyway...

Maybe I can add a post step and manually add my alias in the generated file then :/ Hopefully this is a feature you'll add in the next version :)

[jkphl]

@tleunen Well, the aliasing thing is a feature to align the shapes within the sprite and you're right, off the top of my head I'm not sure if this is really relevant for the <symbol> mode. I was hoping it is. And yes, the alignment is intended to result in "variants", so the original shape name is kept as part of the copy name.

Another solution could be (not tested): Use the same SVG file twice, with different names. It might also work with symlinks, not entirely sure. As far as I remember the spriter checks for the checksum of the files and reduces redundant ones.

In the next version I will try to avoid as many dependencies as possible and focus on the main purpose, i.e. creating sprites. I'm not sure how many of these "side features" I will re-implement directly into the core again. In your example, adding the same shape twice with different names (possibly using a symlink) sounds like an easy and acceptable effort compared to making the core doing all this for you. I'll try my best. :)

[tleunen]

Duplicating the file doesn't work. They both have the exact same graphic path instead of one having a reference to the other.