grunt-svg2png
grunt-svg2png copied to clipboard
dbushell
Image widths/aspect ratios not maintained
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:
I have the same problem. Is there a way to set scale or dimensions?
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.
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:
