無料 SVG ビューアー

SVGについて

SVG(スケーラブルベクターグラフィックス)は、ベクターグラフィックス用のXML形式です。ラスター形式(PNG、JPG)とは異なり、SVG画像は品質を失うことなく任意のサイズに完全に適応します。軽量で、アクセシブルで、最新のブラウザで広くサポートされています。

よくある質問

SVGとは?

SVG(スケーラブルベクターグラフィックス)は、ピクセルではなく数学的な曲線とパスを使用する2Dグラフィックス形式です。これにより、SVGファイルは解像度に依存しません, 小さなアイコンから巨大な看板まで、あらゆるサイズで鮮明に保たれます。

SVGとPNGの違いは?

PNGはラスター(ピクセルベース)で固定サイズです, 拡大するとぼやけます。SVGはベクター(数学ベース)で、損失なく無限に拡大できます。SVGはロゴ、アイコン、イラストに最適です。PNGは写真や複雑な画像に適しています。

SVGコードを直接編集できますか?

はい、SVGはXMLテキストなので、任意のテキストエディターで編集できます。属性を変更することで、色、サイズ、位置などを変更できます。このビューアを使ってコードを貼り付けて、変更を瞬時に確認できます。

SVGはフォーマット戦争に二度勝利した

SVGが存在する以前、2つの競合するベクター形式が1998年初めにW3Cに提出された。PGML（Precision Graphics Markup Language）はAdobe・IBM・Netscape・Sunが1998年4月10日に提出し、AdobeのPostScriptイメージングモデルに基づいていた。VML（Vector Markup Language）はMicrosoft・Macromedia・Hewlett-Packard・Autodesk・Visioが1998年5月13日に提出し、MicrosoftがOffice 2000とInternet Explorer 5にすでに搭載していた構文に近かった。W3Cは勝者を選ばなかった。代わりに、Chris LilleyをチェアとするSVGワーキンググループを設立し、両方を置き換える単一の標準を設計した。SVGの最初の公開ワーキングドラフトは1999年2月11日に公開された。

SVG 1.0は2001年9月4日にW3C勧告として公開された。エディターはJon Ferraiolo（Adobe）で、Adobe・IBM・Sun・Apple・Canon・Corel・Kodak・Macromedia・Microsoft・Netscape・Oracle・Sharp・Quark・Xeroxからの寄稿者を含み、W3C仕様の中でも最も幅広いベンダー連合の一つだった。SVG 1.1は2003年1月14日に続き、現代のウェブの事実上のベースラインとなっている。その第2版（2011年8月16日）は正誤表を統合した。SVG 1.1は仕様をモジュールに分割し、3つのプロファイル（Full・Basic・Tiny）を定義した。VMLはIE 5〜9に搭載され続けMicrosoft Officeで内部使用されていたが、ネイティブSVGを優先してIE 9（2011年3月）で非推奨となり、IE 11で事実上廃止された。SVG 2は2016年からW3Cワーキングドラフトの状態にあり、勧告の見通しはない。ブラウザーは相互運用性の需要に応じて機能を少しずつ実装している。

SVGが本質的に異なる点

• ただのXMLだ。アイコン全体が1行で書ける：<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>。SVGはテキストなので、差分を取ってバージョン管理できる（Gitはソースコードと同様に扱う）。サーバーサイドで生成でき、検索エンジンにインデックスできる（<text>内のテキストはクロール可能）。効率よく圧縮できる（gzipとbrotliは繰り返しのXMLトークンを好み、一般的に60〜80%削減）。特別なソフトウェアなしでどんなテキストエディターでも編集できる。
• 解像度非依存。SVGのパスはピクセルグリッドではなく数学的な曲線と座標で定義されているため、どのズームレベルやデバイスのピクセル密度でも同一にレンダリングされる。管理すべき「@2x」や「@3x」のRetinaアセットがない。2 KBの単一アイコンが16×16のファビコンから400×400のヒーローイラストまで品質劣化ゼロでスケールする。
• 線画に対する小さなファイルサイズ。一般的な24×24単色アイコンはSVGで約200〜500バイトなのに対して、透明PNGでは1〜3 KBだ。フラットな企業ロゴはSVGで1〜5 KBに対してPNGで15〜50 KBだ。1,000個のシンボルを含むアイコンセットは単一のSVGスプライトで約50 KBに対して、マルチDPIのPNGスプライトでは2〜5 MBだ。
• HTMLにインラインで記述でき、CSSでスタイリング可能。SVGをインラインにすると、すべての要素がDOMの一部になる。CSSで操作できる：.icon-stroke { stroke: currentColor; stroke-width: 2; }。単一のプロパティcurrentColorが現代のアイコンシステムを機能させるポイントで、アイコンは周囲のテキストの色を自動的に継承する。
• 3通りの方法でアニメーション可能。CSSアニメーション/トランジション（現在推奨の方法）、SVG内のSMIL宣言型XML（<animate>・<animateTransform>・<animateMotion>）、またはSVG DOMを通じたJavaScript。SMILはChromeが2015年の非推奨化計画を撤回した後、Chrome・Firefox・Safariで今もなお動作する。
• プログラムで操作可能。document.querySelector('#chart-bar-3').setAttribute('height', newValue)。これがD3.js・Vega・Plotly・Highcharts・ApexChartsなどデータ可視化エコシステムの基盤だ。
• デフォルトでアクセシブル。<title>はホバー時のツールチップとして表示される。<desc>はスクリーンリーダーに公開される。ARIA属性（role="img"・aria-label・aria-labelledby・aria-describedby）は通常どおり機能する。支援技術にとってブラックボックスである<canvas>要素と比べて、SVGは完全にアクセシブルだ。

ブラウザーサポートは2011年以来普遍的だ

ネイティブSVGはFirefox 1.5（2005年11月）・Opera 9（2006年6月）・Safari 3.0（2007年6月）・Chrome 1.0（2008年9月）、そして最終的にInternet Explorer 9（2011年3月）で登場した。これが転換点だった。IE 9以前は、IE 6〜8をサポートするためにVML変換シムやAdobe SVG Viewerプラグインが必要だった。iOS Safariは発売当初から部分的なSVGをサポートし、iOS 5（2011年10月）から完全サポートとなった。AndroidはHoneycomb 3.0（2011年2月）で対応し、ChromeWebViewがAndroid 4.4（2013年）頃にAOSPブラウザーを置き換えた。画像としてのSVG（<img src="x.svg">）の実用的な下限は2011年末頃だ。2026年には、現実的なウェブプロジェクトで完全なSVGサポートのないブラウザーを考慮する必要はない。

SVGは単なる画像形式ではなく、実行可能なドキュメントタイプだ

SVGセキュリティについて理解すべき最も重要なことはこれだ。悪意のあるSVGには<script>ブロック、イベントハンドラー（onload・onclick・onmouseover）、または<a xlink:href="javascript:...">リンクが含まれる可能性がある。そのようなSVGが<object>・<iframe>経由、.svg URLへのブラウザーナビゲーション、またはinnerHTML挿入などのアクティブなコンテキストでロードされると、ブラウザーはスクリプトを実行する。アップロードされたSVGをこのように埋め込むことを許可するサイトは、アップローダーによってXSSを受ける可能性がある。

<img>タグが安全な方法だ。SVGが<img src="x.svg">またはbackground-imageとして読み込まれると、ブラウザーはスクリプト無効・外部フェッチなしのサンドボックスモードでSVGを実行する。内部のスクリプトは実行されず、外部フェッチはブロックされ、SVGは親ページと相互作用できない。SVG内のCSSはレンダリングされるが、副作用をもたらす可能性があるものはすべて無効化される。これが現在推奨されるSVGの使い方だ。

サーバーサイドの防御として、OWASPはアップロードされたSVGをDOMPurify（DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})）・svg-sanitizer（PHP）・sanitize-svg（Node）・Bleach（Python）でサニタイズし、<script>・<foreignObject>・すべてのon*ハンドラーを除去し、xlink:hrefの値がjavascript:またはdata:で始まるものを拒否することを推奨する。ユーザーSVGを表示するページに厳格なContent-Security-Policyを設定し、ダウンロードしたSVGにContent-Disposition: attachmentを付けて配信することが二重の安全策だ。このビューアーは純粋にクライアントサイドで、SVGはデバイスから出ないが、公開サイトにユーザー提供のSVGを埋め込む場合はサニタイズすること。

SVG・PNG・JPG・WebP・AVIF：いつどれを使うか

• ロゴ・アイコン・イラスト・図表・グラフ・テキスト入りインフォグラフィック：SVG。あらゆるサイズにスケール、小さなファイル、CSSで色変更可能、テキストはテキストのまま（選択・翻訳・インデックス可能）。
• 写真：JPG（または最新スタック向けにAVIF/WebP）。写真のベクターエンコードは非常に大きくなる。
• スクリーンショット：PNG（またはWebP）。ロスレスラスターはピクセル完全なUIを保存する。
• アニメーションUIステッカー：SVG（CSSまたはSMIL）。短いループではGIFより小さく鮮明で、動画より滑らかだ。

WebP（Google、2010年）とAVIF（AOMedia、2019年）はSVGではなくPNGやJPGと競合する現代のラスター形式で、ベクターではない。SVGが失敗するケースは写真や連続調画像で、すべてのピクセルをベクタープリミティブとして表現するとJPEGをはるかに超えるファイルサイズになる。アイコンとロゴのケースではSVGが依然として群を抜いている。

SVGOによるSVGの最適化

Adobe Illustrator・Sketch・Figma・Inkscapeからエクスポートされた典型的なSVGには大きなオーバーヘッドがある。エディター固有のメタデータ（<sodipodi:namedview>・<inkscape:groupmode>）、デフォルトのレイヤー名とグループ階層、パス座標の過剰な精度（d="M 12.000023 18.999991 ..."）、CSSクラスにできるインラインスタイル属性、エディターを識別するコメントブロックなどだ。

SVGO（SVG Optimizer）は2012年にKir Belevichが開発し、業界標準ツールとなった。個別の最適化を処理する約50のプラグインを持つNode.jsのコマンドラインツールで、プラグインにはremoveComments・removeMetadata・removeEditorsNSData・convertColors（rgb(255,0,0)を#f00に変換）・convertPathData（パスコマンドの折りたたみと余分な精度の削除）・mergePaths・cleanupNumericValues（設定可能な精度への丸め、デフォルトは小数3桁）がある。一般的な圧縮率は設計ツール製のSVGで30〜70%の小型化で、Inkscapeエクスポートではヘビーなエディターメタデータのために80%に達することもある。SVGOMG（svgomg.net）はJake Archibald（Google）によるSVGOのWebフロントエンドで、最も広く使われているGUIバージョンだ。

アイコンライブラリーの全景

SVGアイコンライブラリーが現代のウェブスタックを席巻している。よく見かける主要なセットはHeroicons（Tailwind Labs、約280個、MIT）・Lucide（Featherのフォーク、約1,400個）・Bootstrap Icons（約2,000個）・Material Symbols（Google、複数のウェイトで約3,000個）・Font Awesome 6（約30,000個無料+Pro）・Phosphor Icons（6つのウェイトで約9,000個）・Tabler Icons（約5,200個）だ。アグリゲーターのIconifyは150以上のアイコンセットから20万以上のオープンソースアイコンを単一のAPIで提供する。開発者は<iconify-icon icon="mdi:home"></iconify-icon>と書くだけで、フレームワークがそのアイコンのSVGをオンデマンドで取得する。アイコンフォント（Font Awesome 4/Glyphicons時代）からSVGアイコンへの移行は2017〜2019年頃に起き、アクセシビリティ・色変更の容易さ・FOUT（アイコンフォントが未読み込みの状態でのテキストのフラッシュ）の排除によって推進された。

さらなる質問

viewBoxとwidth/heightの違いは何か？

viewBox="0 0 100 100"はSVGの内部ユーザー座標系を定義する。「自然な」キャンバスはレンダリングされたピクセルサイズに関わらず100×100単位だ。widthとheightはレンダリングされる表示サイズを設定する。両方が存在する場合、SVGはviewBoxをレンダリングボックスに合わせてスケールする。preserveAspectRatio（デフォルト：xMidYMid meet）はスケーリングがアスペクト比のミスマッチをどのように処理するかを制御する：meetは比率を保持してセンタリング、noneはストレッチ、sliceはクロップして埋める。viewBoxのみを設定してCSSにwidthとheightを制御させることが、アイコンシステムの現代的なベストプラクティスだ。

SVGアイコンが画面でぼやけて見えるのはなぜか？

ほとんどの場合、3つの原因のうちの1つだ：（1）SVGがviewBoxのアスペクト比と一致しない固定ピクセルサイズにレンダリングされているため、ブラウザーがストレッチしている。（2）SVGがサブピクセル座標（「M 12.5 7.5 L ...」）でデザインツールからエクスポートされており、ブラウザーのアンチエイリアシングが非整数のエッジを処理している。（3）preserveAspectRatio="none"が設定されており、SVGが任意にストレッチできる状態だ。レンダリングコンテナーがviewBoxの比率と一致していることを確認し、デザインツールのエクスポートオプションで座標を整数にスナップし、意図的なストレッチ以外ではpreserveAspectRatio="none"を避けることで修正できる。

SVGをファビコンとして使えるか？

はい。<link rel="icon" type="image/svg+xml" href="icon.svg">はChrome 80以降、Firefox 41以降、Safari 14以降でサポートされている。一般的なパターンは最新ブラウザー向けにSVGファビコンを1つ用意し、古いクライアント向けにICOフォールバック（<link rel="icon" sizes="any" href="favicon.ico">）も配置することだ。SVGファビコンはSVG内のprefers-color-schemeメディアクエリーを使って、ライトテーマとダークテーマのバリアントを自動的に切り替えることもできる。

パスのd属性は本当にミニ言語か？

はい。ダース程度のコマンドを覚えることがSVGを手読みすることに最も近い。コマンドは：M/m（移動：絶対/相対）、L/l（直線）、H/h（水平線）、V/v（垂直線）、C/c（2つの制御点を持つ3次ベジェ曲線）、S/s（前の制御点を反映するスムーズ3次）、Q/q（2次ベジェ曲線）、T/t（スムーズ2次）、A/a（楕円弧、最も複雑）、Z/z（パスを閉じる）。典型的なアイコンのd（例：M5 12h14M12 5l7 7-7 7）は「(5,12)に移動、14単位の水平線、(12,5)に移動、右7下7の直線、左7下7の直線」、つまり右向き矢印だ。

関連ツール