SVGをPNGに変換する方法
このツールはブラウザのCanvas APIを使い、SVGファイルをPNG画像に変換します。外部ライブラリもサーバーも不要でブラウザの標準機能のみを使用するため、高速かつ安全です。SVGファイルを選択するとプレビューと元のサイズが表示され、倍率を選ぶと出力サイズが事前に確認できます。SVG自体に背景がなければ、変換されたPNGも透明背景になります。
SVGはベクター形式のため、倍率を上げても品質が劣化しません。Webアイコンには1〜2倍、印刷物には3〜4倍、大型ポスターやバナーには6〜8倍をお勧めします。ただし倍率が高すぎるとCanvasのメモリ使用量が増えてブラウザが重くなる場合があります。必要なサイズに合った倍率を選んでください。
外部Webフォント(Google Fontsなど)や外部URL画像を参照する複雑なSVGは、ブラウザのCORSセキュリティポリシーにより該当要素が表示されない場合があります。最も安定した結果のためには、Base64エンコード画像とインラインスタイルを使った自己完結型SVGを使用するか、テキストをパス(アウトライン化)に変換してからご利用ください。
よくある質問
width/height属性がない場合、ブラウザのデフォルト値で処理され、意図した出力サイズと異なる場合があります。SVGファイルにviewBoxと合わせて明示的なwidth/heightを追加しておくと、より正確に変換できます。
はい。SVGに背景色がなければ変換されたPNGも透明背景で保存されます。プレビューで市松模様が表示されている部分が透明領域です。背景色が必要な場合はSVGにfill属性付きのfull-sizeのrect要素を追加してください。
SVGに外部Webフォント(Google Fontsなど)が使われている場合、CORSポリシーにより変換時に代替フォントで表示されることがあります。フォントをSVGに直接埋め込むか、テキストをパス(アウトライン化)に変換することで解決できます。