it-swarm.com.de

Wie konvertiere ich ein SVG mit Image Magick in ein PNG?

Ich habe eine SVG-Datei, die eine definierte Größe von 16x16 hat. Wenn ich das Konvertierungsprogramm von Image Magick verwende, um es in ein PNG-Format zu konvertieren, erhalte ich ein 16 x 16-Pixel-PNG-Bild, das viel zu klein ist:

convert test.svg test.png

Ich muss die Pixelgröße der Ausgabe-PNG angeben. -size Parameter scheint ignoriert zu werden, -scale Parameter skaliert das PNG nachdem es wurde in PNG konvertiert. Das beste Ergebnis, das ich bisher mit dem -density-Parameter erhalten habe:

convert -density 1200 test.svg test.png

Aber ich bin nicht zufrieden, weil ich die Ausgabegröße in Pixeln angeben möchte, ohne die Dichte berechnen zu müssen. Also möchte ich so etwas machen:

convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

Was ist also der magische Parameter, den ich hier verwenden muss? 

301
kayahr

In diesem Fall konnte ich mit ImageMagick keine guten Ergebnisse erzielen, aber Inkscape macht unter Linux und Windows einen guten Job:

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

Hier ist das Ergebnis der Skalierung eines 16x16-SVG auf 200x200 PNG mit diesem Befehl:

enter image description here

enter image description here

Zur Information ist meine Inkscape-Version (auf Ubuntu 12.04):

Inkscape 0.48.3.1 r9886 (Mar 29 2012)

und unter Windows 7 ist es:

Inkscape 0.48.4 r9939 (Dec 17 2012)
399
808sound

Versuchen Sie svgexport :

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

svgexport ist ein einfaches plattformübergreifendes Befehlszeilentool, das ich für den Export von svg-Dateien in jpg und png erstellt habe. Weitere Informationen hierzu finden Sie unter here Um svgexport install npm zu installieren, führen Sie Folgendes aus:

npm install svgexport -g

Edit: Wenn Sie ein Problem mit der Bibliothek finden, bitte reichen Sie es ein auf GitHub, danke!

107
Ali Shakiba

Das ist nicht perfekt, aber es macht den Job.

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

Grundsätzlich erhöht es den DPI-Wert so hoch (verwenden Sie nur eine fundierte/sichere Annahme), dass die Größenanpassung in angemessener Qualität erfolgt. Ich habe versucht, eine passende Lösung für dieses Problem zu finden, entschied mich aber nach einiger Zeit für meine derzeitigen Bedürfnisse.

Hinweis: Verwenden Sie 200x200! die gegebene Auflösung erzwingen

87
Hardev

Wenn Sie mit MacOS X arbeiten und Probleme mit der Konvertierung von Imagemagick haben, versuchen Sie es möglicherweise mit RSVG lib ..__ erneut zu installieren.

brew remove imagemagick
brew install imagemagick --with-librsvg

Stellen Sie sicher, dass das Delegieren korrekt ist:

$ 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

Es sollte rsvg anzeigen.

50
Jose Alban

Inkscape scheint nicht zu funktionieren, wenn svg-Einheiten nicht px sind (z. B. cm). Ich habe ein leeres Bild bekommen. Möglicherweise könnte dies durch Verdrehen der dpi korrigiert werden, aber es war zu lästig.

Svgexport ist ein node.js-Programm und daher im Allgemeinen nicht nützlich.

Imagemagicks Konvertierung funktioniert gut mit:

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

Wenn Sie -resize verwenden, ist das Bild unscharf und die Datei ist viel größer.

BESTE

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

Es ist am schnellsten, weist die wenigsten Abhängigkeiten auf und die Ausgabe ist etwa 30% kleiner als die Konvertierung. Installieren Sie librsvg2-bin, um es zu erhalten. Es scheint keine Manpage zu sein, aber Sie können Folgendes eingeben:

~$ rsvg --help

um Hilfe zu bekommen. Einfach ist gut.

26

Nachdem ich die Schritte in Jose Albans Antwort ausgeführt habe, konnte ich ImageMagick mit dem folgenden Befehl gut funktionieren lassen: 

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

Die Zahl 1536 stammt aus einer Kugelschätzung der Dichte, siehe diese Antwort für weitere Informationen.

15
Ian

Um das Bild neu zu skalieren, sollte die Option -density verwendet werden. Soweit ich weiß, beträgt die Standarddichte 72 und Karten die Größe 1: 1. Wenn Sie möchten, dass die Ausgabe png doppelt so groß ist wie das ursprüngliche SVG, setzen Sie die Dichte auf 72 * 2 = 144:

convert -density 144 source.svg target.png
11

warum versuchst du es nicht, die Kommandozeile inkscape auszuprobieren? Dies ist meine bat-Datei, um alle svg-Dateien in diesem Verzeichnis in png zu konvertieren:

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

6
ampecs

Ich bin zu diesem Beitrag gekommen - aber ich wollte die Konvertierung nur stapelweise und ohne Verwendung von Parametern durchführen (aufgrund mehrerer Dateien mit unterschiedlichen Größen). 

rsvg drawing.svg drawing.png

Für mich waren die Anforderungen wahrscheinlich etwas einfacher als für den ursprünglichen Autor. (Wollte SVGs in MS PowerPoint verwenden, dies ist jedoch nicht zulässig)

3
Qohelet

Eine Sache, die mich gerade beißt, war das Einstellen des -density NACH dem Namen der Eingabedatei. Das hat nicht funktioniert. Durch die Umstellung auf die erste Option in convert (vor allem anderen) hat es funktioniert (für mich YMMV usw.).

2
Nick

Ich habe dieses Problem gelöst, indem ich die width- und height-Attribute des <svg>-Tags an meine beabsichtigte Ausgabegröße angepasst und diese dann mit ImageMagick konvertiert habe. Klappt wunderbar.

Hier ist mein Python-Code, eine Funktion, die den Inhalt der JPG-Datei zurückgibt:

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

In ImageMagick erhalten Sie ein besseres SVG-Rendering, wenn Sie Inkscape oder RSVG mit ImageMagick verwenden, als das eigene gerenderte MSVG/XML. RSVG ist ein Delegat, der mit ImageMagick installiert werden muss. Wenn Inkscape auf dem System installiert ist, wird es von ImageMagick automatisch verwendet. Ich benutze Inkscape in ImageMagick unten.

Es gibt keinen "magischen" Parameter, der das tut, was Sie wollen.

Man kann jedoch sehr einfach die genaue Dichte berechnen, die zum Rendern der Ausgabe erforderlich ist.

Hier ist eine kleine 50x50-Schaltfläche, wenn sie mit der Standarddichte von 96 dargestellt wird:

convert button.svg button1.png


enter image description here

Angenommen, die Ausgabe soll 500 sein. Die Eingabe ist 50 bei einer Standarddichte von 96 (ältere Versionen von Inkscape verwenden möglicherweise 92). So können Sie die benötigte Dichte proportional zu den Verhältnissen der Dimensionen und Dichten berechnen.

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


convert -density 983 button.svg button2.png


enter image description here

In ImageMagick 7 können Sie die Berechnung wie folgt inline ausführen:

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

Für die einfache Konvertierung von SVG in PNG habe ich festgestellt, dass cairosvg ( https://cairosvg.org/ ) besser als ImageMagick ist. Schritte zum Installieren und Ausführen aller SVG-Dateien in Ihrem Verzeichnis.

pip3 install cairosvg

Öffnen Sie eine Python-Shell in dem Verzeichnis, das Ihre SVG-Dateien enthält, und führen Sie Folgendes aus:

import os

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

Dadurch wird auch sichergestellt, dass Sie Ihre ursprünglichen SVG-Dateien nicht überschreiben, sondern denselben Namen beibehalten. Sie können dann alle Ihre .png-Dateien in ein anderes Verzeichnis verschieben:

$ mv *.png [new directory]
0
edank

Ohne Librsvg erhalten Sie möglicherweise ein schwarzes PNG/JPEG-Bild. Wir müssen librsvg bis convert svg-Datei mit imagemagick installieren.

Ubuntu

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

Mac OS

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

0
TLbiz

Die oberste Antwort von @ 808sound hat bei mir nicht funktioniert. Ich wollte die Größe ändern  Kenney.nl UI Pack

und bekam  Kenney UI Pack messed up

Stattdessen öffnete ich Inkscape, ging dann zu File, Export as PNG file und eine GUI-Box öffnete sich, mit der ich die genauen Maße einstellen konnte, die ich brauchte.

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

(Dieses Bild stammt von Kenney.nls Asset Packs übrigens)

0
James L.