SVG ファイルとは:画像ではないこと、そしてそれが変換で重要な理由
SVG に解像度がない理由、ラスター化の前に何を設定すべきか、PNG を SVG に戻せない理由を解説。SVG はブラウザ内で変換でき、アップロード不要です。
概要
- 種類
- 画像
- 圧縮
- ロスレス(可逆)
- 拡張子
- .svg
- MIME タイプ
- image/svg+xml
- 別名
- Scalable Vector Graphics
SVG は画像ファイルではなく文書です。図形、パス、塗り、テキストを記述した XML で、ピクセルは 1 つも含まれていません。ブラウザは SVG を表示するとき、レイアウトが求めるサイズでその命令を実行します。だからこそ、同じ数 KB のファイルがスマートフォンでも看板でもくっきり表示されるのです。ロゴやアイコンがこの形式で配布されるのは、ひとえにこの性質のためです。
続きを読む
PNG に変換するとは、サイズを決めてその命令を一度だけ実行することです。その瞬間から、結果は拡大するとぼやける普通のラスター画像になるので、選ぶサイズこそが変換のすべてです。その画像が表示される最大のサイズを選び、余裕を持たせてください。PNG の縮小はきれいにできますが、拡大はそうはいきません。
逆方向の変換は、実質的には存在しません。命令からピクセルにする過程で命令は捨てられ、それを取り戻すにはトレースが必要です。これはビットマップの中の図形をアルゴリズムが推測し、見えているものに近いパスを作る処理です。まったく別の種類のツールであり、その出力が元のファイルになることはありません。
結果で確認すべき点が 2 つあります。1 つはフォントです。書体を名前で参照している SVG は、そのフォントがインストールされていることが前提なので、テキストが代わりのフォントで描画されることがあります。文字の見た目が大事なら、先に編集ソフトでテキストをパスに変換してください。もう 1 つは透明度です。SVG は背景が描かれていない限り背景を持たないので、PNG はアートワークのない部分が透明になります。たいていはそれで望みどおりですが、白いページの上では見えなくなることもあります。
SVG を他の形式に変換
SVG:よくある質問
変換するときはどのサイズを選べばよいですか?
その画像が表示される最大のサイズにし、余裕を持たせてください。PNG はきれいに縮小できますが、拡大はできません。最大幅は詳細オプションで設定します。
なぜテキストが違うフォントで描画されるのですか?
SVG が書体を名前で参照していて、そのフォントが使えなかったため、代わりのフォントが使われたからです。変換する前に、ベクター編集ソフトでテキストをパスに変換してください。
PNG や JPG を SVG に戻せますか?
意味のある形では戻せません。ラスター化で命令は捨てられ、それを取り戻すにはトレース、つまりビットマップの中の図形を推測する処理が必要です。結果は元のファイルの復元ではなく、画像の近似になります。
PNG の背景は透明になりますか?
はい、アートワークのない部分はすべて透明になります。SVG は背景が描かれていない限り背景を持たないからです。単色の背景が必要なら、先に SVG に長方形を追加してください。
そもそもなぜ SVG をラスター化する必要があるのですか?
SVG を受け付けないソフトがたくさんあるからです。Office 文書、古い編集ソフト、多くのアップロードフォーム、ラスター画像しか受け付けないプラットフォームなどです。
SVG は非可逆ですか?ロスレスですか?
どちらにも当てはまりません。SVG が保存しているのはサンプルではなく命令なので、圧縮で削るものがありません。この問いが意味を持つのは、ラスター化してからです。
SVG ファイルは開いても安全ですか?
SVG はスクリプトを含められる文書なので、信頼できない SVG は写真というより HTML ファイルに近いものです。ここで変換すると、隔離された環境で描画してただのラスター画像を作るので、危険を取り除く方法の 1 つになります。
変換するとファイルがアップロードされますか?
されません。SVG はページの中でお使いのブラウザが描画し、PNG へのエンコードもそこで行います。ファイルはどこにも送信されません。