SVGとは？スケーラブルベクターグラフィックスのガイド

SVGとは？

SVGはW3Cが開発し2001年に導入されたXMLベースのベクター画像フォーマットです。画像をピクセルのグリッドとして保存するラスターフォーマット（JPEG、PNG、GIF）と異なり、SVGは図形、パス、テキスト、グラデーションの数学的記述として画像を保存します。つまり、品質低下やファイルサイズの増加なしに、小さなアイコンから看板まで任意のサイズに拡大縮小できます。

SVGファイルは本質的にXMLマークアップを含むテキストファイルであり、任意のテキストエディタで編集でき、検索エンジンで検索可能で、gzipで効果的に圧縮できます。SVGはCSSによるスタイリング、JavaScriptによるインタラクティビティ、SMILやCSSアニメーションによるアニメーションをサポートします。TurnPicはビットマップデータをSVGコンテナ内に埋め込むことでラスター画像をSVGに変換し、SVGの構造とスケーラビリティを提供しながら元のピクセルデータを保存します。

SVGのメリット・デメリット

SVGはベクターグラフィックスに独自の利点を提供しますが、写真コンテンツには制限があります。

ブラウザの互換性

SVGは優れたブラウザサポートを持ち、Chrome、Firefox、Safari、Edge、Operaのすべてのモダンブラウザが長年SVGをサポートしています。SVGはHTML内にインライン表示、画像ソースとして参照、またはスタンドアロンファイルとして読み込みが可能です。モバイルブラウザサポートも包括的です。主な互換性の考慮事項は、非常に古いブラウザ（IE 8以前）がSVGをサポートしないことですが、2026年ではほとんど問題になりません。

SVGを使うべき場面

SVGは品質低下なしにスケーリングが必要なあらゆるグラフィックに最適なフォーマットです。複数のサイズで表示されるロゴ、アイコン、図、チャート、イラストに推奨されるフォーマットです。写真や色の多い複雑な画像には適していいません。代わりにJPEG、PNG、WebP、AVIFを使用してください。

SVGが優れている一般的なシナリオ：

• あらゆるサイズでシャープに見える必要があるロゴやブランドグラフィック
• レスポンシブウェブサイトやアプリのアイコンとUI要素
• 図、チャート、技術イラスト
• CSSスタイリングやJavaScriptインタラクティビティが必要なグラフィック

画像をSVGに変換する方法

TurnPicを使ったSVG変換では、ラスター画像をSVGコンテナ内に埋め込みます。SVG変換ページからJPEG、PNG、GIF、BMP、WebP、AVIF、ICOファイルをアップロードします。1回のアップロードで最大30枚のバッチ変換に対応し、各ファイル10MBまで対応します。

変換により、元のビットマップ画像をbase64データとしてSVG XML構造内にエンコードしたSVGファイルが作成されます。これによりSVGファイル形式と構造を提供しながら視覚コンテンツを保存します。結果のSVGは任意のSVG互換アプリケーションで開けます。処理完了後、各SVGファイルを個別にまたはZIPアーカイブとしてダウンロードできます。