SVG Tiles

[styk-tv]

Is there a way to use svg elements for tiles? Or perhaps attach a larger tile-sheet of svg icons and then reference individual tiles when making tiles. All embedded with the json file. I'm doing a proof of concept for ReactNative app and want to use SVG instead of image tiles but still 100% hooked on Tiled

Any plans to support this in Editor?

https://www.sitepoint.com/use-svg-image-sprites/

And also having image tiles file and using svg engine itself to map to tiles with rotate would be a very cool Tiled Export feature. As demoed here:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 353 230">
    <defs>
        <clipPath id="walk0"><rect x="0"   y="0" width="44" height="70" /></clipPath>
        <clipPath id="walk1"><rect x="44"  y="0" width="44" height="70" /></clipPath>
        <clipPath id="walk2"><rect x="88"  y="0" width="44" height="70" /></clipPath>
        <clipPath id="walk3"><rect x="132" y="0" width="44" height="70" /></clipPath>
        <clipPath id="walk4"><rect x="176" y="0" width="44" height="70" /></clipPath>
        <clipPath id="walk5"><rect x="220" y="0" width="44" height="70" /></clipPath>
        <clipPath id="walk6"><rect x="264" y="0" width="44" height="70" /></clipPath>
        <clipPath id="walk7"><rect x="308" y="0" width="44" height="70" /></clipPath>
        <image id="img" xlink:href="http://phrogz.net/tmp/walking-girl2.png" width="353" height="70" />
    </defs>
    <use xlink:href="#img" />
    <g transform="translate(0,80)"><use xlink:href="#img" clip-path="url(#walk0)" /></g>
    <g transform="translate(0,160)"><use xlink:href="#img" clip-path="url(#walk0)" /></g>
    <script><![CDATA[
        var g   = document.querySelectorAll('g')[1],
            use = document.querySelectorAll('use');
        var delay = 1200, i=7;
        function increment(){
            i = (i+1)%8;
            if (delay>=80) delay *= 0.9;
            var path = "url(#walk"+i+")";
            use[1].setAttribute('clip-path',path);
            use[2].setAttribute('clip-path',path);
            g.setAttribute('transform','translate(-'+(i*44)+',160)');
            setTimeout(increment,delay);
        }
        increment();
    ]]></script>
</svg>

demo: http://phrogz.net/svg/image-spritesheet-simple.svg credit: https://stackoverflow.com/questions/9414207/svg-spritesheets

This is crude but its as an idea demo...

[bjorn]

Is there a way to use svg elements for tiles?

Tiled should support SVG, however it will rasterize it on load using the size stored within the SVG, and from then on it's just like any other image. So using SVG currently doesn't provide any benefit in terms of resolution-flexibility (at least not in Tiled) or doing anything relying on the structure of the SVG hierarchy.

And also having image tiles file and using svg engine itself to map to tiles with rotate would be a very cool Tiled Export feature.

I agree better support for SVG and SVG export would be really nice, but it'll be a huge project.