SVG入門 #5 PNG・JPGをSVGに変換する方法 — 画像トレースの手順と向かない画像

PNG・JPGをSVGに変換する仕組み

まずは、PNG・JPGとSVGの作りの違いと、「SVGに変換する」とは何をすることなのかを押さえましょう。

ここを知っておくと、変換した結果が思いどおりかどうかを自分で見分けられるようになります。

拡張子を変えるだけではSVGにならない

PNGやJPGのファイル名の拡張子(「.png」などファイル名の末尾にある種類を表す文字)を「.svg」に書き換えても、SVGにはなりません。

拡張子は「このファイルは何の形式か」を示す名札のようなもので、名札を付け替えても中身のデータは変わらないからです。

PNGやJPGは、色のついた小さな点(ピクセル)を縦横に並べて絵を表すラスターという形式です。

一方のSVGは、「ここからここまで線を引く」「この範囲をこの色で塗る」といった図形の情報を文字で書いたベクターという形式です。

中身の作りがまったく違うので、PNGをSVGにするには、ピクセルの並びから図形を読み取って書き直す作業が必要になります。

画像を入れただけの「見かけのSVG」に注意

変換の方法によっては、元のPNGやJPGをSVGの中にそのまま入れただけのファイルができることがあります。

SVGには、ほかの画像ファイルを中に表示するためのimage要素(画像を表示するためのタグ)があるからです(MDN「<image>」)。

中身をのぞくだけなので、コードの意味を全部理解しなくて大丈夫です。

次のコードは、PNGを中に入れただけのSVGの例です。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <image href="logo.png" width="200" height="200"/>
</svg>

imageの行が、PNGの画像をそのまま表示している部分です。

拡張子は「.svg」でも、表示されているのはPNGのピクセルなので、拡大すれば元のPNGと同じようにぼやけます。

hrefの後ろが「logo.png」のようなファイル名ではなく、data:image/png;base64,から始まる長い英数字になっている場合も、画像のデータをSVGの中に直接書き込んだだけなので同じです。

画像トレースとは、輪郭を読み取って図形に置き換えること

本当の意味でPNG・JPGをSVGに変換するには、「画像トレース」という作業を行います。

画像トレースとは、画像の色の境目(輪郭)をソフトが読み取り、その形をなぞった図形(パス)に置き換えることです。

パスとは、点と点を直線や曲線でつないで形を表す、ベクターの図形のことです。

下の見本は、卵の形のPNGと、それをトレースしたSVGです。

元のPNGは拡大するとピクセルの四角が見えますが、トレースしたSVGは輪郭が1本の線でつながった図形になっているので、どれだけ拡大してもなめらかです。

トレースしたSVGの中身をテキストエディタで開くと、次のようにpathという図形の情報が書かれています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14">
  <path d="M6 1.8 C8.6 1.8 10.2 4.6 10.2 7.6 C10.2 10.6 8.4 12.6 6 12.6 C3.6 12.6 1.8 10.6 1.8 7.6 C1.8 4.6 3.4 1.8 6 1.8 Z" fill="#3A332A"/>
</svg>

dのあとの数字が輪郭の通り道、fillが塗りの色を表していて、この数字や色を変えると形や色が変わります。

ただし、ソフトが「ここが輪郭だろう」と推測して作る図形なので、元の画像とまったく同じにはなりません。

細かい部分が丸まったり、逆に余計な点が増えたりするため、仕上がりの確認と手直しが欠かせません。

画像トレースでSVGに変換する手順

ここからは、代表的なソフトで画像トレースを行う手順を紹介します。

どのソフトでも、「画像を読み込む→トレースする→図形にしてSVGで保存する」という流れは同じです。

Illustratorの画像トレースを使う

Adobe Illustrator(イラレ)には、「画像トレース」という機能が用意されています。

1. 「ファイル → 開く」でPNGやJPGを開くか、作業中のドキュメントに「ファイル → 配置」で画像を配置します。
2. 画像を選択し、「オブジェクト → 画像トレース → 作成」を選びます。
3. 仕上がりを調整したいときは、「ウィンドウ → 画像トレース」で画像トレースパネルを開き、プリセット(色数などの設定をまとめたもの)や色の数などの設定を変えます。
4. 結果に納得したら、「オブジェクト → 画像トレース → 拡張」を選び、トレース結果を編集できるパスに変換します。
5. 不要な背景の図形などを消して、SVGとして保存します。

END

「拡張」をする前のトレース結果は、まだ設定を変えられる途中の状態で、拡張すると、点や線を直接編集できるパスのグループになります(Adobe「画像トレースを使用して画像をベクターに変換する」)。

メニューの位置や項目名はバージョンによって変わることがあるので、見つからないときはお使いのバージョンのヘルプで確認してください。

Inkscapeのビットマップのトレースを使う

Inkscape(インクスケープ)は、Windows・macOS・Linuxで使える無料のベクター描画ソフトで、「ビットマップのトレース」という機能で画像トレースができます。

ビットマップとは、ピクセルの集まりでできた画像(ラスター画像)の別の呼び方です。

1. 「ファイル → インポート」で、PNGやJPGを読み込みます。
2. 読み込んだ画像を選択し、「パス → ビットマップのトレース」(Shift+Alt+B)を選びます。
3. 「単一スキャン」で、検出モードを選びます。
   白黒のロゴなら、明るさで形を切り分ける「明るさの境界」がよく使われます。
   色が複数ある画像は、色ごとに何度か読み取るスキャン(複数回のスキャン)を選びます。
4. 「適用」をクリックすると、元の画像のちょうど上にトレース結果の図形が作られます。
5. トレース結果を少しずらして仕上がりを確認し、元の画像を削除してから、「ファイル → 名前を付けて保存」でSVGとして保存します。

END

トレース結果は元の画像とぴったり重なって作られるので、ずらさないと「何も起きていない」ように見えます。

Inkscapeの手引きでも、明るい背景の上の暗いシルエットのような画像がいちばんうまくいき、完全に元どおりのベクターにはならないと説明されています(Inkscape Beginners’ Guide「Tracing an Image」(英語))。

オンラインの変換ツールを使う場合

「PNG SVG 変換」などで検索すると、画像をアップロードするだけでSVGに変換できるオンラインツールも見つかります。

手軽な反面、画像を運営元のサーバーに送ることになるので、使う前に次の点を確認しましょう。

• 社外秘のロゴや、公開前のデザインなどの機密データはアップロードしないようにしましょう。
• 運営元と利用規約(アップロードした画像の扱い、商用利用の可否など)を確認しましょう。
• 変換したSVGをテキストエディタで開き、pathなどの図形で描かれているか、imageで画像を入れただけになっていないかを確かめましょう。

END

迷ったときは、パソコンの中だけで作業できるInkscapeなどのソフトを使うと安心です。

トレースした後に確認すること

トレースが終わったら、SVGとして使える状態になっているかを確認します。

見た目が元の画像に似ていても、中身に問題が残っていることがあるからです。

• 拡大してみる:
  ソフト上で大きく拡大し、輪郭がなめらかか、細い線や小さな文字がつぶれていないかを見ます。
• 不要な図形を消す:
  白い背景や、画像のノイズから生まれた小さな点のような図形が残っていれば削除します。
• 中身をのぞく:
  保存したSVGをテキストエディタで開き、pathなどの図形でできていることを確かめます。
• ファイルの大きさを見る:
  元のPNGよりずっと大きくなっていたら、図形が細かく分かれすぎています。
  色数を減らしたり、細部を省く設定にしたりして、トレースし直しましょう。

END

トレースに向く画像・向かない画像

画像トレースは、どんな画像でもきれいに変換できるわけではありません。

向いている画像と向かない画像の違いを知っておくと、時間をかけずに良い結果を得られます。

写真がトレースに向かない理由

写真は、画像トレースでSVGにするのに向いていません。

写真はピクセルごとに色が少しずつ違い、はっきりした輪郭や「同じ色の範囲」がほとんどないからです。

トレースすると、色の変化が数色の帯にまとめられて写真らしさが消えるか、色数を増やしたぶんだけ細かな図形が大量にでき、ファイルが元の写真より重くなることもあります。

写真に見立てた画像のほうは空や草地の色が少しずつ変化していますが、トレースした結果のイメージでは、その変化が数色の帯に置き換わっています。

写真は、ピクセルで表すJPGやWebPのままで使うのが基本です(MDN「画像ファイルの種類と形式ガイド」)。

写真をイラスト風に加工する目的でトレースを使うことはありますが、それは写真をそのままSVGにすることとは別の表現だと考えましょう。

きれいにトレースするための元画像の条件

トレースの仕上がりは、元の画像の質でほぼ決まります。

次の条件に近い画像ほど、きれいなSVGになります。

条件	理由	向いている例
色の数が少ない	色の境目が少ないほど、図形の数も少なくすっきり仕上がる	1〜3色のロゴ、アイコン
輪郭がはっきりしている	境目がぼやけていると、ソフトが輪郭の位置を推測しにくい	白地に黒の線画、シルエット
解像度が高い(ピクセル数が多い)	小さな画像は輪郭のピクセルが粗く、曲線がガタガタになりやすい	幅1000px以上の大きめの画像
背景が単色	背景の模様や影まで図形として拾ってしまうのを防げる	白一色や透明の背景
ノイズや圧縮の汚れが少ない	JPGの圧縮でできた細かなにじみが、小さな図形として残ってしまう	劣化の少ないPNG、元データに近い画像

同じロゴでも、小さなJPGより大きなPNGを使うだけで仕上がりが大きく変わります。

元の画像を作った人やデザイン会社にSVGやAIなどの元データが残っていないか、まず確認するのも大切です。

実践のポイント

PNG・JPGをSVGに変換するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 拡張子を「.svg」に変えただけで、SVGになったと思い込んでしまう。
  中身はPNGやJPGのままなので、ブラウザで表示できなかったり、拡大するとぼやけたりします。
• 変換したファイルが、画像を入れただけの「見かけのSVG」になっているのに気づかない。
  テキストエディタで開き、imageだけでできていないかを確認しましょう。
• 小さくて粗い画像をそのままトレースしてしまう。
  できるだけ大きく、輪郭のはっきりした画像を用意してからトレースします。
• トレース結果を確認せずにそのまま使ってしまう。
  細い線のつぶれや、ノイズから生まれた小さな図形が残っていないか、拡大して確かめましょう。
• 自分で作っていないロゴやイラストを、トレースして使ってしまう。
  形式を変えても著作権や利用条件はそのまま残るので、使ってよい画像かどうかを先に確認しましょう。

END

よくある質問

• Q. 写真をSVGに変換することはできる?
  A. 画像トレースでSVGを作ること自体はできますが、写真の細かな色の変化はそのままでは再現できません。
  写真をWebで使うなら、JPGやWebPのまま使うのが基本です。
• Q. 手書きのイラストをSVGにしたい
  A. 白い紙に濃いペンではっきり描き、明るい場所でスキャンや撮影をすると、トレースしやすくなります。
  線だけのイラストなら、白黒でトレースしてから色を付けるときれいに仕上がります。
• Q. トレースしたSVGが元のPNGより重くなったのはなぜ?
  A. 色数や細かさの設定が高すぎて、図形が大量にできている可能性があります。
  色数を減らす、細部を省く設定にするなどしてトレースし直してみてください。

END

まとめ

PNG・JPGはピクセルの集まり、SVGは図形の情報なので、拡張子を変えたり画像を中に入れたりするだけではSVGになりません。

本当の意味でSVGに変換するには、画像トレースで輪郭を読み取って図形に置き換える必要があり、色が少なく輪郭のはっきりした大きな画像ほどきれいに仕上がります。

まずは手元のロゴやアイコンを1つ選び、Inkscapeのビットマップのトレースで変換して、拡大したときの輪郭を元の画像と見比べてみてください。

次の回では、作ったSVGをWebページに表示する方法として、imgタグ・HTMLに直接書く方法・CSSの背景の使い分けを扱います。