Otouto / gulp-raster

gulp task for conversion svg to raster
MIT License
18 stars 16 forks source link

Final image has whitespace trimmed #5

Open thasmo opened 9 years ago

thasmo commented 9 years ago

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 commented 9 years ago

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

thasmo commented 9 years ago

@Otouto, SVG is here; PNG here.

stikoo commented 9 years ago

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 commented 9 years ago

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

amster commented 9 years ago

It would be nice to not have the padding removed.

ghost commented 9 years ago

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

Thanks.

bm2u commented 9 years ago

Unfortunately the same issue. Even if I add a background style, width and height to of the source files. Any suggestions or workarounds?!

bm2u commented 9 years ago

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 commented 9 years ago

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