Does it work with SVG sprites by using xlink:href="#spritename"?

[iainvdw]

SVG's sprites are multiple SVG's combined into one file by using a block or definitions. Does SVGMagic support linking to those symbols using xlink:href="#spritename"?

[craigfowler]

Off the top of my head I'll say no - but then I have never tried. There is no attempt to handle this explicitly in the plugin code, so if it works it will only be by chance.

It might be a feature that can be added to SVGMagic at some point in the future. I don't know about Dirk Groenen, but I don't have any personal experience working with these kinds of SVGs. If you would like to help get the feature added, could you perhaps write a small test HTML file (with an SVG sprite included) and describe what you would expect SVGMagic to do with it? Even more useful would be to provide two versions of that HTML test page. One with the SVG and the other with the PNG-rendered output of what you'd expect SVGMagic to have created.

By way of a guess, are you asking for SVG sprites to be transformed into a "PNG sprite" combined image. So, for example a 50×50 px SVG with five frames defined, would be converted into a PNG image that is 50×250 px PNG image?

Thanks

[iainvdw]

I'll see if I can come up with a test page this weekend. The PNG doesn't have to be a sprite, just the single png like with regular SVG's. One sprites.svg which contains three named one, two and three would output i.e. one.png, two.png and three.png via the converter.

Converting to a sprite would be harder because of different sizes which would have to be applied to the whole sprite map and calculating correct background positions etc.

[dirkgroenen]

I have to copy Craig on this one. I'm not available for the coming two weeks, but when I'm back I will take a look a the test page, maybe that I can come up with a solution.

[ricardozea]

I know I'm late to the party (3+ years later, lol) but this feature is a must these days.

I use SVG sprites for icons all the time, just like I used to do with PNG sprites. Using the <use> element the markup would look like this:

<use xlink:href="images/sprite.svg#icon-cellphone"></use>

The sprite SVG file looks like this:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-cellphone" viewBox="0 0 32 32">
        <title>cell-phone</title>
        <path d="M24 29.09V2.91C24 0 21.09 0 21.09 0H10.91S8 0 8 2.91v26.18C8 32 10.91 32 10.91 32h10.18S24 32 24 29.09zM14.01 2.18c-.105 0-.19-.144-.19-.323v-.084c0-.18.085-.32.192-.32h3.977c.105 0 .192.143.192.32v.084c0 .182-.087.323-.194.323H14.01zM9.456 26.868V3.63h13.09v23.24H9.454zm5.09 2.468c0-.803.65-1.452 1.454-1.452.803 0 1.453.65 1.453 1.452 0 .803-.65 1.453-1.454 1.453-.805 0-1.456-.65-1.456-1.455z"/>
    </symbol>
    <symbol id="icon-heart" viewBox="0 0 24 32">
        <title>heart</title>
        <path d="M12 27c12.469-9.813 12-13.281 12-16s-2.25-6-6-6-6 4-6 4-2.25-4-6-4-6 3.281-6 6-0.469 6.188 12 16z"/>
    </symbol>    
    <symbol id="icon-moon" viewBox="0 0 32 32">
        <title>moon</title>
        <path d="M24.633 22.184c-8.188 0-14.82-6.637-14.82-14.82 0-2.695 0.773-5.188 2.031-7.363-6.824 1.968-11.844 8.187-11.844 15.644 0 9.031 7.32 16.355 16.352 16.355 7.457 0 13.68-5.023 15.648-11.844-2.18 1.254-4.672 2.028-7.367 2.028z"/>
    </symbol>
</svg>

The idea would be to replace the <use> element with something like <img src="https://yourdomain/icon-cellphone.png" alt="Icon Cellphone">.

Aaanyhow, is this something you may be interested in implementing at all? Not sure if that's going to happen since this post hasn't been updated since Aug 8, 2014 😕.

Thanks,

[craigfowler]

I'm going to chip in that I'm highly unlikely to work on this myself. SVG magic is becoming decreasingly important to me, now that all of the browsers I target support SVG natively to some extent or another.

Indeed, I'm soon to drop IE9 support in my own work.

[ricardozea]

Got it 👍, thanks for clarifying.

FWIW, according to caniuse: "IE9-Edge12, Safari 5.1-6, and UCWeb 11 do not support referencing external files via <use xlink:href>".

An alternative script to support this feature is SVG for Everybody.

[craigfowler]

PS: For clarity, I'm not the original author of SVG Magic, but I contributed a little. I was mainly responding because of a thread-participant notification.

[dirkgroenen]

I'm with Craig on this one @ricardozea. I have no plans in shutting down SVGmagic since there's still enough sites "depending" on it. That said with decreasing IE9 usage I don't see myself invest time in adding new features to it.

[ricardozea]

Sounds good guys, thanks for your comments.