Final image has whitespace trimmed

[thasmo]

It seems like rasterizing an SVG image trims all whitespace which results in a smaller (pixel) size compared to the original SVG file.

Any idea why this happens?

[Otouto]

Could you provide sample svg to reproduce this bug, please?

[thasmo]

@Otouto, SVG is here; PNG here.

[stikoo]

Yep I'm also having this issue, I'm using gulp-svg-sprites to generate a SVG that has 20px padding, but the piped output from gulp-raster is clipping off the top, bottom and left padding from the png. Not ideal!

[daviddarnes]

Getting the same issue, screenshot example attached. Left is PNG, right is the SVG. Transparent pixels appear to be trimmed off.

[amster]

It would be nice to not have the padding removed.

[ghost]

I'm having the same issue here and would love to get this feature as well.

Thanks.

[bm2u]

Unfortunately the same issue. Even if I add a background style, width and height to

[bm2u]

Got a workaround:

I'm using gulp-cheerio to manipulate the source SVG before rastering. Adding a rectangle after your path and set the fill-opacity to '0' resolves the cropping issue.

Example:

var gulp = require('gulp'),
    cheerio = require('gulp-cheerio'),
    raster = require('gulp-raster');
...
.pipe(cheerio({
    run: function ($) {
        $('path')
            .after('<rect fill="#ffffff" fill-opacity="0"/>');
        $('rect')
            .attr({
                height: size,
                width: size
            });
    }
...

[daviddarnes]

@bm2u nice work around! I think I was using cheerio at the time as well :)