SVGA

SVGA

ファイル名拡張子	.svg、.svgz
インターネットメディアの種類	image/svg+xml[1] [2]
統一型識別子 (UTI)	public.svg-image
開発者	ウィキペディア
初回リリース	2001年9月4日（23年前） ( 2001-09-04 )
最新リリース	1.1 (第2版) 2011年8月16日; 13年前 ( 2011-08-16 )
フォーマットの種類	ベクターグラフィック
延長	テキスト
標準	W3C の
オープンフォーマット?	はい
Webサイト	SVG は、

スケーラブル ベクター グラフィックス( SVG ) は、2 次元グラフィックスを定義するためのXMLベースのベクター画像形式であり、インタラクティブ性とアニメーションをサポートしています。SVG 仕様は、 1999 年からWorld Wide Web Consortiumによって開発されたオープン スタンダードです。

SVG 画像はベクター グラフィック形式で定義され、XML テキスト ファイルに保存されます。したがって、SVG 画像は品質を損なうことなくサイズを拡大縮小でき、SVG ファイルを検索、インデックス作成、スクリプト化、圧縮できます。XML テキスト ファイルは、テキスト エディターまたはベクター グラフィック エディターで作成および編集でき、ほとんどのWeb ブラウザーでレンダリングできます。画像に使用すると、SVG はスクリプトまたは CSS をホストできるため、クロスサイト スクリプティング攻撃やその他のセキュリティの脆弱性につながる可能性があります。

SVGは、1998年に6つの競合するベクターグラフィックス言語の提案がコンソーシアムに提出された後、1999年からワールドワイドウェブコンソーシアム（W3C）内で開発が進められてきました（下記参照）。^[3]

初期のSVGワーキンググループは、商用の提案を一切開発せず、それらの提案を参考にしながらも実際にはそれらに基づいていない新しいマークアップ言語を作成することを決定しました。 ^[3]

SVG は、1998 年に 6 つの競合するベクター グラフィックスの提案が寄せられた後、 W3C SVG ワーキング グループによって開発されました。

• CCLRCのWeb回路図^[4]
• PGML、Adobe Systems、IBM、Netscape、Sun Microsystemsの^[5]
• VML （オートデスク、ヒューレット・パッカード、マクロメディア、マイクロソフト、ビジョンによる^[6]）
• ハイパーグラフィックマークアップ言語（HGML）、Orange UKとPRP ^[7]
• WebCGM、ボーイング、PTC、インターキャップグラフィックスシステムズ、インソコーポレーション、CCLRC、ゼロックス^[8]
• DrawML、Excosoft AB製^[3]

当時、ワーキンググループの議長はW3C の Chris Lilley氏が務めていました。

初期の導入は、Internet Explorer の古いバージョンでサポートされていなかったため、限られていました。しかし、2011 年現在、すべての主要なデスクトップ ブラウザーが SVG のサポートを開始しました。ネイティブ ブラウザー サポートには、プラグインが不要、SVG を他のコンテンツと混合可能、レンダリングとスクリプトの信頼性の向上など、さまざまな利点があります。モバイルでは SVG がさまざまな形でサポートされており、さまざまなデバイスやブラウザーが SVG Tiny 1.1 または 1.2 をサポートしています。SVG はベクター グラフィック エディターを使用して作成し、ラスター形式にレンダリングできます。Web ベースのアプリケーションでは、インライン SVG により、HTML ドキュメント内に SVG コンテンツを埋め込むことができます。

SVG仕様は2011年にバージョン1.1に更新されました。Scalable Vector Graphics 2は2016年9月15日にW3Cの候補勧告となりました。SVG 2には、SVG 1.1とSVG Tiny 1.2の機能に加えて、いくつかの新機能が組み込まれています。^[9]

• SVG 1.0は2001年9月4日にW3C勧告となった。 ^[10]
• SVG 1.1は2003年1月14日にW3C勧告となった。^[11] SVG 1.1仕様は、サブセットをプロファイルとして定義できるようにモジュール化されている。これ以外に、SVG 1.1とSVG 1.0の間にはほとんど違いはない。
  • SVG TinyとSVG Basic（モバイルSVGプロファイル）は2003年1月14日にW3C勧告となった。これらはSVG 1.1のプロファイルとして説明されている。^[12]
• SVG Tiny 1.2は2008年12月22日にW3C勧告となった。^[13]当初は計画されていたSVG Full 1.2（その後SVG 2に置き換えられた）のプロファイルとして起草されたが、^[14]後にスタンドアロン仕様としてリファクタリングされた。一般的にサポートが不十分である。
• SVG 1.1第2版は、元のSVG 1.1のすべての正誤表と説明が含まれていますが、新しい機能は含まれていません。2011年8月16日にリリースされました。^[15]
• SVG Tiny 1.2 Portable/Secureは、2020年7月29日にIETFドラフト標準として導入されたSVG Tiny 1.2プロファイルのより安全なサブセットです。 ^{[16] SVG Tiny P/Sとも呼ばれます。SVG Tiny 1.2 Portable/Secureは}BIMIドラフト標準の要件です。^[17]

SVG 2ではSVG 1.1の一部の機能が削除または廃止され、HTML5とWeb Open Font Formatの新しい機能が組み込まれています。^[18]

• たとえば、SVG 2 では、glyphやなどのいくつかのフォント要素が削除されますaltGlyph(WOFF フォント形式に置き換えられます)。
• このxml:space属性は CSS に置き換えられたため非推奨です。
• translate属性などの HTML5 機能data-*が追加されました。
• SVG Tiny 1.2のテキスト処理機能は含まれると注釈が付けられていますが、まだテキストでは正式化されていません。^[19]その他の1.2の機能のいくつかは厳選されていますが、^[18] SVG 2は一般にSVG tiny 1.2のスーパーセットではありません。

SVG 2は2016年9月15日に候補勧告段階に達し、^[20]改訂版は2018年8月7日と2018年10月4日に公開されました。^[21]最新の草案は2023年3月8日に公開されました。^[22]

SVG は、インタラクティブ性、アニメーション、豊富なグラフィック機能をサポートしており、Web アプリケーションと印刷アプリケーションの両方に適しています。SVG 画像はgzipアルゴリズムで圧縮できるため、SVGZ ファイルは通常、元のファイルより 20～50% 小さくなります。SVG はメタデータもサポートしており、SVG コンテンツのインデックス作成、検索、取得が向上します。

SVG では、ベクター グラフィック シェイプ (直線や曲線で構成されるパスなど)、ビットマップイメージ、テキストの 3 種類のグラフィック オブジェクトを使用できます。グラフィック オブジェクトは、グループ化、スタイル設定、変換、および以前にレンダリングされたオブジェクトとの合成が可能です。機能セットには、ネストされた変換、クリッピング パス、アルファ マスク、フィルター効果、およびテンプレート オブジェクトが含まれます。SVG 描画は対話型にすることができ、SVG XML 要素で定義されるか、SVGドキュメント オブジェクト モデル(DOM) にアクセスするスクリプトを介してアニメーションを含めることができます。

SVGはスタイリングにCSSを使用し、スクリプトにはJavaScriptを使用します。国際化やローカリゼーションを含むテキストはSVG DOM内でプレーンテキストとして表示され、 SVGグラフィックスのアクセシビリティを向上させます。^[15]

SVG仕様は主にベクターグラフィックマークアップ言語に焦点を当てていますが、その設計にはAdobeのPDFのようなページ記述言語の基本的な機能も含まれています。リッチグラフィックスの規定が含まれており、スタイリングのためにCSSと互換性があります。SVGには、印刷されたページ上の選択した場所に各グリフと画像を配置するために必要な情報があります。^[23]

SVGの描画は動的かつインタラクティブに行うことができます。要素に対する時間ベースの変更はSMILで記述するか、スクリプト言語（JavaScriptなど）でプログラムすることができます。W3CはSVGのアニメーションの標準としてSMILを明示的に推奨しています。^[24]

「onmouseover」や「onclick」などの豊富なイベント ハンドラーセットを任意の SVG グラフィカル オブジェクトに割り当てて、アクションやイベントを適用できます。

業界の要望により、SVG 1.1 ではSVG Tiny (SVGT) とSVG Basic (SVGB) の 2 つのモバイル プロファイルが導入されました。

これらは完全なSVG標準のサブセットであり、主に機能が制限されたユーザーエージェントを対象としています。特に、SVG Tinyは携帯電話などの制限の厳しいモバイルデバイス向けに定義されており、スタイルやスクリプトをサポートしていません。^{[25] SVG Basicは}スマートフォンなどの高レベルのモバイルデバイス向けに定義されています。

2003年、国際電気通信標準化団体3GPPは、次世代携帯電話の必須ベクターグラフィックスメディアフォーマットとしてSVG Tinyを採用した。SVGTは必須ベクターグラフィックスフォーマットであり、SVGBのサポートはマルチメディアメッセージングサービス（MMS）とパケット交換ストリーミングサービスではオプションである。^{[26] [27] [28]}これは後に^{[いつ? ] 3GPP} IPマルチメディアサブシステム（IMS）のベクターグラフィックスの必須フォーマットとして追加されました。^{[29] [30]}

どちらのモバイルプロファイルも完全なドキュメントオブジェクトモデル（DOM）のサポートは含まれていませんが、SVG Basicのみがスクリプトのオプションサポートを備えています。ただし、これらは完全な標準の完全に互換性のあるサブセットであるため、ほとんどのSVGグラフィックは、モバイルプロファイルのみをサポートするデバイスでもレンダリングできます。^[31]

SVGT 1.2では、マイクロDOM（μDOM）、スタイル、スクリプトが追加されました。^[25] SVGT 1.2には、Opera、Firefox、WebKitなどの一部のSVG 1.1実装でサポートされている非スケーリングストロークなど、SVG 1.1にはない機能もいくつか含まれています。デスクトップブラウザとモバイルブラウザ間でのコードベースの共有が増えるにつれて、SVGT 1.2よりもSVG 1.1の使用も増加しました。

SVG 画像は XML であり、テキストの断片が多数繰り返されるため、ロスレス データ圧縮アルゴリズムに適しています。SVG 画像がgzipアルゴリズムで圧縮されている場合、それは「SVGZ」画像と呼ばれ、対応する.svgzファイル名拡張子を使用します。準拠した SVG 1.1 ビューアは圧縮された画像を表示します。^[32] SVGZ ファイルは通常、元のサイズの 20 ～ 50 パーセントです。^[33] W3C は準拠をテストするための SVGZ ファイルを提供しています。^[34]

SVG 1.1仕様では14の機能領域または機能セットが定義されている: ^[11]

パス

単純または複合シェイプのアウトラインは、塗りつぶしたり、アウトラインを描いたり、クリッピング パスとして使用したりできる曲線または直線で描画されます。パスにはコンパクトなコーディングがあります。

たとえば、M(「移動先」の場合) は、初期の数値x座標とy 座標の前にあり、 (「直線L」の場合) は、線が描かれる点の前にあります。その他のコマンド文字 ( C、、、、および) は、さまざまなベジェ曲線や楕円曲線を描画するために使用されるデータの前にあります。はS、パスを閉じるために使用されます。QTAZ

いずれの場合も、大文字のコマンドの後に絶対座標が続き、小文字のコマンドの後に相対座標が使用されます。^[35]

基本的な形状

直線のパスや、一連の接続された直線セグメント（ポリライン）で構成されるパス、閉じた多角形、円、楕円を描くことができます。長方形や角丸長方形も標準的な要素です。^[36]

文章

SVGファイルに含まれるUnicode文字テキストはXML文字データとして表現されます。多くの視覚効果が可能であり、SVG仕様は双方向テキスト（たとえば、英語とアラビア語のテキストの組み合わせを作成する場合）、垂直テキスト（中国語や日本語の書き方など）、曲線パスに沿った文字（米国の国璽の縁のテキストなど）を自動的に処理します。^[37]

絵画

SVG シェイプは、塗りつぶしやアウトライン (色、グラデーション、またはパターンで描画) を行うことができます。塗りつぶしは不透明にすることも、任意の透明度にすることもできます。

「マーカー」とは、矢印や多角形の頂点に表示される記号などの線の端点の特徴である。^[38]

色

fill色は、直接または、、、その他のプロパティを介して、すべての表示可能なSVG要素に適用できます。色はCSS2strokeと同じ方法、つまり、またはなどの名前、またはなどの16進数、またはなどの10進数、または形式のパーセンテージを使用して指定します。^[39]blackblue#2f0#22ff00rgb(255,255,127)rgb(100%,100%,50%)

グラデーションとパターン

SVGシェイプは、上記のように単色で塗りつぶしたり、アウトラインを描いたりできます。また、カラーグラデーションや繰り返しパターンで塗りつぶしたりすることもできます。カラーグラデーションは線形または放射状（円形）にすることができ、任意の数の色と繰り返しを含めることができます。不透明度グラデーションも指定できます。パターンは、定義済みのラスターまたはベクターグラフィックオブジェクトに基づいており、方向xとy方向に繰り返すことができます。グラデーションとパターンはアニメーション化したりスクリプト化したりできます。^[40]

2008年以来、SVGのプロフェッショナルユーザーの間では、グラデーションメッシュまたはできれば拡散曲線のいずれかをSVG仕様に追加することが有益であるという議論がありました^{[41] [42]}。「[拡散曲線を使用した]単純な表現は、非常に微妙な陰影効果さえも表現できる」^[43]と言われており、「拡散曲線画像は、品質とコーディング効率の両方でグラデーションメッシュに匹敵しますが、作成がより簡単であり（両方のツールを使用した複数のアーティストによると）、ビットマップから完全に自動的にキャプチャできます。」^[44] SVG 2の現在のドラフトには、グラデーションメッシュが含まれています。^[45]

クリッピング、マスキング、合成

テキスト、パス、基本図形、およびそれらの組み合わせを含むグラフィック要素は、アウトラインとして使用して、独立してペイント（色、グラデーション、パターンを使用）できる内側と外側の両方の領域を定義することができます。完全に不透明なクリッピングパスと半透明のマスクが合成され、アルファブレンディングを使用して最終画像のすべてのピクセルの色と不透明度が計算されます。^[46]

フィルター効果^[47]

フィルター効果は、特定のソース ベクター グラフィックに適用され、変更されたビットマップ結果を生成する一連のグラフィック操作で構成されます。

インタラクティブ性

SVG画像は、さまざまな方法でユーザーと対話することができます。後述するハイパーリンクに加えて、SVG画像のどの部分でも、フォーカスの変更、マウスのクリック、画像のスクロールやズーム、その他のポインタ、キーボード、ドキュメントイベントなどのユーザーインターフェイスイベントを受信できるようにすることができます。イベントハンドラは、このようなイベントに応答して、アニメーションを開始、停止、変更したり、スクリプトをトリガーしたりできます。^[48]

リンク

SVG画像には、 XLinkを使用して他の文書へのハイパーリンクを含めることができます。<view>要素またはフラグメント識別子を使用することで、URLは文書の表示領域を変更するSVGファイルにリンクできます。これにより、特定の領域を拡大/縮小したり、特定の要素にビューを制限したりするために使用される特定のビューステートを作成できます。これは、スプライトを作成するときに役立ちます。要素と組み合わせたXLinkサポートにより、<use>内部要素と外部要素へのリンクと再利用も可能になります。これにより、コーディング者は少ないマークアップでより多くのことを行うことができ、よりクリーンなコードを作成できます。^[49]

スクリプト

SVGドキュメントのすべての側面は、HTMLと同様にスクリプトを使用してアクセスおよび操作できます。デフォルトのスクリプト言語はJavaScriptで、すべてのSVG要素と属性にはドキュメントオブジェクトモデル（DOM）オブジェクトが定義されています。スクリプトは要素に囲まれています<script>。必要に応じて、ポインタイベント、キーボードイベント、ドキュメントイベントに応答して実行できます。^[50]

アニメーション

<animate>SVGコンテンツは、、、<animateMotion>などの組み込みアニメーション要素を使用してアニメーション化できます<animateColor>。ECMAScriptとスクリプト言語の組み込みタイマーを使用してDOMを操作することで、コンテンツをアニメーション化できます。SVGアニメーションは、同期マルチメディア統合言語（SMIL）の現在のバージョンと将来のバージョンと互換性があるように設計されています。アニメーションは連続的、ループ、繰り返し、および前述のようにユーザーイベントに応答できます。^[51]

フォント

HTMLやCSSと同様に、SVGのテキストはシステムフォントなどの外部フォントファイルを参照する場合があります。SVGファイルがレンダリングされるマシンに必要なフォントファイルが存在しない場合、テキストは意図したとおりに表示されない可能性があります。この制限を克服するために、テキストをSVGフォントで表示することができます。この場合、必要なグリフはSVGでフォントとして定義され、<text>要素から参照されます。^[52]

メタデータ

W3Cのセマンティックウェブイニシアチブに従って、SVGでは作者がSVGコンテンツに関するメタデータを提供することができます。主な機能は要素で、ここでドキュメントをダブリンコアメタ<metadata>データプロパティ（タイトル、作成者/著者、件名、説明など）を使用して記述できます。他のメタデータスキーマも使用できます。さらに、SVGでは、作者がSVG画像内にプレーンテキストの説明資料を提供して、さまざまな方法でインデックス作成、検索、取得できるようにするための要素と要素も定義しています。^[53]<title><desc>

SVG ドキュメントでは、形状やグラデーションなどのコンポーネントを定義し、繰り返し使用することができます。SVG 画像には、PNG画像やJPEG画像などのラスター グラフィックや、さらに SVG 画像を含めることもできます。

このコードは、グリッドとラベルを除いて、画像に示されている色付きの図形を生成します。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width= "391" height= "391" viewBox= "-70.5 -70.5 391 391" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" > <rect fill= "#fff" stroke= "#000" x= "-70" y= "-70" width= "390" height= "390" /> <g opacity= "0.8" > <rect x= "25" y= "25" width= "200" height= "200" fill= "lime" stroke-width= "4" stroke= "pink" /> <circle cx= "125" cy= "125" r= "75" fill= "orange" /> <polyline points= "50,150 50,200 200,200 200,100" stroke= "red" stroke-width= "4" fill= "none" /> <line x1= "50" y1= "50" x2= "200" y2= "200" stroke= "blue" stroke-width= "4" /> </g> </svg>     
      
 
	        
	     
	     
	       

ウェブ上での SVG の使用は、Internet Explorer (IE) の古いバージョンでサポートされていないため制限されていました。SVG 画像を提供する多くのウェブサイトは、 HTTPコンテンツ ネゴシエーションによって自動的に、またはユーザーが直接ファイルを選択できるようにすることで、 ラスター形式でも画像を提供しています。

Konquerorは2004年2月にバージョン3.2をリリースし、SVGをサポートした最初のブラウザとなった。 ^[54] 2011年現在、すべての主要なデスクトップブラウザと多くのマイナーブラウザが、ある程度のSVGサポートを備えている。他のブラウザの実装はまだ完了していない。詳細については、レイアウトエンジンの比較を参照のこと。

Firefoxの以前のバージョン（例えば、バージョン1.5から3.6の間^[55]）や、SVGグラフィックを表示できる他の現在では時代遅れのウェブブラウザのいくつかでは、画像をHTMLウェブページの一部として統合するのではなく、画像を埋め込んだり<object>、<iframe> 要素を<img>使用して表示する必要がありました。^{[56]ただし、} XML名前空間を使用してSVG画像をXHTMLページに含めることができます。^[57]

ワールドワイドウェブの発明者であるティム・バーナーズ＝リーは、 SVGをサポートしていなかった初期のInternet Explorerを批判した。^[58]

• Opera (8.0 以降) は SVG 1.1 Tiny 仕様をサポートしていますが、Opera 9 には SVG 1.1 Basic のサポートと SVG 1.1 Full の一部が含まれています。Opera 9.5 は SVG Tiny 1.2 を部分的にサポートしています。また、SVGZ (圧縮 SVG) もサポートしています。
• Gecko レイアウトエンジンをベースにしたブラウザ（ Firefox、Flock、Camino、SeaMonkeyなど）は、2005年以降、SVG 1.1 Full仕様を不完全な形でサポートしてきました。Mozillaのサイトには、Firefoxでサポートされているモジュール^[59]と開発中のモジュール[ ^{60]の概要が掲載されています。Firefox} 3.0に含まれるGecko 1.9では、SVG仕様（フィルターを含む）のサポートがさらに追加されています。^[61]
• Pale Moon は、 Goannaレイアウト エンジン ( Geckoエンジンのフォーク)を使用し、SVG をサポートしています。
• WebKitベースのブラウザ（ AppleのSafari、Google Chrome、The Omni GroupのOmniWebなど）は、2006年以来、SVG 1.1 Full仕様を不完全な形でサポートしてきました。^[62]
• Amaya は部分的な SVG サポートを備えています。
• Internet Explorer 8以前のバージョンはSVGをサポートしていません。^{[63] [64]} IE9（2011年3月14日リリース）は基本的なSVG機能セットをサポートしています。^[65] IE10はSVG 1.1フィルターを追加することでSVGサポートを拡張しました。^[66]
• Microsoft Edge LegacyはSVG 1.1をサポートしています。^[67]
• Maxthon Cloud Browser はSVG もサポートしています。^{[引用が必要]}

ネイティブサポートと完全サポートにはいくつかの利点があります。プラグインは必要なく、SVGは単一のドキュメント内で他のコンテンツと自由に混在でき、レンダリングとスクリプトの信頼性が大幅に向上します。^[68]

SVGのサポートは、古いまたは制限のあるスマートフォンではSVGTに限定されるか、またはそれぞれのオペレーティングシステムによって主に制限される可能性があります。Adobe Flash Liteはバージョン1.1以降、オプションでSVG Tinyをサポートしています。SVG Open 2005カンファレンスで、SunはConnected Limited Device Configuration （CLDC）プラットフォーム用のSVG Tiny 1.1のモバイル実装をデモしました。^[69]

Opera Mobileを使用するモバイルやiPhoneの内蔵ブラウザもSVGをサポートしています。しかし、WebKitエンジンを使用しているにもかかわらず、Androidの内蔵ブラウザはv3.0（Honeycomb）より前はSVGをサポートしていませんでした。^[70] v3.0より前では、Android用のFirefox Mobile 4.0b2（ベータ版）がAndroidで実行され、デフォルトでSVGをサポートする最初のブラウザでした。^[71]

利用可能な SVG Tiny サポートのレベルは、インストールされている SVG エンジンに応じてモバイルごとに異なります。多くの新しいモバイル製品は、グラデーションや不透明度など、SVG Tiny 1.1 を超える追加機能をサポートしています。これは「SVGT 1.1+」と呼ばれることもありますが、そのような標準はありません。

RIMのBlackBerryはバージョン5.0以降、SVG Tiny 1.1のサポートを組み込んでいます。^[72] OS 6および7では、WebKitベースのBlackBerry Torchブラウザのサポートが継続されています。^[73]

NokiaのS60プラットフォームにはSVGのサポートが組み込まれています。たとえば、アイコンは通常、プラットフォームのSVGエンジンを使用してレンダリングされます。Nokiaは、 SVGの表示と操作のためのJava ME APIを定義するJSR 226: Scalable 2D Vector Graphics API専門家グループも主導しています。このAPIは、S60 Platform 3rd Edition Feature Pack 1以降に実装されています。^[74]一部のSeries 40電話機もSVGをサポートしています（ Nokia 6280など）。^{[引用が必要]}

K700以降のほとんどのSony Ericsson携帯電話(リリース日順) は SVG Tiny 1.1 をサポートしています。K750 以降の携帯電話は不透明度やグラデーションなどの機能もサポートしています。Sony Ericsson Java Platform-8を搭載した携帯電話はJSR 226 をサポートしています。 ^{[引用が必要]}

Windows Phone はバージョン 7.5 以降で SVG をサポートしています。

SVGは、モトローラ、サムスン、LG、シーメンスモバイル/ベンキューシーメンスのさまざまなモバイルデバイスでもサポートされています。主に組み込みデバイス向けに書かれたSVGレンダリングライブラリであるeSVGは、一部のモバイルプラットフォームで利用できます。^{[75] [76]}

SVG画像は手動でコーディングすることも、 Inkscape、Adobe Illustrator、Adobe Flash Professional、CorelDRAWなどのベクターグラフィックエディタを使用して作成することもできます。また、同じソフトウェアを使用してPNGなどの一般的なラスター画像形式にレンダリングすることもできます。さらに、 InkscapeやBoxy SVGなどのエディタでは、 potrace、^{[77] autotrace、imagetracerjsなどの}画像トレースバックエンドを使用して、ラスター画像をベジェ曲線にトレースするツールが提供されています。

2000 年からGNOMEで使用されているlibrsvgや、2020 年から軽量システム向けに使用されているBatikや ThorVG (Thor Vector Graphics) などのライブラリを使用して、SVG 画像をレンダリングするようにソフトウェアをプログラムできます。SVG 画像は、無料のコマンドライン ユーティリティであるImageMagick (これも内部で librsvg を使用) を 使用して、任意の一般的な画像形式にレンダリングすることもできます。

Web ベースのアプリケーションでは、インライン SVG と呼ばれる使用モードにより、<svg>タグを使用して SVG コンテンツを HTML ドキュメント内に埋め込むことができます。そのグラフィカル機能を使用すると、SVG と HTML がコンテキスト、イベント処理、CSS を共有するため、洗練されたユーザー インターフェイスを作成できます。

SVG のその他の用途としては、ワードプロセッサ( LibreOfficeなど) やデスクトップ パブリッシング( Scribusなど)での埋め込み、グラフのプロット( gnuplotなど)、パスのインポート ( GIMPやBlenderでの使用など) などがあります。アプリケーション サービスMicrosoft 365およびMicrosoft Office 2019 は、 SVG 画像のエクスポート、 ^[78]インポートおよび編集をサポートしています。Appleが使用する SVG のUniform Type Identifierpublic.svg-imageはであり、public.imageおよびに準拠していますpublic.xml。

HTML ドキュメントと同様に、SVG はドキュメント形式としてスクリプトや CSS をホストできます。これは、攻撃者がプロフィール写真などの SVG ファイルを Web サイトにアップロードし、そのファイルが通常の画像として扱われるが、悪意のあるコンテンツが含まれている場合に問題となります。^[79]たとえば、SVG ファイルが CSS 背景画像、または Web サイトのロゴ、または画像ギャラリーとして展開されている場合、その画像がブラウザーに読み込まれると、スクリプトやその他のコンテンツがアクティブになります。これにより、ブラウザーがロックされる可能性があります ( Billion aughs 攻撃)。また、HTML インジェクションやクロスサイト スクリプティング攻撃につながる可能性もあります。そのため、W3C は、SVG が単に画像に使用される場合の特定の要件を規定しています。SVG セキュリティ。^[80]

W3Cによれば、インラインSVG（ウェブサイトにネイティブにロードされるSVGファイル）は、コンテンツがより大きな文書の一部であるため、セキュリティリスクは低いと考えられており、スクリプトやCSSは予期されるものではないとのことです。^[80]

MPEG -4 Part 20標準 -軽量アプリケーションシーン表現 (LASeR) およびシンプル集約形式 (SAF)は、SVG Tiny に基づいています。^{[81]これは、} MPEG ( ISO/IEC JTC 1 /SC29/WG11)によって開発され、ISO/IEC 14496-20:2006 として公開されました。^[82] SVG 機能は、動的更新、バイナリエンコーディング、最先端のフォント表現など、モバイルサービス向けの重要な機能によって MPEG-4 Part 20 で強化されています。^[83] SVG は、MPEG-4 Part 11のExtensible MPEG-4 Textual (XMT) 形式( XMLを使用した MPEG-4 マルチメディアコンテンツのテキスト表現)でも採用されています。^[84]

• キャンバス要素
• グラフィックファイル形式の比較
• ラスターからベクターへの変換ソフトウェアの比較
• ベクターグラフィックエディタの比較
• コンピュータグラフィックス
• コンピュータグラフィックスメタファイル
• 画像ファイル形式
• 解像度の独立性

• W3C SVG ページ仕様、実装リスト
• W3C SVG 入門 SVG Interest Group 主催の W3C 入門 (ドラフト)
• MDN - SVG: スケーラブル ベクター グラフィックス