web-dev-qa-db-fra.com

Comment convertir un fichier SVG en fichier PNG avec Image Magick?

J'ai un fichier SVG qui a une taille définie de 16x16. Lorsque j'utilise le programme de conversion d'Image Magick pour le convertir en PNG, je reçois un fichier PNG de 16 x 16 pixels, ce qui est beaucoup trop petit:

convert test.svg test.png

Je dois spécifier la taille en pixels de la sortie PNG. Le paramètre -size semble être ignoré, le paramètre -scale met à l'échelle le PNG après il a été converti au format PNG. Le meilleur résultat obtenu jusqu’à présent en utilisant le paramètre -density:

convert -density 1200 test.svg test.png

Mais je ne suis pas satisfait parce que je veux spécifier la taille de sortie en pixels sans faire de calcul pour calculer la valeur de densité. Donc, je veux faire quelque chose comme ça:

convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

Alors, quel est le paramètre magique que je dois utiliser ici? 

svgimagemagickpng
301
kayahr

Dans ce cas, ImageMagick n’a pas donné de bons résultats, mais Inkscape fait un bon travail sous Linux et Windows:

inkscape -z -e test.png -w 1024 -h 1024 test.svg

Voici le résultat de la mise à l'échelle d'un fichier SVG 16x16 en un fichier PNG 200x200 à l'aide de cette commande:

enter image description here

enter image description here

À titre de référence, ma version d'Inkscape (sur Ubuntu 12.04) est la suivante:

Inkscape 0.48.3.1 r9886 (Mar 29 2012)

et sur Windows 7, c'est:

Inkscape 0.48.4 r9939 (Dec 17 2012)
399
808sound

Essayez svgexport :

svgexport input.svg output.png 64x
svgexport input.svg output.png 1024:1024

svgexport est un outil de ligne de commande multiplate-forme simple que j'ai créé pour exporter des fichiers svg au format jpg et png. Voir ici pour plus d'options. Pour installer svgexport install npm , puis exécutez:

npm install svgexport -g

Edit: Si vous rencontrez un problème avec la bibliothèque, veuillez soumettez-le sur GitHub, merci!

107
Ali Shakiba

Ce n'est pas parfait mais ça fait le travail.

convert -density 1200 -resize 200x200 source.svg target.png

Fondamentalement, le DPI augmente suffisamment (utilisez une supposition éclairée/sûre) pour que le redimensionnement soit effectué avec une qualité adéquate. J'essayais de trouver une solution appropriée à ce problème mais, après un certain temps, j'ai décidé que c'était suffisant pour mon besoin actuel.

Note: Utilisez 200x200! forcer la résolution donnée

87
Hardev

Si vous utilisez MacOS X et que vous rencontrez des problèmes avec la conversion d’Imagemagick, essayez de le réinstaller avec RSVG lib .

brew remove imagemagick
brew install imagemagick --with-librsvg

Vérifiez que la délégation est correcte:

$ convert -version
Version: ImageMagick 6.8.9-8 Q16 x86_64 2014-12-17 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2014 ImageMagick Studio LLC
Features: DPC Modules
Delegates: bzlib cairo fontconfig freetype jng jpeg lcms ltdl lzma png rsvg tiff xml zlib

Il devrait afficher rsvg.

50
Jose Alban

Inkscape ne semble pas fonctionner lorsque les unités svg ne sont pas px (cm, par exemple). J'ai une image vierge. On pourrait peut-être régler le problème en tournant le dpi, mais c'était trop compliqué.

Svgexport est un programme node.js et n'est donc généralement pas utile.

Le converti d'Imagemagick fonctionne bien avec:

 ~$ convert -background none -size 1024x1024 infile.svg outfile.png

Si vous utilisez -resize, l'image est floue et le fichier beaucoup plus volumineux.

MEILLEUR

~$ rsvg  -w 1024 -h 1024 infile.svg  outfile.png

C'est le plus rapide, il a le moins de dépendances et le résultat est environ 30% plus petit que convert. Installez librsvg2-bin pour l'obtenir. Il ne semble pas y avoir de page de manuel, mais vous pouvez taper:

~$ rsvg --help

obtenir de l'aide. Simple c'est bien.

26
september_converter

Après avoir suivi les étapes de réponse de Jose Alban , j'ai pu faire fonctionner ImageMagick sans problème en utilisant la commande suivante: 

convert -density 1536 -background none -resize 100x100 input.svg output-100.png

Le nombre 1536 provient d'une estimation approximative de la densité, voir cette réponse pour plus d'informations.

15
Ian

Afin de redimensionner l'image, l'option -density doit être utilisée. Pour autant que je sache, la densité standard est de 72 et correspond à la taille 1: 1. Si vous voulez que le png de sortie soit deux fois plus gros que le svg original, définissez la densité sur 72 * 2 = 144:

convert -density 144 source.svg target.png
11
Stanislav Schmidt

pourquoi ne pas essayer en ligne de commande inkscape, voici mon fichier bat pour convertir tous les svg de ce répertoire en png:

POUR %% x IN (* .svg) DO C:\Ink\App\Inkscape\inkscape.exe %% x -z --export-dpi = 500 --export-area-drawing --export-png = "% % ~ nx.png " 

6
ampecs

Je suis venu à ce poste - mais je voulais juste faire la conversion par lot et rapidement sans l'utilisation de paramètres (en raison de plusieurs fichiers de tailles différentes). 

rsvg drawing.svg drawing.png

Pour moi, les exigences étaient probablement un peu plus faciles que pour l'auteur original. (Voulait utiliser des SVG dans MS PowerPoint, mais cela ne le permet pas)

3
Qohelet

Une chose qui m'a tout simplement mordue a été de régler le -density APRES le nom du fichier d'entrée. Ça n'a pas marché. Le déplacer vers la première option de convert (avant toute autre chose) le faisait fonctionner (pour moi, YMMV, etc.).

2
Nick

J'ai résolu ce problème en modifiant les attributs width et height de la balise <svg> afin qu'ils correspondent à la taille de sortie souhaitée, puis en les convertissant à l'aide de ImageMagick. Fonctionne comme un charme.

Voici mon code Python, une fonction qui renverra le contenu du fichier JPG:

import gzip, re, os
from ynlib.files import ReadFromFile, WriteToFile
from ynlib.system import Execute
from xml.dom.minidom import parse, parseString


def SVGToJPGInMemory(svgPath, newWidth, backgroundColor):

    tempPath = os.path.join(self.rootFolder, 'data')
    fileNameRoot = 'temp_' + str(image.getID())

    if svgPath.lower().endswith('svgz'):
        svg = gzip.open(svgPath, 'rb').read()
    else:
        svg = ReadFromFile(svgPath)

    xmldoc = parseString(svg)

    width = float(xmldoc.getElementsByTagName("svg")[0].attributes['width'].value.split('px')[0])
    height = float(xmldoc.getElementsByTagName("svg")[0].attributes['height'].value.split('px')[0])

    newHeight = int(newWidth / width * height) 

    xmldoc.getElementsByTagName("svg")[0].attributes['width'].value = '%spx' % newWidth
    xmldoc.getElementsByTagName("svg")[0].attributes['height'].value = '%spx' % newHeight

    WriteToFile(os.path.join(tempPath, fileNameRoot + '.svg'), xmldoc.toxml())
    Execute('convert -background "%s" %s %s' % (backgroundColor, os.path.join(tempPath, fileNameRoot + '.svg'), os.path.join(tempPath, fileNameRoot + '.jpg')))

    jpg = open(os.path.join(tempPath, fileNameRoot + '.jpg'), 'rb').read()

    os.remove(os.path.join(tempPath, fileNameRoot + '.jpg'))
    os.remove(os.path.join(tempPath, fileNameRoot + '.svg'))

    return jpg
1
Yanone

Dans ImageMagick, on obtient un meilleur rendu SVG si on utilise Inkscape ou RSVG avec ImageMagick que son propre rendu interne MSVG/XML. RSVG est un délégué qui doit être installé avec ImageMagick. Si Inkscape est installé sur le système, ImageMagick l'utilisera automatiquement. J'utilise Inkscape dans ImageMagick ci-dessous.

Il n'y a pas de paramètre "magique" qui fera ce que vous voulez.

Mais, on peut calculer très simplement la densité exacte nécessaire pour rendre la sortie.

Voici un petit bouton 50x50 lorsqu'il est rendu à la densité par défaut de 96:

convert button.svg button1.png


enter image description here

Supposons que nous voulions que la sortie soit 500. L'entrée est 50 avec une densité par défaut de 96 (les anciennes versions d'Inkscape pourraient utiliser 92). Ainsi, vous pouvez calculer la densité nécessaire proportionnellement aux rapports entre les dimensions et les densités.

512/50 = X/96
X = 96*512/50 = 983



convert -density 983 button.svg button2.png


enter image description here

Dans ImageMagick 7, vous pouvez effectuer le calcul en ligne comme suit:

magick -density "%[fx:96*512/50]" button.svg button3.png

or

in_size=50
in_density=96
out_size=512

magick -density "%[fx:$in_density*$out_size/$in_size]" button.svg button3.png
1
fmw42

Pour la conversion SVG en PNG simple, j'ai trouvé que cairosvg ( https://cairosvg.org/ ) fonctionnait mieux que ImageMagick. Procédure d'installation et d'exécution sur tous les fichiers SVG de votre répertoire.

pip3 install cairosvg

Ouvrez un shell python dans le répertoire qui contient vos fichiers .svg et exécutez:

import os

for file in os.listdir('.'):
    name = file.split('.svg')[0]
    cairosvg.svg2png(url=name+'.svg',write_to=name+'.png')

Cela vous permettra également de ne pas écraser vos fichiers .svg d'origine, mais de conserver le même nom. Vous pouvez ensuite déplacer tous vos fichiers .png vers un autre répertoire avec:

$ mv *.png [new directory]
0
edank

Sans librsvg, vous pouvez obtenir une image en png/jpeg noire. Nous devons installer librsvg sur le fichier convert svg avec imagemagick.

Ubuntu

 Sudo apt-get install imagemagick librsvg
 convert -density 1200 test.svg test.png

MacOS

 brew install imagemagick librsvg
 convert -density 1200 test.svg test.png
0
TLbiz

La meilleure réponse de @ 808sound n'a pas fonctionné pour moi. Je voulais redimensionner  Kenney.nl UI Pack

et obtenu  Kenney UI Pack messed up

Au lieu de cela, j'ai ouvert Inkscape, puis File, Export as PNG file et une boîte d'interface graphique est apparue qui m'a permis de définir les dimensions exactes dont j'avais besoin.

Version sur Ubuntu 16.04 Linux: Inkscape 0.91 (September 2016)

(Cette image provient de Les packs d'actifs de Kenney.nl à propos)

0
James L.