SVG works in preview but not in site

[khusseini]

Hi there,

I generated a symbol sprite after I sent the individual svgs through svgo. The icons render fine on the preview, however when I imeplement some in my site, they get cut. I applied the same styling as in the preview, only difference is that I am not including the SVG in the markup (it is simply a very bad way of doing things). Note that not all SVGs are cut, but only a few.

Here a screenshot of the implemented SVG http://postimg.org/image/8yin4b4bx/ And a screenshot of the preview http://postimg.org/image/5kwsyjfe9/

Here is my task:

gulp.task('build:assets:logos', function () {
    return gulp.src(paths.assets.logos.src)
        .pipe(plugins.svgo({
            plugins: [
                {removeXMLProcInst: false}, // Prevents removal of the xml header
                {removeViewBox: false}
            ]
        }))
        .pipe(plugins.svgSprites({mode: "symbols"}))
        .pipe(gulp.dest(paths.assets.logos.build));
});

And my generated sheet: https://gist.github.com/mozzymoz/ffe412f127a0ce0ef2c6

Can anyone help?

[khusseini]

I can get the icons to work, if I include the sprite contents in the HTML. But this is a huge data overhead...