SVGからPNGに変えると何が起こるか
SVGは図形、曲線、文字、色を座標によって記述します。PNGは、決められた数の色付きピクセルを格子状に保存します。そのため変換時には出力サイズが必要です。同じベクター画像でも、ウェブ用の小さな見本なら幅400ピクセル、スライド用なら幅2400ピクセルといった形で描き出せます。SVGファイルを選ぶか、コードを貼り付けてください。ブラウザーは内容を読み取り、可能であればviewBoxから縦横比を取得し、指定した大きさの描画面を作ります。画像を変換用の外部サーバーへ送信することはありません。
viewBoxが400×200なら、縦横比は二対一です。幅を1200ピクセルに設定して高さを空欄にすると、高さは600ピクセルになります。両方を入力すれば意図的に画像を引き伸ばせますが、ロゴでは通常、元の比率を保つほうが自然です。出力ピクセルを増やすとベクターの輪郭を細かく表現できます。一方でPNGのファイル容量は一般に増加します。
背景と鮮明さを確認する
先に出力幅を決め、背景を透明、白、または指定色から選びます。透明な背景は、異なる色の上に置くアイコンに便利です。白い背景は、透明部分を黒く表示するアプリケーションでの予期しない見え方を防げます。指定色はプレゼンテーションのデザインに合わせられます。プレビューの市松模様は、色のない部分を見分けるためのものです。保存する前に、実際に使う表示サイズで輪郭を確認してください。
たとえばviewBoxが400×200のロゴを幅1200ピクセルで書き出すと、1200×600のPNGになります。幅を600ピクセルにすれば600×300です。構図は同じですが、通常は前者のほうが容量が大きくなります。最初に400×200のPNGを作ってから拡大しても、元のSVGに残っていた滑らかな曲線の鮮明さは取り戻せません。
制限とよくある間違い
高解像度で書き出しても、SVGの中に埋め込まれた低解像度の写真は鮮明になりません。その写真はすでにピクセル画像だからです。また、変換する端末に指定フォントがないと、文字の形や位置が変わることがあります。重要なロゴなら、事前に文字をパスへ変換する方法を検討してください。細い線、小さいラベル、半透明の影などは、元画像とプレビューを比べると差に気付きやすくなります。ブラウザーと最終的な利用先では、SVGの一部の効果を異なる方法で描画する場合もあります。
このツールは描画前に、実行可能な内容と外部リソースを含むSVGを拒否します。リンク先の画像、ネットワーク上のフォント、スクリプトに依存するファイルは、静的で自己完結したSVGにしてから試してください。画面サイズと総ピクセル数の上限は、ブラウザーのメモリを保護します。PNGは透明部分と画像データを損失なく保持しますが、写真に対して常に最小容量の形式とは限りません。