attribute viewBox: Expected number, "0 0 NaN NaN".

[FelixLeChat]

In the resulting symbol.html file, there is some viewport that have <symbol viewBox="0 0 NaN NaN" ...

Chrome error :

<symbol> attribute viewBox: Expected number, "0 0 NaN NaN".

TS code :

    $.get("/Content/Img/sprite/sprite.svg", data => {
        const div = document.createElement("div");
        div.innerHTML = new XMLSerializer().serializeToString(data.documentElement); // Error Here
        div.style.display = "none";
        document.body.insertBefore(div, document.body.childNodes[0]);
    });

Gulp task :

gulp.task("build-svg-sprite", function () {
    return gulp.src("./Content/Img/**/*.svg")
      .pipe(svgSprite({
          mode: {
              symbol: { // symbol mode to build the SVG
                  dest: "sprite", // destination foldeer
                  prefix: ".svg--%s", // BEM-style prefix if styles rendered
                  sprite: "sprite.svg", //sprite name
                  example: true // Build sample page
              }
          },
          shape: {
              dimension: {
                  maxWidth: 2000,
                  maxHeight: 2000,
                  precision: 5,
                  attributes: false
              }
          },
          svg: {
              xmlDeclaration: true, 
              dimensionAttributes: false
          }
      }))
      .pipe(gulp.dest("./Content/Img"));
});

[jkphl]

@FelixLeChat Please provide as well the source SVG files used for creating the sprite. This sounds very much like a problem with (at least) one of the shapes.

(Btw. I'm on vacation right now and will likely not be able to debug this before mid of August; please bear with me)

[FelixLeChat]

The only NAN in the symbol.html file is on :

<symbol viewBox="0 0 NaN NaN" id="sprite--sprite">

I found the error :

My gulp file take all *.svg

return gulp.src("./Content/Img/**/*.svg")
      .pipe(svgSprite({

and output the result in the same subfolder

symbol: { // symbol mode to build the SVG
                  dest: "sprite",
                  sprite: "sprite.svg",

Each time the task run, it take itself (sprite.svg) and all .svg to generate the file, adding more and more NAN

[FelixLeChat]

It could be nice to have a check to remove the destination file from the source files if he is present

[jkphl]

@FelixLeChat Sorry for this EXTREMELY late reply, but: I understand your wish to remove the target file(s) from the source file(s), but unfortunately this is beyond the scope of svg-sprite (respectively gulp-svg-sprite). The spriter (.pipe(svgSprite())) has no awareness of where you will output the files after compiling the sprite (.pipe(gulp.dest())), so how should it purge the target file from there? I guess you'll have to implement that yourself somewhere outside the spriting process.