Broken output in symbols mode

[fulminant]

This happens when i use symbols mode:

<symbol id="BG" viewBox="0 0 595.279 841.89">[object Object] [object Object] </symbol>

This is my task:

gulp.task('svg', function () {
    return gulp.src('images/svg/*.svg')
        .pipe(svgSprite({
            mode: "symbols"
        }))
        .pipe(gulp.dest('images/svg/test/'));
});

and i tried so

gulp.task('svg', function () {
    return gulp.src('images/svg/*.svg')
        .pipe(svgSprite({
            mode: "symbols"
            svg: {
                symbols: 'symbol_sprite.html'
            }
        }))
        .pipe(gulp.dest('images/svg/test/'));
});

[kovinchuk]

• windows 10 x64

  <symbol id="calendar" viewBox="0 0 14 12">

      [

      o

      b

      j

      e

      c

      t

      O

      b

      j

      e

      c

      t

      ]

      [

      o

      b

      j

      e

      c

      t

      O

      b

      j

      e

      c

      t

      ]

  </symbol>

[zizther]

The same is happening with me on Mac

[XuJinNet]

The same problem!!!!

[bambamboole]

+1 same problem here on MacOS

[Makvagabo]

windows 10 x64 The same problem!!!! I solved this problem by changing the pattern "symbols.svg" `

<%= svgItem.data.replace(/(.*?)<\/svg>/, "$1") %>

<% }); %>

`

[romanmarkelov]

windows 10 x64 The same problem

[PawelGlow]

@soenkekluth any solution to this problem?

[fvsch]

Bug happens upstream: https://github.com/shakyShane/svg-sprite-data/issues/6

Though in gulp-svg-sprite, the default template would have to be fixed (there’s no need to iterate on a string).

[xahon]

Have you found solution?

[steffenmllr]

@xahon If you just need symbols I wrote https://github.com/mllrsohn/gulp-svg-symbol-sprite today which generates something like this:

<svg height="0" style="position: absolute" width="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="arrow" viewbox="0 0 25 45">
        <path d="..."/>
    </symbol>
    <symbol id="cart" viewbox="0 0 21.5 17">
        <path d="..."/>
        <circle cx="4.793" cy="15.206" r="1.794"/>
        <circle cx="13.208" cy="15.206" r="1.794"/>
    </symbol>
</svg>

It works for my projects - so no tests so far. The code is relative simple. Have a look if it fits your needs.

[ghost]

Until it's fixed you can save the changed symbols template in your project and override the path:

.pipe(plugins.svgSprites({
        mode: 'symbols',
        preview: {
          sprite: 'index.html'
        },
        templates: {
          symbols: require('fs').readFileSync('./dev/symbols.svg')
        }
      }))```

[soenkekluth]

fixed by https://github.com/shakyShane/gulp-svg-sprites/pull/90