Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
SVG Widely available

SVG

SVG（Scalable Vector Graphics）はXMLベースのベクター画像形式で、どの解像度でも鮮明に表示されます。インラインSVGとしてHTMLに直接埋め込むことで、CSSやJavaScriptによるスタイリングやアニメーションが可能です。アイコン、ロゴ、データ可視化など幅広い用途で使用されています。

ベクターグラフィックス画像形式

概要

SVG（Scalable Vector Graphics）はXMLベースのベクター画像形式で、どの解像度でも鮮明に表示されます。インラインSVGとしてHTMLに直接埋め込むことで、CSSやJavaScriptによるスタイリングやアニメーションが可能です。アイコン、ロゴ、データ可視化など幅広い用途で使用されています。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 79+
Safari 3+
Firefox 3+

モバイル

Chrome Android 18+
Safari iOS 2+
Firefox Android 4+

基本構文

HTML 
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"
    fill="#3498db" stroke="#2c3e50" />
</svg>

実務での使いどころ

  • スケーラブルなアイコン

    Retinaディスプレイを含むすべての画面解像度で鮮明に表示されるアイコンやロゴを作成します。

注意点

  • 複雑なSVGはファイルサイズが大きくなりパフォーマンスに影響するため、不要なパスやメタデータを最適化ツールで削除してください。

アクセシビリティ

  • SVG要素に role="img" と適切な <title> 要素を追加し、スクリーンリーダーが内容を読み上げられるようにしてください。

参考リンク