web-dev-qa-db-ja.com

SVGファイルを複数の異なるサイズのPNGファイルに変換する

私はSVG形式のロゴ画像を持っていますが、複数の異なるサイズのpngファイルを生成する方法があるかどうか疑問に思っています。

たとえば、20の異なる幅と高さを設定すると、20のPNGファイルが生成されます。一度に5枚の画像をやらなくても大丈夫です。

イラストレーターをインストールしましたが、これを行う方法がわかりません。

助けてくれてありがとう！

imagesvgresizepng
26
Mo Beigi

Illustratorについてはわかりませんが、 Inkscapeコマンドラインオプション を使用すると簡単にできます。たとえば、Rubyの使用：

$ Ruby -e '[10,100,200].each { |x| `inkscape --export-png logo#{x}.png -w #{x} logo.svg` }'
14
Luchs

受け入れられた答えは大丈夫です。 オプションに関する公式ヘルプ が利用可能です。また、基本的なシェルコマンドはここでうまく機能します：

for x in 10 100 200 ; do inkscape --export-png logo${x}.png -w ${x} logo.svg ; done

Windowsのコマンドラインで、コメントの@avalanchaからこの行を使用します

for %x in (100 200 300) ; do inkscape --export-png logo%x.png -w %x logo.svg ; done
37
zany

Inkscapeを1回だけ起動して、はるかに高速にする方法（SSDでの5回のエクスポートで3倍）と、イメージを別のディレクトリにエクスポートする方法（Androidが使用する））は次のとおりです。

#!/bin/sh
# Converts the Inkscape icon file ic_launcher_web.svg to the launcher web & app png files.

PROJECT="My Project Name"
INPUT="source-assets/ic_launcher_web.svg"
MAIN="${PROJECT}/src/main/"
RES="${MAIN}res/"
DRAWABLE="${RES}/drawable"

inkscape --Shell <<COMMANDS
  --export-png "${MAIN}ic_launcher-web.png"         -w 512 "${INPUT}"
  --export-png "${DRAWABLE}-mdpi/ic_launcher.png"   -w  48 "${INPUT}"
  --export-png "${DRAWABLE}-hdpi/ic_launcher.png"   -w  72 "${INPUT}"
  --export-png "${DRAWABLE}-xhdpi/ic_launcher.png"  -w  96 "${INPUT}"
  --export-png "${DRAWABLE}-xxhdpi/ic_launcher.png" -w 144 "${INPUT}"
quit
COMMANDS

これはbashシェルスクリプトです。 Windowsでは、MINGW32（GitHubのGitシェルなど）で実行するか、WindowsDOSシェルスクリプトに変換できます。 （DOSスクリプトの場合、「ヒアドキュメント」コマンドをDOSが処理できるものに変更する必要があります。複数行のテキストを一時ファイルにエコーするなどの手法については、 ヒアドキュメントfor Windowsバッチ？ を参照してください。 。）

14
Jerry101

まだインストールしていない場合は、imagemagickをインストールします。 OSXでは、具体的にはrsvgのサポートが必要です。

brew install imagemagick --with-librsvg

また、inkscapeも必要です。そうしないと、画像がすべて黒くなります（透明な領域を除く）。

brew install homebrew/gui/inkscape

次に、次のように変換できるはずです。

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

1536は、適切な回答が見つからない場合の回避策です。私の実験では、-density引数を省略すると、非常に小さい画像が作成されます。 -size 100x100で画像を-density 1024に変換すると、96x96の出力画像が得られるので、代わりに密度をオーバーシュートし、ターゲットサイズにサイズ変更します。

TL; DRは、ターゲットサイズの1500倍の密度を使用し、そこから実行します。

そのコマンドを一括実行する方法はたくさんあります。これがシェルの1つです。

for s in 10 100 200 ; do convert -density 1536 -background none -resize ${s}x${s} input.svg output-${s}.png ; done
2
Ian

inkmake を見てください。私は実際に、SVGファイルをさまざまなサイズのPNGなどにバッチエクスポートするためだけにそのツールを作成しました。 Inkscapeに保存してから、ターミナルでinkmakeを実行するだけで、依存するすべてのPNGファイルがエクスポートされるため、これは設計でした。

2
Mattias Wadman

私はまさにそれを行うためのツールを作成しました。必要な出力サイズとそのフォルダー構造を定義できます。したがって、svgファイルを含むフォルダーで実行するのと同じくらい簡単で、pngファイルがプロジェクトの正しいフォルダーに追加されます。

https://github.com/Inrego/SvgToPng

お役に立てば幸いです。

0
Inrego