svg spritesheet fileformat - Support

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Asembli 81 posts 255 karma points

Apr 23, 2018 @ 10:57

Svg spritesheet file/format

Support

Umbraco 7

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

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 81 posts 255 karma points

Apr 23, 2018 @ 14:32

0

It works.

Thnx Kim!

Copy Link
is working on a reply...

Please Sign in or register to post replies