概要
SVG は 2001 年に初めて公開された W3C 標準です。ピクセルではなく描画命令を記録するため、どの画面でもシャープに表示したいロゴ、アイコン、イラストに最適です。
SVG には CSS、アニメーション、さらにはスクリプトも含められます。この柔軟性はリスクにもなり、信頼できない SVG をページに直接埋め込むとコードが実行される可能性があります。JFIF.IO は SVG を隔離された画像要素で描画するため、スクリプトは実行されず、外部リソースも読み込まれません。
メリット
- +解像度に依存せず、どのサイズでもシャープ
- +シンプルな図ならファイルがとても小さい
- +テキストとして編集でき、CSS でスタイル設定できる
- +テキストがアクセシブルで検索可能なまま
デメリット
- −写真には不向き
- −複雑な図は描画が遅くなることがある
- −スクリプトを含められるため、信頼できない SVG には注意が必要
- −ラスター画像しか受け付けないプラットフォームもある
SVG の圧縮の仕組み
SVG はプレーンテキストで、それ自体は圧縮されていません。SVGO などの最適化ツールで冗長なデータを削除でき、.svgz ファイルは SVG を gzip 圧縮したものです。
主な用途
- ロゴやブランドマーク
- アイコンや UI イラスト
- グラフや図
ブラウザとソフトウェアの対応状況
すべてのブラウザが SVG を表示できます。変換時は出力の幅または DPI を選んでください。ベクター図形がそのサイズで描画し直されるため、シャープなままです。
SVG の変換方法
このページ上部の変換ツールを使います。ファイルをドロップし、出力形式を選んで結果をダウンロードするだけです。変換はブラウザ内で行われるため、何もアップロードされません。
変換先
- JPG は透過に対応していません。透明部分は背景色で塗りつぶされます。
ブラウザ内でローカルに処理
SVG に関するよくある質問
ここでの SVG から PNG への変換はどのように行われますか？
ブラウザが選んだサイズで SVG を描画し、その結果を PNG、JPG などのラスター形式で保存します。SVG 内のスクリプトは一切実行されません。
PNG や JPG を SVG に変換できますか？
単純な変換では意味のある結果になりません。ピクセルをベクターにするにはトレースという別の処理が必要です。ピクセルを SVG ファイルで包んだだけの見せかけの「SVG」は提供していません。