CODEWITHSUNDEEP
svgimage-resizing
HomerPlata
HomerPlata

Reputation: 1797

Resizing .svg image using 'convert' function of ImageMagick suite produces empty images

I have created a quick .svg of the StackOverflow logo, which looks like this:

Original SVG

With the following data in the .svg file itself:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1095 2549 c-464 -62 -875 -402 -1029 -850 -57 -168 -78 -379 -58
-579 44 -421 317 -806 706 -995 187 -91 340 -125 566 -125 222 0 378 34 558
120 142 68 239 138 352 250 113 113 184 213 250 353 95 199 127 366 117 622
-8 221 -61 406 -167 584 -70 118 -118 177 -225 279 -178 170 -382 278 -618
326 -95 20 -356 28 -452 15z m695 -466 c0 -5 22 -135 49 -291 27 -155 46 -284
42 -286 -3 -2 -27 -7 -53 -11 -44 -7 -47 -6 -53 16 -17 74 -95 552 -91 557 5
5 65 18 94 21 6 0 12 -2 12 -6z m-240 -344 c80 -117 153 -224 163 -240 l18
-28 -42 -31 -43 -31 -18 23 c-10 13 -84 121 -165 241 l-148 219 35 29 c19 16
39 29 45 29 5 0 75 -95 155 -211z m-195 -219 c132 -78 242 -143 244 -145 2 -2
-9 -25 -23 -50 -25 -41 -29 -44 -49 -34 -51 26 -467 281 -472 289 -7 11 43 92
53 87 4 -3 115 -69 247 -147z m-107 -221 c152 -40 279 -73 281 -75 5 -5 -30
-104 -37 -104 -12 0 -526 140 -543 148 -15 6 -15 12 -3 55 8 26 17 47 20 47 3
0 130 -32 282 -71z m-458 -384 l0 -265 405 0 405 0 0 265 0 265 40 0 40 0 0
-310 0 -310 -495 0 -495 0 0 310 0 310 50 0 50 0 0 -265z m390 165 c124 -11
245 -23 269 -27 l43 -6 -5 -50 c-4 -27 -8 -51 -9 -53 -2 -1 -134 9 -294 23
l-291 26 4 46 c7 66 10 72 35 66 13 -2 124 -14 248 -25z m300 -255 l0 -55
-295 0 -295 0 0 55 0 55 295 0 295 0 0 -55z"/>
</g>
</svg>

And I'm attempting to resize it to 30x30 like so:

convert stackoverflow-4-xxl.svg -resize 30x30 stackoverflow-4-xxl_s.svg

But this produces an empty image (even though data is still present, as seen in the .svg file itself, below)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="30" height="30">
<g style="" transform="scale(1.25,1.25)">
<g style="fill:#000000;stroke:none;" transform="matrix(0.1 0 0 -0.1 0 256)">
<g style="" transform="matrix(0.1 0 0 -0.1 0 256)">
  <path d="M1095 2549 c-464 -62 -875 -402 -1029 -850 -57 -168 -78 -379 -58 -579 44 -421 317 -806 706 -995 187 -91 340 -125 566 -125 222 0 378 34 558 120 142 68 239 138 352 250 113 113 184 213 250 353 95 199 127 366 117 622 -8 221 -61 406 -167 584 -70 118 -118 177 -225 279 -178 170 -382 278 -618 326 -95 20 -356 28 -452 15z m695 -466 c0 -5 22 -135 49 -291 27 -155 46 -284 42 -286 -3 -2 -27 -7 -53 -11 -44 -7 -47 -6 -53 16 -17 74 -95 552 -91 557 5 5 65 18 94 21 6 0 12 -2 12 -6z m-240 -344 c80 -117 153 -224 163 -240 l18 -28 -42 -31 -43 -31 -18 23 c-10 13 -84 121 -165 241 l-148 219 35 29 c19 16 39 29 45 29 5 0 75 -95 155 -211z m-195 -219 c132 -78 242 -143 244 -145 2 -2 -9 -25 -23 -50 -25 -41 -29 -44 -49 -34 -51 26 -467 281 -472 289 -7 11 43 92 53 87 4 -3 115 -69 247 -147z m-107 -221 c152 -40 279 -73 281 -75 5 -5 -30 -104 -37 -104 -12 0 -526 140 -543 148 -15 6 -15 12 -3 55 8 26 17 47 20 47 3 0 130 -32 282 -71z m-458 -384 l0 -265 405 0 405 0 0 265 0 265 40 0 40 0 0 -310 0 -310 -495 0 -495 0 0 310 0 310 50 0 50 0 0 -265z m390 165 c124 -11 245 -23 269 -27 l43 -6 -5 -50 c-4 -27 -8 -51 -9 -53 -2 -1 -134 9 -294 23 l-291 26 4 46 c7 66 10 72 35 66 13 -2 124 -14 248 -25z m300 -255 l0 -55 -295 0 -295 0 0 55 0 55 295 0 295 0 0 -55z"/>
</g>
</g>
</g>
</svg>

So, just to see if resizing to the same size produces the original image (or therabouts), I did:

convert stackoverflow-4-xxl.svg -resize 256x256 stackoverflow-4-xxl_m.svg

And this still produced an empty image, with the .svg data identical except for:

<svg width="256" height="256">

Any idea where I'm going wrong?

Upvotes: 3

Views: 3056

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

You don't need to use a program.

Either:

  1. hand edit the SVG. Change the width and height to 30px.

    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="30px" height="30px" viewBox="0 0 256.000000 256.000000"
 preserveAspectRatio="xMidYMid meet">...

  2. Or if you want to style its size with CSS, just remove the width and height.

    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 256.000000 256.000000"
 preserveAspectRatio="xMidYMid meet">...

Upvotes: 2

Related Questions