ImageMagickでSVGをPNGに変換する方法は?


388

16x16のサイズが定義されたSVGファイルがあります。ImageMagickの変換プログラムを使用してPNGに変換すると、16x16ピクセルのPNGが得られます。

convert test.svg test.png

出力PNGのピクセルサイズを指定する必要があります。-sizeパラメータは無視されているようです。PNGに変換された-scaleパラメータはPNGをスケーリングします。これまでの最高の結果は、パラメーターを使用することで得られました。-density

convert -density 1200 test.svg test.png

しかし、密度の値を計算する計算を行わずに出力サイズをピクセル単位で指定したいので、満足していません。だから私はこのようなことをしたいです:

convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

では、ここで使用しなければならない魔法のパラメーターは何ですか?


6
たとえば-size 1024x1024、正常に動作していますが、imagemagickのバージョンは何ですか?
Dejan Marjanovic


2
ImageMagick-6.9.0-Q16。convert -resize 1024x1024 foo.svg foo.pngは正常に動作します。
Jichao

11
@Jichao -resizeは変換された画像を引き伸ばすだけで、結果として品質が低下します。
Elist

5
convert -size 1024x1024 test.svg test.pngImageMagick 7.0.7-0 Q16(WindowsのChocolateyリポジトリの現在のバージョン)で正常に動作します。-size入力ファイル名の前に表示されることを確認してください。そうしないと、16x16の画像が拡大されてぼやけた結果になります。
Futal

回答:


502

この例ではImageMagickから良い結果を得ることができませんでしたが、InkscapeはLinuxとWindowsでうまく機能します。

inkscape -z -w 1024 -h 1024 input.svg -e output.png

編集(2020年5月):Inkscape 1.0ユーザー。コマンドライン引数が変更されていることに注意してください。

inkscape -w 1024 -h 1024 input.svg --export-filename output.png

このコマンドを使用して16x16 SVGを200x200 PNGにスケーリングした結果は次のとおりです。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

参考までに、私のInkscapeバージョン(Ubuntu 12.04)は次のとおりです。

Inkscape 0.48.3.1 r9886 (Mar 29 2012)

Windows 7では次のとおりです。

Inkscape 0.48.4 r9939 (Dec 17 2012)

15
imagemagickに関する限り+1。SVGエンジンに問題があるようです。ほとんどの場合、私はそれで正確な結果を得ることができませんでした。Inkscape、OTOHは完全に正常に動作します。
グルタニメート2013年

13
Inkscapeは、Linuxに次いでOSSの最も印象的な1つの例だと思います。先端をありがとう!
kim3er 2013

8
OSXでもうまく動作します。
Jonas Granvik 2013

12
OSXで、Inkscapeで、X11用のインストールには、使用して私の仕事:/Applications/Inkscape.app/Contents/Resources/bin/inkscape -z -e test.png -w 1024 -h 1024 test.svg
chmulligを

11
@RördImageMagickで背景を透明に保つには、-background noneコマンドラインオプションを使用します。
John

142

svgexportを試してください:

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

svgexportは、svgファイルをjpgおよびpngにエクスポートするために作成したシンプルなクロスプラットフォームのコマンドラインツールです。その他のオプションについては、こちらを参照してください。svgexport install npmをインストールするには、次を実行します。

npm install svgexport -g

編集:ライブラリに問題を見つけた場合は、GitHubで提出してください、ありがとう!


4
svgexportは私にとってはうまくいきました。出力は、ImageMagickよりもブラウザのレンダリングに非常によく一致します。
t9mike 2015年

5
svgexportの品質は本当に高いです。今では、お気に入りのツールになっています。:)
アレッシオ・ペリローゾ2015年

1
これも私にとってはうまくいきました。GUIツールで手動で実行する場合と比較して、リアルタイムセーバー。MacでSVGをうまく処理できるGUIアプリを安価な範囲で見つけるのはかなり難しい
Erik Engheim

4
素晴らしい作品ですが、巨大な画像を生成します。optipngを使用して、テキストのロゴを3 MBから最大20 kBに圧縮できました。
miek

2
evgexportは、サイズに応じて巨大なpngファイルを作成します。エクスポートにもPhantomJSを使用しますが、はるかに小さい画像を作成するsvg2pngをお勧めします。
Aaron_H 2017

112

これは完璧ではありませんが、うまくいきます。

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

基本的には、十分な品質でサイズ変更が行われるように、十分に高いDPI(教育を受けた/安全な推測を使用)を増やします。私はこれに対する適切な解決策を見つけようとしていましたが、しばらくして、これは私の現在のニーズには十分であると判断しました。

注: 200x200を使用してください!与えられた解像度を強制する


4
私の場合、不透明度と影が失われました。
jiyinyiyong 2014年

2
私は複雑なsvgを持っていないので、これは私にとってうまくいきました。-resize 200%動作しなかったため、ピクセル単位でサイズを指定する必要がありました。
jozxyqk 14年

18
@jiyinyiyong ImageMagickで背景を透明に保つには、-background noneコマンドラインオプションを使用します。画像の比率を維持するために-resize 200、幅や-resize x200高さなど、1つの寸法のみを指定することもできます。完全なImageMagickジオメトリオプションについては、imagemagick.org / script / command-line-processing.php#geometryを参照してください。
John

私にとってもうまくいきません。結果はすべてぼやけています。
mbonnin 2015

(これはLinuxに適用され、Windowsに適用される場合があります)IMで-verboseをオンにすると、IM自体がインクスケープを使用して中間epsファイルを作成するように見えます。したがって、@ 808soundによって提案されているように、inkscapeを直接使用することをお勧めします

55

MacOS Xを使用していて、Imagemagickの変換に問題がある場合は、RSVG libで再インストールしてみてください。HomeBrewの使用:

brew remove imagemagick
brew install imagemagick --with-librsvg

正しく委任されていることを確認します。

$ 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

表示されるはずrsvgです。


私のために働いていませんでした。具体的には実行convert ic_comment_48px.svg -size 30x30 ic_comment_30px.pngし、出力画像は48 x 48です。説明したとおり、imagemagickがrsvgに委任されていることを確認しました。
シェーンクレイトン-ヤン

1
私にとっては完全に機能しました-デフォルトでconvertはsvgがpngに変換されましたが、結果は絶望的でした。再インストール後、それらは完璧です。また、変換が大幅に速くなります。
ssc

1
これはMac OSXで動作しました。新しい変換は早く見つかりませんが、はるかに正確です。すべてのMac OSXユーザーがこれを試してみることを強くお勧めします。
HelloWorld 2017年

1
これは受け入れられる答えになるはずです。ありがとう、魅力のように働いた、そして私は他の方法でこれらのステップを踏むことを知らなかったであろう
sdailey

8
モハベで私は得るinvalid option: --with-librsvg
zaitsman

39

Inkscapeは、svgユニットが機能していないと機能しないようです px(cmなど)。空白の画像が表示されました。たぶん、dpiをいじるだけで直せるかもしれませんが面倒でした。

Svgexportはnode.jsプログラムなので、一般的には役に立ちません。

Imagemagickの変換は次のように動作します:

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

使用する場合 -resizeと、画像がぼやけ、ファイルがはるかに大きくなります。

ベスト

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

これは最も高速で、依存関係が最も少なく、出力は変換よりも約30%小さくなります。librsvg2-binをインストールして取得します。manページは表示されませんが、次のように入力できます。

~$ rsvg --help

支援を得るために。シンプルがいい。


2
これは簡単に最良の答えです(20の異なる答えが同じimagemagick応答を返す理由はわかりません)。色と影を保持し、何も壊さない。ただし、imagemagickのサイズ変更動作と一致させるには(特に、WxHは、画像をそのサイズのボックスに収まるように拡大縮小し、アスペクト比を維持することを意味し-aます)、パラメーターをrsvgで使用する必要があります。
Mahmoud Al-Qudsi 2017年

1
これは私のイメージ、あらゆる種類の奇妙なアーティファクトを壊しました。inkscapeはより良い仕事をしました。
エレガントなサイコロ

1
、注意してbrew install rsvgGDK、OpenSSLの、パイソンなど- OSX上で百万物事インストール
Timmmm

4
参考までに、現在のインストールコマンドはbrew install librsvgで、変換コマンドはrsvg-convertです。
騒々しい

librsvg(またはrsvg-convertArchの場合)は、複雑なsvgをpngに変換するときに最良かつ最も一貫した結果を与えることがわかりました。フォローアップしoptipngて、出力ファイルのサイズを小さくしてください。
maktel

18

Jose Albanの回答の手順を実行した後、次のコマンドを使用してImageMagickを正常に動作させることができました。

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

数値1536は密度の大まかな見積もりから来ています。詳細については、この回答を参照してください。


15

画像を再スケーリングするには、オプション-densityを使用する必要があります。私の知る限り、標準密度は72で、サイズを1:1でマッピングします。出力pngを元のsvgの2倍にする場合は、密度を72 * 2 = 144に設定します。

convert -density 144 source.svg target.png

変換オプションは入力ファイルの前にある必要があること注意してください。すなわちconvert source.svg -density 144 target.png、画像を再スケーリングしません。
Skippy le Grand Gourou 2015

実際には標準密度は90のようです。したがって、それはconvert -density 180 source.svg target.png
adius

7

inkscapeコマンドラインを試してみませんか。これは、このディレクトリ内のすべてのsvgをpngに変換するための私のbatファイルです。

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


4

私はこの投稿に来ました-(サイズの異なるいくつかのファイルのため)パラメータを使用せずにバッチですばやく変換したいだけでした。

rsvg drawing.svg drawing.png

私にとって、要件はおそらく元の作者よりも少し簡単でした。(MS PowerPointでSVGを使用したいが、許可されていない)


1
参考までに、これはmacOSでインストールされbrew install librsvg、変換コマンドはrsvg-convertです。
騒々しい2018年

Ubutniではrsvg-convertでもあり、パッケージはlibrsvg2-binであり、出力には-o drawing.pngが必要です
teknopaul

4

ImageMagickでは、InkscapeまたはRSVGをImageMagickで使用すると、レンダリングされた独自の内部MSVG / XMLよりも優れたSVGレンダリングが得られます。RSVGは、ImageMagickと共にインストールする必要があるデリゲートです。Inkscapeがシステムにインストールされている場合、ImageMagickはそれを自動的に使用します。以下のImageMagickでInkscapeを使用しています。

あなたが望むことをする「魔法の」パラメータはありません。

しかし、出力をレンダリングするために必要な正確な密度を非常に簡単に計算できます。

デフォルトの密度96でレンダリングした場合の小さな50x50ボタンは次のとおりです。

convert button.svg button1.png


ここに画像の説明を入力してください

出力を500にしたいとします。入力は、デフォルト密度96で50です(古いバージョンのInkscapeでは92を使用している場合があります)。したがって、寸法と密度の比率に比例して必要な密度を計算できます。

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


convert -density 983 button.svg button2.png


ここに画像の説明を入力してください

ImageMagick 7では、次のようにインラインで計算を実行できます。

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

magick DSLの方程式は非常に役に立ちました。
cyrf

2

ちょうど私を噛んだ1つのことは-density、入力ファイル名の後にAF を設定することでした。それはうまくいきませんでした。それを変換の最初のオプションに移動すると(何よりも前に)、それが機能しました(私にとっては、YMMVなど)。


2

単純なSVGからPNGへの変換では、cairosvg(https://cairosvg.org/)がImageMagickよりもパフォーマンスが良いことがわかりました。ディレクトリ内のすべてのSVGファイルをインストールして実行する手順。

pip3 install cairosvg

.svgファイルを含むディレクトリでPythonシェルを開き、次のコマンドを実行します。

import os

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

これにより、元の.svgファイルが上書きされなくなり、同じ名前が維持されます。次に、すべての.pngファイルを別のディレクトリに移動できます。

$ mv *.png [new directory]

カイロファイル"C:\プログラムファイル(x86の)\ python35-32 \ libに\のsite-packages \ cairocffi_としてインポートcairocffi:窓10の上に私のため墜落したinit_の.py"、39行、<モジュール>カイロ=のdlopen(FFIで'カイロ'、 'カイロ-2'、 'カイロ-GObjectの-2'、 'cairo.so.2')ファイル「C:\プログラムファイル(x86の)\ python35-32 \ libに\のsite-packages \ cairocffi_ init_ .py "、36行目、dlopenでOSError(" dlopen()failed to load a library:%s "% '/' .join(names))OSError:dlopen()failed to a library:cairo / cairo- 2 / cairo-gobject-2 / cairo.so.2
Pete Lomax

ニースは、cairosvgUbuntuの-19.04に私のために仕事をしてくれました。
fhgd

2

librsvgがないと、黒いpng / jpeg画像が表示される場合があります。imagemagickでsvgファイルにインストールするlibrsvg必要がありconvertます。

Ubuntu

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

マックOS

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

このライブラリをインストールしておらず、黒い画像も表示されません。
アーロンフランケ

1

タグのwidthおよびheight属性を<svg>目的の出力サイズに一致するように変更し、ImageMagickを使用して変換することで、この問題を解決しました。魅力のように機能します。

これが私のPythonコードです。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

2
コンピューターで生成された画像をjpeg :(?として返すのはなぜですか?
Willi Mentzel '13

1

@ 808soundのトップアンサーはうまくいきませんでした。サイズを変更したかった Kenney.nl UIパック

そして得た ケニーUIパックがめちゃくちゃ

だからではなく、私はその後に行って、Inkscapeのを開けFileExport as PNG file私は私が必要な正確な寸法を設定することが許可されているとGUIボックスがポップアップ。

バージョンUbuntu 16.04 LinuxInkscape 0.91 (September 2016)

ちなみに、この画像はKenney.nlのアセットパックのものです)


1

brewを使用するmacOSでは、librsvgを直接使用するとうまく機能します

brew install librsvg
rsvg-convert test.svg -o test.png

多くのオプションが利用可能です rsvg-convert --help


0

Inkscape 1.0を搭載したLinuxでは、svgからpngに変換するために使用する必要があります

inkscape -w 1024 -h 1024 input.svg --export-file output.png

ない

inkscape -w 1024 -h 1024 input.svg --export-filename output.png
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.