Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Asembli 86 posts 260 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

    Copy Link
  • Kim Bantz Rasmussen 81 posts 310 karma points
    Apr 23, 2018 @ 11:37
    Kim Bantz 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

    Copy Link
  • Asembli 86 posts 260 karma points
    Apr 23, 2018 @ 14:32
    Asembli
    0

    It works.

    Thnx Kim!

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies