SVGをPNGに変換

SVGとPNGの違いと、変換が必要なわけ

SVGはベクター形式で、画像をピクセルではなく図形や曲線で表します。そのため、ロゴやアイコン、イラストに最適で、どんな大きさでもくっきり表示されます。ところが、SNS、メッセージアプリ、ネットショップ、印刷会社、オンラインの申込フォーム、一部のオフィスソフトなど、ふつうの画像しか受け付けないサービスはたくさんあります。そんなときにいちばんよいのがPNGです。ピクセルでできた画像ですが、画質が落ちず、透明部分も残せます。SVGをPNGに変換すれば、ロゴのくっきり感と透明な背景を保ったまま、誰でも開けるファイルになります。

サイズの選び方：1倍・2倍・4倍・幅を指定

SVGの元のサイズは、width属性とheight属性、それがなければviewBoxで決まります。ツールではファイルごとにそのサイズを表示します。1倍ならPNGはちょうどそのサイズ、2倍なら2倍の大きさで、Retinaなどの高解像度ディスプレイに向いています。4倍にすると、印刷や大きなビジュアルにも使える大きさになります。「幅を指定」では、たとえばSNSの投稿用に1080、アイコン用に512のように、必要なピクセル数をそのまま入力でき、高さは絵の縦横比に合わせて決まります。SVGは毎回描き直されるので、とても大きなサイズでもくっきりしたままです。ただし、ブラウザの上限（1辺16,384ピクセル、iPhoneとiPadでは合計1,600万ピクセル）を超えると画像は縮小され、ツールがそれを知らせます。

透明背景、白背景、JPG形式

透明なPNGは、どんな背景の上にも置けます。サイト、動画、プレゼン資料に使うロゴなら、この形式を選びましょう。白い背景は、印刷する書類や、透明部分を黒く表示してしまうサービスで役立ちます。JPGは透明部分を扱えないので、SVGの透明な部分は選んだ背景色（初期設定は白）になります。グラデーションの多いイラストならJPGのほうがファイルが軽くなりますが、文字やべた塗りのまわりに小さなノイズが出ることがあり、PNGならくっきりしたままです。迷ったらPNGを選んでください。

元の見た目と違うときは

SVGは、画像としてブラウザが描きます。安全のため、そのコードがページ内で実行されることはなく、外部のリソースを読み込むこともできません。そのため、2つの違いが出ることがあります。ファイルに含まれていないフォントは、端末のフォントに置き換わります。デザインソフトで文字をアウトライン化（Illustratorなら「アウトラインを作成」）してから、SVGを書き出してください。また、別のファイルやサイトにリンクされた画像は表示されませんが、SVGに埋め込まれた画像は表示されます。HTMLコード（foreignObjectタグ）を含むSVGは、ほとんどのブラウザが画像として書き出せないため変換できません。アニメーション付きのSVGは、最初の状態の静止画になります。