search

dbushell / grunt-svg2png

Grunt plugin to rasterize SVG to PNG images using PhantomJS
MIT License
76 stars 37 forks source link

Image widths/aspect ratios not maintained #11

Open martinAnsty opened 10 years ago

martinAnsty commented 10 years ago

I have a series of svg files with 300x300 viewboxes: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" enable-background="new 0 0 300 300">

But grunt-svg2png creates 400x300 PNGs. Given the scalable nature of SVG I could understand the dimensions changing, but the aspect ratio should be maintained.

PNG: bars

Original SVG

felixakiragreen commented 10 years ago

I have the same problem. Is there a way to set scale or dimensions?

samdbeckham commented 9 years ago

The viewbox isn't a size it's just a value you can plot your SVG points against.

If you want to set the output size of your SVG you can do it like this

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" enable-background="new 0 0 300 300" width="300px" height="300px">

svg2png will pick up these sizes and export your image with the right dimensions.

josephfusco commented 9 years ago

Even though this is going on a year old, I will just post this in case anyone else runs into these issues.

Like @samdbeckham was saying, just having viewbox is not going to work.

My pngs were being generated with a width and height of 400x300. I realized this is the default given if the original svg does not have the attributes. I also noticed that as the task was running though each svg, if a height and width was present, it will keep using the last known svg that had a height and width set.

How To Solve

Go through each original svg files and establish a height and width.

Example
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.8 0 300 300">

This would create a png that was 400x300 or whatever the last svg with a height and width had. 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.8 0 300 300" height="300" width="300">

Since we are dealing with pngs which have hard dimensions, this just has to be done. If you are using a tool such as grunt-svgstore, this shouldn't really matter as it strips out the height and width by default anyways :smile: