svg changes when converted to symbol

Question

I have this dummy svg showing a cirle with some grey figure inside

<svg viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <circle id="path-1" cx="43" cy="43" r="43"></circle>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g transform="translate(-585.000000, -391.000000)">
        <g transform="translate(585.000000, 391.000000)">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Oval" fill="currentcolor" xlink:href="#path-1"></use>
            <g id="Group" mask="url(#mask-2)" fill="#b8b8b8">
                <g transform="translate(21.500000, 27.823529)" id="Page-1">
                    <path d="M0.5,0.176470588 L0.5,58.1764706 L15.5,58.1764706 L15.5,49.1764706 L29.5,49.1764706 L29.5,31.1764706 L7.5,31.1764706 L7.5,37.1764706 Z"></path>
                </g>
            </g>
        </g>
    </g>
</g>

when I convert it to a sprite using gulp-svg-sprite with mode symbol I get this result

<?xml version="1.0" encoding="UTF-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 86 86" id="company"><defs><circle id="aa" cx="43" cy="43" r="43"/></defs><g fill="none" fill-rule="evenodd"><mask id="ab" fill="#fff"><use xlink:href="#aa"/></mask><use fill="currentcolor" xlink:href="#aa"/><g mask="url(#ab)" fill="#b8b8b8"><path d="M22 28v58h15v-9h14V59H29v6z"/></g></g></symbol></svg>

Now the grey figure breaks out of the circle and this even happens if I copy root defs- and g-tags from my original svg directly into the symbol-tag. I have also tried inserting a clipPath in the symbol version but with no luck.

What am I missing here?

Ruskin · Answer 1 · 2017-02-02T11:54:42.200

0

UPDATED: Simplifying your svg may work ... try with the examples below, one using symbols, one without (in case the gulp sprite code cannot have nested symbols) ... it may be an issue with the defs area.

svg {
  width: 100px;
}

<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="c">
      <circle cx="43" cy="43" r="43" fill="currentColor" />    
    </symbol>
    <mask id="mask" color="#fff">
      <use xlink:href="#c" />
    </mask>
  </defs>
  <use xlink:href="#c" color="#666" />
  <path fill="#999" mask="url(#mask)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>

<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask2" color="#fff">
      <circle cx="43" cy="43" r="43" fill="#FFF" />
    </mask>
  </defs>
  <circle cx="43" cy="43" r="43" fill="currentColor" />
  <path fill="#999" mask="url(#mask2)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>

edited Feb 02 '17 at 11:54

answered Feb 01 '17 at 18:10

Ruskin

5,721
4
45
62

it gives me a figure with a wrong placement - but if I adjust the placement it breaks out of the circle even when not a symbol. – keysersoze Feb 02 '17 at 08:36
Updated ... but need to try it in the gulp task to see the output ... post output on question? – Ruskin Feb 02 '17 at 13:37
It seems like some (or all?) defs are ignored the way the svg-sprite works and are used unless the defs are moved to before symbols. I have posted my solution as an answer. Thanks for your effort! – keysersoze Feb 06 '17 at 12:54

score 0 · Answer 2 · answered Feb 06 '17 at 12:52

It is probably not a complete answer but I managed to get it work;

First I extended my defs with a clipPath using my circle

<defs>
    <circle id="circle" cx="43" cy="43" r="43"></circle>
    <clipPath id="clippath"><use overflow="visible" xlink:href="#circle" /></clipPath>
</defs>

Then, using the clipPath on my first group and switching from gulp-svg-sprite to gulp-svgstore (which moves the defs to the top, above the symbols) gives me what I expect both as single svg and as an svg symbol sprite.

svg changes when converted to symbol

2 Answers2