Loading article…
スケーラブル・ベクター・グラフィックス（SVG）は、インタラクティブ機能とアニメーションをサポートする、 2次元グラフィックスを定義するためのXMLベースのベクターグラフィックス形式です。SVG仕様は、1999年以来、ワールド・ワイド・ウェブ・コンソーシアムによって開発されているオープンスタンダードです。
SVG画像はベクターグラフィックス形式で定義され、XMLテキストファイルに保存されます。そのため、SVG画像は画質を損なうことなくサイズを拡大縮小でき、SVGファイルは検索、インデックス作成、スクリプト化、圧縮が可能です。XMLテキストファイルはテキストエディタまたはベクターグラフィックスエディタで作成および編集でき、ほとんどのWebブラウザでレンダリングされます。SVGにはJavaScriptを含めることができるため、クロスサイトスクリプティング攻撃につながる可能性があります。
SVGは、1998年に6つの競合するベクターグラフィックス言語の提案がコンソーシアムに提出された後、1999年からワールドワイドウェブコンソーシアム（W3C）内で開発されてきました（下記参照）。 [ 3 ]
初期のSVGワーキンググループは、商用提案を一切開発せず、それらを参考にしつつもそれらに基づかない新しいマークアップ言語を作成することを決定した。 [ 3 ]
SVGは、1998年に6つの競合するベクターグラフィックスの提案が寄せられた後、W3C SVGワーキンググループによって開発が開始されました。
当時、このワーキンググループの議長はW3Cのクリス・リリー氏が務めていた。
初期の普及は、旧バージョンの 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 2 では、SVG 1.1 の一部の機能が削除または非推奨となり、HTML5およびWeb Open Font Format (WOFF) からの新機能が組み込まれています。[ 18 ]
glyphやなどのいくつかのフォント要素が削除され、 altGlyph（WOFF に置き換えられます）。xml:space属性は非推奨となり、CSSが推奨されています。translate`data-*属性などが追加されました。SVG 2 は 2016 年 9 月 15 日に勧告候補段階に達し、[ 20 ]改訂版は 2018 年 8 月 7 日と 2018 年 10 月 4 日に公開されました。[ 21 ]最新の草案は 2025 年 9 月 14 日に公開されました。[ 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 ]
どちらのモバイルプロファイルも完全なドキュメントオブジェクトモデル（DOM）をサポートしていませんが、SVG Basicのみがスクリプトをオプションでサポートしています。しかし、これらは完全な標準の完全な互換性のあるサブセットであるため、ほとんどのSVGグラフィックはモバイルプロファイルのみをサポートするデバイスでもレンダリングできます。[ 30 ]
SVGT 1.2 では、マイクロ DOM (μDOM)、スタイル設定、スクリプト機能が追加されました。[ 25 ] SVGT 1.2 には、SVG 1.1 にはない機能もいくつか含まれており、Opera、Firefox、WebKit などの一部の SVG 1.1 実装でサポートされている非スケーリング ストロークなどが含まれます。デスクトップ ブラウザとモバイル ブラウザ間で共有されるコード ベースが増えるにつれて、SVGT 1.2 よりも SVG 1.1 の使用も増加しました。
SVG 画像は XML であるため、テキストの繰り返し部分が多く含まれており、可逆データ圧縮アルゴリズムに適しています。SVG 画像をgzipアルゴリズムで圧縮すると、「SVGZ」画像と呼ばれ、対応する.svgzファイル名拡張子が使用されます。SVG 1.1 に準拠したビューアは、圧縮された画像を表示します。[ 31 ] SVGZ ファイルは通常、元のサイズの 20 ～ 50 パーセントです。[ 32 ] W3C は、準拠性をテストするための SVGZ ファイルを提供しています。[ 33 ]
SVG 1.1仕様では、14の機能領域または機能セットが定義されています。[ 11 ]
M（「移動先」の場合）は初期の数値の x 座標と y 座標の前に付き、（「線引き先」Lの場合）は線を引くべき点の前に付きます。その他のコマンド文字（C、、、、および）はS、さまざまなベジェ曲線や楕円曲線を描画するために使用されるデータの前に付きます。はパスを閉じるために使用されます。QTAZfill色は、直接、または、、、およびその他のプロパティを介して、すべての表示可能な SVG 要素に適用できます。色の指定方法はCSS2strokeと同じで、やのような名前、やのような16 進数、のような 10 進数、または の形式のパーセンテージを使用します。[ 38 ]blackblue#2f0#22ff00rgb(255,255,127)rgb(100%,100%,50%)x。yグラデーションとパターンは、アニメーション化およびスクリプト化できます。[ 39 ]<view>要素またはフラグメント識別子を使用することで、URL はドキュメントの表示領域を変更する SVG ファイルにリンクできます。これにより、特定の領域をズームイン/ズームアウトしたり、表示を特定の要素に制限したりするために使用される特定の表示状態を作成できます。これは、スプライトを作成する際に役立ちます。XLinkのサポートは、要素と組み合わせることで、<use>内部要素と外部要素へのリンクと再利用も可能にします。これにより、コーダーはより少ないマークアップでより多くのことを行うことができ、よりクリーンなコードになります。[ 48 ]<script><animate><animateMotion><animateColor><text><metadata><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= <svg> <svg> <svg>ウェブ上でのSVGの利用は、旧バージョンのInternet Explorer （IE）でサポートされていなかったため制限されていました。SVG画像を提供する多くのウェブサイトでは、 HTTPコンテンツネゴシエーションによって自動的に、またはユーザーがファイルを直接選択できるようにすることで、ラスター形式の画像も提供しています。
Konquerorは、2004年2月にリリースされたバージョン3.2でSVGをサポートした最初のブラウザでした。[ 53 ] 2011年現在、主要なデスクトップブラウザはすべて、また多くのマイナーなブラウザも、何らかのレベルでSVGをサポートしています。他のブラウザの実装はまだ完了していません。詳細については、レイアウトエンジンの比較を参照してください。
Firefox の以前のバージョン (例えば、バージョン 1.5 から 3.6 [ 54 ]の間) や、SVG グラフィックを表示できる他のいくつかの古い Web ブラウザでは、標準的な方法で画像を統合するのではなく、HTML Web ページの一部として統合して表示するために、要素または要素に埋め込む必要がありました。[ 55 ]ただし、SVG 画像はXML 名前空間を使用して XHTML ページに含めることができます。[ 56 ]<object><iframe><img>
ワールドワイドウェブの発明者であるティム・バーナーズ＝リーは、 SVGをサポートしていない初期バージョンのインターネットエクスプローラーを批判した。[ 57 ]
ネイティブで完全なサポートにはいくつかの利点があります。プラグインは不要で、SVG を単一のドキュメント内の他のコンテンツと自由に組み合わせることができ、レンダリングとスクリプトの信頼性が大幅に向上します。[ 67 ]
SVG のサポートは、古いスマートフォンや機能が制限されたスマートフォンでは SVGT に限定される場合があり、また、それぞれのオペレーティングシステムによって主に制限される場合もあります。Adobe Flash Lite は、バージョン 1.1 以降、オプションで SVG Tiny をサポートしています。SVG Open 2005 カンファレンスでは、Sun がConnected Limited Device Configuration (CLDC) プラットフォーム向けの SVG Tiny 1.1 のモバイル実装をデモしました。[ 68 ]
Opera Mobileを使用するモバイル端末やiPhoneの内蔵ブラウザも SVG をサポートしています。しかし、WebKitエンジンを使用しているにもかかわらず、Android の内蔵ブラウザは v3.0 (Honeycomb) より前は SVG をサポートしていませんでした。[ 69 ] v3.0 より前は、Android 上で動作する最初のブラウザとして、デフォルトで SVG をサポートする Android 用 Firefox Mobile 4.0b2 (beta) がありました。[ 70 ]
SVG Tinyのサポートレベルは、搭載されているSVGエンジンによって、モバイル端末ごとに異なります。多くの最新のモバイル端末は、グラデーションや透明度など、SVG Tiny 1.1を超える追加機能をサポートしています。これは「SVGT 1.1+」と呼ばれることもありますが、そのような標準規格は存在しません。
RIMのBlackBerryはバージョン5.0以降、SVG Tiny 1.1のサポートを内蔵しています。[ 71 ] WebKitベースのBlackBerry TorchブラウザのサポートはOS 6および7でも継続されています。 [ 72 ]
NokiaのS60プラットフォームにはSVGのサポートが組み込まれています。たとえば、アイコンは通常、プラットフォームのSVGエンジンを使用してレンダリングされます。Nokiaはまた、 SVGの表示と操作のためのJava ME APIを定義するJSR 226: Scalable 2D Vector Graphics APIエキスパートグループを主導しました。このAPIは、S60 Platform 3rd Edition Feature Pack 1以降に実装されています。[ 73 ]一部のSeries 40電話機もSVGをサポートしています（ Nokia 6280など）。[ 74 ]
Sony EricssonのK700（発売日順）以降の機種のほとんどは、 SVG Tiny 1.1をサポートしています。K750以降の機種は、透明度やグラデーションなどの機能もサポートしています。Sony Ericsson Java Platform-8を搭載した機種は、JSR 226をサポートしています。
Windows Phoneはバージョン7.5以降、SVGをサポートしています。
SVGは、 Motorola、Samsung、LG、Siemens mobile / BenQ-Siemensなどのさまざまなモバイルデバイスでもサポートされています。組み込みデバイス向けに主に作成されたSVGレンダリングライブラリであるeSVGは、一部のモバイルプラットフォームで利用可能です。[ 75 ] [ 76 ]
SVG 画像は、手動でコーディングすることも、Inkscape、Adobe Illustrator、Adobe Animate、CorelDRAWなどのベクター グラフィック エディタを使用して作成することもでき、同じソフトウェアを使用してPNGなどの一般的なラスター画像形式にレンダリングできます。さらに、 InkscapeやBoxy SVGなどのエディタは、通常potrace、[ 77 ] autotrace、imagetracerjsなどの画像トレースバックエンドを使用して、ラスター画像をベジェ曲線にトレースするツールを提供します。
ソフトウェアは、GNOMEが2000年から使用しているlibrsvg、BatikやThorVGが2020年から軽量システム向けに使用しているlibrsvgなどのライブラリを使用して、SVG画像をレンダリングするようにプログラムできます。また、無料のコマンドラインユーティリティであるImageMagick（内部ではlibrsvgを使用）を使用すれば、SVG画像を任意の一般的な画像フォーマットにレンダリングすることもできます。
ウェブベースのアプリケーションでは、インラインSVGと呼ばれる使用方法により、<script>タグを使用してSVGコンテンツをHTMLドキュメント内に埋め込むことができます。SVGとHTMLはコンテキスト、イベント処理、CSSを共有するため、そのグラフィック機能を活用して高度なユーザーインターフェースを作成できます。<svg>
SVG のその他の用途としては、ワープロソフト( LibreOfficeなど) やデスクトップ パブリッシングソフト( Scribusなど)での埋め込み、グラフのプロット( gnuplotなど)、パスのインポート ( GIMPやBlenderでの使用など) があります。アプリケーション サービスMicrosoft 365とMicrosoft Office 2019 は、 SVG 画像のエクスポート、 [ 78 ]インポートおよび編集をサポートしています。Appleが使用する SVG のUniform Type Identifierは であり、およびpublic.svg-imageに準拠しています。public.imagepublic.xml
HTML ドキュメントと同様に、SVG はドキュメント形式としてスクリプトや CSS をホストできます。これは、攻撃者がプロフィール画像などの SVG ファイルを Web サイトにアップロードし、そのファイルが通常の画像として扱われるが、悪意のあるコンテンツが含まれている場合に問題となります。[ 79 ]例えば、SVG ファイルが CSS の背景画像、Web サイトのロゴ、または画像ギャラリーに展開されている場合、ブラウザで画像が読み込まれると、スクリプトやその他のコンテンツがアクティブになります。これにより、ブラウザがフリーズする可能性があり ( Billion laughs 攻撃)、 HTML インジェクションやクロスサイトスクリプティング攻撃につながる可能性もあります。そのため、W3C は、SVG が単に画像に使用される場合の特定の要件を規定しています。SVG セキュリティ。[ 80 ]
W3Cは、インラインSVG（Webサイトにネイティブに読み込まれる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 ] MPEG-4 Part 20 では、動的更新、バイナリエンコーディング、最先端のフォント表現など、モバイルサービス向けの主要機能により SVG の機能が強化されています。[ 83 ] SVG は、MPEG- 4 マルチメディア コンテンツをXMLでテキスト表現する拡張可能な MPEG-4 テキスト (XMT) フォーマットでMPEG-4 Part 11にも採用されました。[ 84 ]
SVGはスケーラブルベクターグラフィックスの事実上の標準として市場で広く採用されていますが、Windowsではまだネイティブにサポートされていないため、ユーザーはファイルエクスプローラー用のSVGプレビューサムネイルをダウンロードするか[ 85 ]、ネイティブサポートを備えた別のファイルエクスプローラーを使用する必要があります。
: 優先順位はレイアウト、拡散曲線、2.5Dであり、CSSとうまく連携するようにする必要があります。
確かに、次期バージョンではSVGに新しいグラデーション機能を追加する予定で、拡散曲線を検討しています。これはあなたのニーズを満たすと思います... *拡散曲線*は本当に素晴らしいアイデアのようです。
