SVGファイルとは？開く・作成・編集・変換の完全ガイド

SVGはXMLで図形を記述するベクター画像です。ピクセルではなくパス、塗り、線を保存するため、ロゴやアイコンを拡大しても鮮明です。このガイドではSVGの基本と、確認、編集、変換、安全な公開までの流れを説明します。

SVGの基本

SVGはScalable Vector Graphicsの略で、W3CのオープンなWeb標準です。PNGがピクセルを保存するのに対し、SVGは描画命令を保存します。viewBoxは内部座標、widthとheightは既定の表示サイズを指定します。

SVGには<svg>、<path>、<rect>、テキスト、グラデーション、アクセシビリティ用のメタデータなどを含められます。

使いどころ

ロゴ、UIアイコン、チャート、地図、線画、CSSで色を変更する図形に向いています。写真や質感のある画像はPNGやJPGの方が適しています。複雑な自動トレースではSVGの方が大きくなる場合もあります。

SVGを開く方法

Chrome、Firefox、Safari、Edgeにドラッグすればすぐ表示できます。パスやviewBoxを詳しく確認するなら SVG Viewer を使います。編集にはInkscape、Illustrator、Figmaなど、コード確認にはテキストエディターが便利です。

SVGを作成する方法

ベクターアプリで描くか、デザインデータから書き出すか、簡単な図形を手書きできます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
  <title id="title">Blue circle and orange square</title>
  <circle cx="35" cy="40" r="24" fill="#2563eb" />
  <rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>

viewBoxで拡大縮小に耐える座標系を作り、意味のある画像にはtitleを付けます。

編集と変換

ノードや曲線はベクターアプリで編集し、色やviewBoxだけならXMLを直接変更できます。保存後は SVG Editor で編集結果を確認し、SVG Sanitizer でスクリプトや不要な外部参照を除去します。

PNGは透明な固定画像に SVG to PNG。
JPGは透明度不要のプレビューに SVG to JPG。
PDFは共有や印刷に SVG to PDF。
Data URIはCSSやHTMLへの内埋めに SVG to Data URI。

公開前チェック

ブラウザと SVG Viewer で表示を確認し、viewBox、裁剪、コントラストを調べます。不可信なファイルはサニタイズし、編集後に SVG Optimizer で圧縮して再確認します。元の編集ファイルも保管してください。

よくある質問

SVGはPNGより優れていますか？

ロゴやアイコンの拡大縮小にはSVG、写真や固定ピクセルにはPNGが適しています。

デザインソフトなしで開けますか？

はい。ブラウザや SVG Viewer で表示できます。

PNGをSVGにできますか？

トレースでパスに変換できますが近似です。単純な画像ほど良い結果になります。

SVGが空白になるのはなぜですか？

誤ったviewBox、裁剪、白い背景、非対応フィルター、壊れたXMLを確認してください。

SVGは安全ですか？

アップロードされたSVGは不可信なXMLとして扱い、表示前に SVG Sanitizer を使います。

SVGViewの流れ

SVG Viewer で確認し、SVG Editor で編集、SVG Sanitizer で清掃、SVG Optimizer で軽量化します。必要な場合だけ目的の形式へ変換してください。

SVGファイルとは？開く・作成・編集・変換の完全ガイド