Redimensionner l'image .svg en utilisant la fonction « convert » de la suite ImageMagick produit des images vides

J'ai créé un .svg rapide du logo StackOverflow, qui ressemble à ceci:Redimensionner l'image .svg en utilisant la fonction « convert » de la suite ImageMagick produit des images vides

Avec les données suivantes dans le .svg fichier lui-même:

<?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>

Et je tente de le redimensionner à 30x30 comme ceci:

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

Mais cela produit une image vide (même si les données sont toujours, comme on le voit dans le fichier svg lui-même, ci-dessous)

<?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>

Alors, juste pour voir si le redimensionnement à la même taille produit l'image d'origine (ou therabouts), je l'ai fait:

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

et ce encore produit une image vide, avec les données de .svg identiques sauf pour:

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

Une idée où je me trompe?

Source

2017-04-20 HomerPlata

Je n'ai rien à voir avec SVG mais je pensais que l'idée était une image vectorielle et peut être redimensionnée sans perte d'information. J'ai compris que cela signifiait qu'il était mis à l'échelle par le programme d'affichage. Donc, je voudrais essayer de le sauvegarder en tant que png et voir ce qui se passe. – Bonzo

Je sais ce que vous dites, je devrais pouvoir le redimensionner avec le CSS/HTML avec lequel je l'utilise, mais j'ai des difficultés. Donc je pense que je redimensionne le .svg à la même taille que le .svgs que j'ai déjà travaillé, et le CSS, etc. devrait bien fonctionner. Probablement pas la meilleure façon de l'aborder, mais c'est soit ça ou pas de progrès pour le moment. – HomerPlata

Juste un test rapide en utilisant html et ceci redimensionne dans mon navigateur OK: Avez-vous du code css/html à poster? L'alternative est d'essayer directement Inkscape, que je pense qu'Imagemagick utilise quand même. – Bonzo

Vous n'avez pas besoin d'utiliser un programme.

Soit:

main modifier le SVG. Remplacez width et height par 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">...

Ou si vous voulez le style de sa taille avec CSS, il suffit de retirer le width et height.

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

Source

2017-04-20 17:15:45

Merci, c'est exactement ce que je recherchais. – HomerPlata

Redimensionner l'image .svg en utilisant la fonction « convert » de la suite ImageMagick produit des images vides

Répondre

Questions connexes