Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Asembli 27 posts 122 karma points
    Apr 23, 2018 @ 10:57
    Asembli
    0

    Svg spritesheet file/format

    Hi,

    I have a problem that svg spritesheet is not showing in property dialog. For test I created svg spritesheet from icomoon (icon- prefix). I can open spritesheet normaly in browser. Also path to svg is correrct. Spritesheet is like this:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generated by IcoMoon.io -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="32" viewBox="0 0 96 32">
    <svg id="icon-c" width="32" height="32" viewBox="0 0 32 32" x="0" y="0">
    <path d="M5 14l1-13 24 29-22-6z"></path>
    </svg>
    <svg id="icon-b" width="32" height="32" viewBox="0 0 32 32" x="32" y="0">
    <path d="M5 14l22-7-6 12-13 5z"></path>
    </svg>
    <svg id="icon-a" width="32" height="32" viewBox="0 0 32 32" x="64" y="0">
    <path d="M8 7h19v17h-19z"></path>
    </svg>
    </svg>
    

    Any hint?

    /Asembli

  • Kim Rasmussen 81 posts 310 karma points
    Apr 23, 2018 @ 11:37
    Kim Rasmussen
    1

    Hi Asembli,

    A svg spritesheet consist of a single <svg> with many <symbol> tags inside. Read about the symbol tag here: https://css-tricks.com/svg-symbol-good-choice-icons/

    Example:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg">
        <symbol id="icon-arrow" viewBox="0 0 20 15.1">
            <path d="M19.5 6.5l-6-6c-.6-.6-1.6-.6-2.2 0-.6.6-.6 1.6 0 2.2L14.7 6H1.5C.7 6 0 6.7 0 7.5S.7 9 1.5 9h13.2l-3.4 3.4c-.6.6-.6 1.6 0 2.2.3.3.7.5 1.1.5s.8-.2 1.1-.5l6-6c.7-.6.7-1.5 0-2.1" />
        </symbol>
        <symbol id="icon-book" viewBox="0 0 80 80">
            <path d="M75.7 64.9V20.3c0-.9-.3-1.2-1.1-1.2H71v-2-3.7c0-.7-.1-1-.2-1.2-.2-.2-.5-.2-1.2-.2H50.2c-2.7 0-5.1.9-7 2.7-.6.6-1.2 1.2-1.7 1.9-.3.3-.5.6-.8.9l-.2.3-.3-.5c-.1-.2-.2-.3-.3-.5-2.2-3.1-4.9-4.7-8.3-4.8-4.9-.1-9.9-.1-14.7 0h-5.7c-.7 0-1 .3-1 1v6H6.7c-.8 0-1.1.3-1.1 1.1v44.4c0 1.1.2 1.3 1.3 1.3H75c.4.2.6-.1.7-.9zm-68.8-.7V21h2.9v39.1c0 .9.3 1.1 1.2 1.1h19.6c2.3 0 4.3.5 6 1.6.2.1.4.3.7.5l1.2.8-31.6.1zm31.3-2.8c-.5-.2-.9-.3-1.4-.5-1.1-.4-2.2-.9-3.4-1.2-.8-.2-1.8-.3-2.7-.3h-19v-2.9H31c3.4 0 6 1.6 7.6 4.5l.3.7-.7-.3zm1.3-12.2v9.1l-.1.8-.4-.5c-1.5-1.8-3.1-2.8-4.8-3.3-1.2-.4-2.2-.5-3.1-.5H11.8V13.9h19c2.4 0 4.3.7 5.9 2 1.9 1.6 2.9 3.8 2.9 6.3-.1 9-.1 18.1-.1 27zm1.8 9v-4.5-31c0-4.1 2.3-7.4 6-8.4.9-.2 1.7-.4 2.5-.4h19.3v40.8H50c-3.1 0-5.6 1.1-7.8 3.5l-.1.1-.2.2s-.1.1-.2.1l-.5.3.1-.7zm.8 3.2c.5-1.2 1.3-2.2 2.5-3.1 1.5-1.1 3.1-1.7 5-1.7h19.5v2.9H50.3c-2.6 0-5 .6-7.2 2-.1 0-.2.1-.3.2l-.9.5.2-.8zm31.7 2.7H42.4l.6-.5c1.8-1.4 3.5-2.1 5.2-2.2 2.6-.1 5.2-.1 7.7-.2h13.6c.6 0 1-.1 1.1-.2.2-.2.2-.5.2-1.1V21h2.9v43.1h.1z" />
            <path d="M46.6 25.1h18.3v1.7H46.6zM46.6 37h18.3v1.7H46.6zM53.7 48.8h11.2v1.7H53.7zM53.8 31H65v1.7H53.8zM46.6 42.9h11.2v1.7H46.6zM46.6 19.2h8.8v1.7h-8.8zM58.5 19.2H65v1.7h-6.5zM60.9 42.9H65v1.7h-4.1zM46.6 31h4.1v1.7h-4.1zM46.6 48.8h4.1v1.7h-4.1zM15.8 31h18.3v1.7H15.8zM15.8 48.8h18.3v1.7H15.8zM15.8 42.9h18.3v1.7H15.8zM15.8 19.2H27v1.7H15.8zM22.9 25.1h11.2v1.7H22.9zM15.8 37H27v1.7H15.8z" />
            <path d="M15.8 37H27" />
            <path d="M30 37h4.1v1.7H30zM15.8 25.1h4.1v1.7h-4.1zM30 19.2h4.1v1.7H30z" />
        </symbol></svg>
    

    Best regards Kim

  • Asembli 27 posts 122 karma points
    Apr 23, 2018 @ 14:32
    Asembli
    0

    It works.

    Thnx Kim!

Please Sign in or register to post replies

Write your reply to:

Draft