Does it work with SVG sprites by using xlink:href="#spritename"? about svgmagic HOT 9 CLOSED

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

from svgmagic.

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.

from svgmagic.

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.

from svgmagic.

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,

from svgmagic.

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.

from svgmagic.

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.

from svgmagic.

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.

from svgmagic.

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.

from svgmagic.

Sounds good guys, thanks for your comments.

from svgmagic.