web-dev-qa-db-fra.com

Convertir et redimensionner SVG en PNG

J'essaie de convertir SVG en PNG (ou n'importe quel format raster) et de redimensionner en même temps.

Je pensais que j'utiliserais ImageMagick pour cette tâche, mais il semble se convertir en raster avant de redimensionner.

Il en résulte une image de mauvaise qualité.

  • Existe-t-il un moyen d'obtenir ImageMagick pour redimensionner le SVG avant de le convertir en raster?

  • Ou existe-t-il un autre outil que je peux utiliser pour convertir par programme un SVG en raster après l'avoir redimensionné?

  • Sinon, existe-t-il un autre outil que je pourrais utiliser pour cela?

Actuellement, j'utilise ImageMagick via une ligne de commande:

convert file.svg -resize 100x100 file.png

La "taille" de l'image source est inconnue et la taille de destination n'est pas connue avant l'exécution.

31
DJL

C'est ainsi que je le fais et cela semble fonctionner.

convert -background none -density 1000 -resize 1000x compass.svg compass.png

Voici ce que fait chaque partie.

  • Utilisation -background none pour vous assurer que toutes les parties transparentes du SVG restent transparentes et ne soient pas remplies de blanc.
  • Comme ImageMagick ne fonctionne qu'avec des images raster, vous devez utiliser -density 1000 et spécifiez la largeur à laquelle vous souhaitez redimensionner le SVG. De cette façon, lorsque vous appelez réellement la commande de redimensionnement, la représentation raster du SVG chargé aura déjà une largeur de 1000, sinon vous finirez par redimensionner un raster vers le haut ou vers le bas, quelle que soit la taille d'origine de l'image SVG.
  • Utilisez maintenant -resize 1000x pour donner à votre SVG une nouvelle largeur, la hauteur sera calculée automatiquement pour conserver le rapport hauteur/largeur.

Un écueil est que je ne sais pas vraiment comment vous pouvez redimensionner en fonction de la hauteur et laisser la largeur être calculée depuis -density est appliqué à la largeur et non à la hauteur. Donc, vous devez connaître à l'avance le rapport réel de votre SVG et travailler avec la largeur en conséquence.

34
Tony Bogdanov

Le SVG est défini comme un vecteur, pas comme un bitmap - c'est ce que la messagerie instantanée aime traiter. Lorsque IM lit un vecteur, il ne connaît pas la taille, alors quand vous faites cela:

convert compass.svg -resize 1000x1000 compassB.jpg

il crée un canevas bitmap de taille par défaut, "dessine" le vecteur dessus, puis le redimensionne et l'enregistre en tant que JPEG. Le résultat, si votre taille prévue est plus grande que le canevas que IM "a deviné" est de mauvaise qualité - il ne peut pas créer des informations qu'il n'a plus comme résultat de pixelliser l'image sur une toile trop petite.

enter image description here

La solution est de dire à IM en amont que le vecteur doit être dessiné sur une grande toile, avant il pixellise:

convert -size 1000x1000 compass.svg compassA.jpg

enter image description here

33
Mark Setchell

J'ai fait svgexport pour cela:

svgexport file.svg file.png 100:100
9
Ali Shakiba

Il s'avère donc qu'Inkscape possède une interface de ligne de commande.

Malheureusement, le -w et -h les arguments vers inkscape ne conservent pas le rapport hauteur/largeur. Cependant, il fournit un moyen d'interroger la largeur et la hauteur actuelles - mais une seule à la fois.

La solution consiste donc à exécuter inkscape pas moins de 3 fois.

inkscape -f svgfile.svg -W
<read stdin into some variable>
inkscape -f svgfile.svg -H
<read stdin into some variable>
<calculate aspect ratio and apply logic to retain aspect for new size>
inkscape -f svgfile.svg -w <newwidth> -h <newheight> -e file.png

Dans mon cas, j'ai ensuite dû exécuter le fichier généré via ImageMagick pour effectuer des opérations supplémentaires.

Faire tout cela à partir de C # est pour le moins lourd, donc cette question reste ouverte pour une meilleure solution.

4
DJL

Il est étrange qu'ImageMagick effectue un rendu à une taille, puis redimensionne le bitmap. À moins que, c'est-à-dire, le SVG ait une taille spécifique définie dedans. Vérifiez les attributs width et height des fichiers SVG que vous utilisez. Essayez de changer la largeur et la hauteur en 100% et voyez si cela fait une différence.

<svg width="100%" height="100%" ...etc...>

(En supposant que vous ayez le contrôle sur les fichiers SVG que vous utilisez).

0
Paul LeBeau