web-dev-qa-db-ja.com

SVGをPNGに変換およびサイズ変更

SVGをPNG（または任意のラスター形式）に変換し、同時にサイズを変更しようとしています。

このタスクにはImageMagickを使用すると思いましたが、サイズ変更前にラスターに変換しているようです。

その結果、画像の品質が低下します。

  • ラスターに変換する前にImageMagickでSVGのサイズを変更する方法はありますか？

  • または、SVGをサイズ変更した後にプログラムでラスターに変換するために使用できる他のツールはありますか？

  • または、これに使用できる他のツールはありますか？

現在、私はコマンドラインを介してImageMagickを使用しています：

convert file.svg -resize 100x100 file.png

ソースイメージの「サイズ」は不明であり、実行時まで宛先サイズは不明です。

svgimagemagickpngimage-resizing
31
DJL

これが私のやり方で、うまくいくようです。

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

各パーツの機能は次のとおりです。

  • -background noneを使用して、SVGの透明部分が透明のままで、白で塗りつぶされないようにします。
  • ImageMagickはラスターイメージでのみ機能するため、-density 1000を使用して、SVGのサイズを変更する幅を指定する必要があります。この方法で実際にresizeコマンドを呼び出すと、ロードされたSVGのラスター表現の幅はすでに1000になります。それ以外の場合は、SVG画像の元のサイズからラスターを上下にサイズ変更してしまいます。
  • ここで-resize 1000xを使用してSVGに新しい幅を与えます。高さはアスペクト比を維持するために自動的に計算されます。

これの1つの落とし穴は、高さに基づいて-densityが幅に適用されるため、高さに基づいてサイズを変更し、幅を計算する方法がわからないことです。したがって、SVGの実際の比率を事前に把握し、それに応じて幅を操作する必要があります。

34
Tony Bogdanov

SVGは、ビットマップではなくベクトルとして定義されます-これはIMが扱うのが好きなものです。 IMがベクトルを読み込むとき、サイズがわからないので、これを行うと次のようになります。

convert compass.svg -resize 1000x1000 compassB.jpg

デフォルトサイズのビットマップキャンバスを作成し、 "draws"ベクトルをその上に配置し、サイズを変更してJPEGとして保存します。結果、意図したサイズがキャンバスよりも大きい場合、IM "推測"の品質は低くなります-結果として得られなくなった情報を作成できません小さすぎるキャンバスに画像をラスタライズする方法。

enter image description here

解決策はIMにp-front大きなキャンバスにベクターを描画する必要があることを伝えることですbeforeラスタライズします：

convert -size 1000x1000 compass.svg compassA.jpg

enter image description here

33
Mark Setchell

私は svgexport を作成しました：

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

したがって、inkscapeにはコマンドラインインターフェイスがあることがわかります。

残念ながら-wおよび-h inkscapeの引数は、アスペクト比を保持しません。ただし、現在の幅と高さをクエリする方法は提供しますが、一度に1つだけです。

したがって、解決策は、inkscapeを3回以上実行することです。

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

私のインスタンスでは、追加の操作を実行するために、生成されたファイルをImageMagickで実行する必要がありました。

これらすべてをC＃から行うのは控えめに言っても煩わしいので、この問題はより良い解決策として未解決のままです。

4
DJL

ImageMagickが1つのサイズでレンダリングしてからビットマップを再スケーリングするのは奇妙です。つまり、SVGには特定のサイズが定義されている場合を除きます。使用しているSVGファイルのwidthおよびheight属性を確認してください。幅と高さを100%に変更して、違いがあるかどうかを確認してください。

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

（使用しているSVGファイルを制御できると仮定します）。

0
Paul LeBeau