SVG とは、 Scalable Vector Graphics （スケーラブル・ベクター・グラフィックス）を表す、 XML 文法に則った XML 名前空間 として利用可能な スタイル付け 可能なグラフィックスを記述する言語である。
SVG stands for Scalable Vector Graphics, an XML grammar for stylable graphics, usable as an XML namespace.
スケーラブルであるとは、一様に増大／減少できることを意味する。グラフィックスにおいてスケーラブルとは、１つに固定された画素の大きさに制限されないことを意味する。ウェブにおいてはスケーラブルとは、特定の技術が多数のファイル, 多くの利用者, 幅広いアプリケーションに対し機能を損なわずに適用し得ることを意味する。 SVG はウェブのためのグラフィックス技術として、いずれの意味においてもスケーラブルである。
To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size. On the Web, scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word.
SVG グラフィックスは異なるディスプレイ解像度に対しスケーラブルである。例えばプリンタに対してはその最高解像度で出力し得る一方、解像度の異なるスクリーンに対しても同じ大きさに表示できる。同じグラフィックを一つのウェブページ上に異なる大きさに複数表示させたり、別のページ上に異なる大きさで再利用することもできる。 SVG グラフィックスは必要なだけ拡大できるので、細部の確認や弱視者の補助にも役立つ。
SVG graphics are scalable to different display resolutions, so that for example printed output uses the full resolution of the printer and can be displayed at the same size on screens of different resolutions. The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. SVG graphics can be magnified to see fine detail, or to aid those with low vision.
一つの SVG 内容はそれ自身で独立した存在になることも、あるいは他の SVG グラフィックへの埋め込みや、他からの参照による利用も可能であり、複雑なイラストも幾人かの手による部分から組み上げることが可能、という意味でもスケーラブルである。 シンボル, マーカ, フォント の機能により、グラフィックス部品の再利用を促し, HTTP キャッシュの利点を最大限に発揮させ, 公認シンボルの中央集権的管理も避けられるようになる。
SVG graphics are scalable because the same SVG content can be a stand-alone graphic or can be referenced or included inside other SVG graphics, thereby allowing a complex illustration to be built up in parts, perhaps by several people. The symbol , marker and font capabilities promote re-use of graphical components, maximize the advantages of HTTP caching and avoid the need for a centralized registry of approved symbols.
ベクターグラフィックスの概念は線や曲線のような幾何的なオブジェクトを包含する。これにより、個々の画素ごとに情報を蓄える（ PNG や JPEG のような）ラスター形式と比較して多大な柔軟性が得られる。一般にベクター形式はラスター画像を統合することができ、クリッピングパスなどのベクター情報と組み合わせることで、完成されたイラストが作成可能になる。 SVG も例外ではない。
Vector graphics contain geometric objects such as lines and curves. This gives greater flexibility compared to raster-only formats (such as PNG and JPEG) which have to store information for every pixel of the graphic. Typically, vector formats can also integrate raster images and can combine them with vector information such as clipping paths to produce a complete illustration; SVG is no exception.
現代のディスプレイがラスター指向である故に、ラスターのみのグラフィックスとベクターグラフィックスの違いは、つまるところ、どの時点でラスター化されるかにある。サーバー側ですでにラスター化しておくのとは対照的に、ベクターグラフィックスではクライアント側がラスター化を行う。 SVG はラスター化の過程に対する制御を提供する。例えば低品質なベクター実装によくある見苦しいジャギーを解消するアンチエイリアスされたアートワークを可能にする。 SVG はクライアント側による ラスターフィルタ効果 も提供する。ベクター形式に移行することはソフト・ドロップシャドウなどの人気のある効果を失うことを意味するものではない。
Since all modern displays are raster-oriented, the difference between raster-only and vector graphics comes down to where they are rasterized; client side in the case of vector graphics, as opposed to already rasterized on the server. SVG gives control over the rasterization process, for example to allow anti-aliased artwork without the ugly aliasing typical of low quality vector implementations. SVG also provides client-side raster filter effects, so that moving to a vector format does not mean the loss of popular effects such as soft drop shadows.
現在の XML 言語の多くは、テキストそのままの情報も金融情報のような生のデータも表現している。それらは決まって基本的なグラフィックス機能しか提供しておらず、多くの場合 HTML の 'img' 要素程度に留まる。 SVG はベクターとラスターが混在した濃密かつ組織的なグラフィックスの記述を提供することにより、このような落差を埋める。それは独立して機能することも、 XML 名前空間を利用して他の言語と共存することもできる。
Most existing XML grammars represent either textual information, or represent raw data such as financial information. They typically provide only rudimentary graphical capabilities, often less capable than the HTML 'img' element. SVG fills a gap in the market by providing a rich, structured description of vector and mixed vector/raster graphics; it can be used stand-alone, or as an XML namespace with other grammars.
構造化された情報を交換するための技術として W3C 勧告 となった XML は、急速に一般に受け入れられ、幅広い分野で信頼できる実装を持つようになった。 XML で記述されることにより、 SVG はこの確固とした基盤のもとに、国際化のためのしっかりした基礎, 強力な組織化能力, オブジェクトモデル, 等々、多くの利点を得る。現存するきれいな実装を持つ仕様をもとに構築されたことにより、この XML に基づく文法は膨大なリバースエンジニアリングの労力を要することなく、実装する側に対して開かれたものになっている。
XML, a W3C Recommendation for structured information exchange, has become extremely popular and is both widely and reliably implemented. By being written in XML, SVG builds on this strong foundation and gains many advantages such as a sound basis for internationalization, powerful structuring capability, an object model, and so on. By building on existing, cleanly-implemented specifications, XML-based grammars are open to implementation without a huge reverse engineering effort.
SVG のみに対応した独立したビューアはもちろん役に立つ。しかしながら、 SVG は複数の名前空間を扱える XML アプリケーションの一構成部品としても使えるように設計されている。これにより、それぞれの名前空間の機能による相乗効果が得られ、先進的な内容を生成することも可能になる。例えば SVG グラフィックスは、 XHTML も含めたどのようなテキスト指向の XML 名前空間に含まれていても良い。科学文書においては数学利用のために MathML の利用も考えられる。 SVG と SMIL の組み合わせにより、興味を引く時間軸ベースのリッチなグラフィックス表現も可能になる。
It is certainly useful to have a stand-alone, SVG-only viewer. But SVG is also intended to be used as one component in a multi-namespace XML application. This multiplies the power of each of the namespaces used, to allow innovative new content to be created. For example, SVG graphics may be included in a document which uses any text-oriented XML namespace - including XHTML. A scientific document, for example, might also use MathML for mathematics in the document. The combination of SVG and SMIL leads to interesting, time based, graphically rich presentations.
SVG は、グラフィックスを必要とする複数の名前空間を扱える文法にとって、良質かつ汎用的な部品になる。
SVG is a good, general-purpose component for any multi-namespace grammar that needs to use graphics.
スタイルシートの利点として挙げられる、プレゼンテーションの制御, 柔軟性, 高速なダウンロード, 保守の容易さは、今日ではテキストの分野で広く受け入れられている。 SVG はこの利点をグラフィックスの世界にまで拡張する。
The advantages of style sheets in terms of presentational control, flexibility, faster download and improved maintenance are now generally accepted, certainly for use with text. SVG extends this control to the realm of graphics.
スクリプトと DOM と CSS の組み合わせは、しばしば「ダイナミック HTML 」という言葉に表され、アニメーション, 対話的操作, 表示効果などに利用されている。 SVG においても、文書木とスタイルシートに対し同じスクリプトベースの操作が可能である。
The combination of scripting, DOM and CSS is often termed "Dynamic HTML" and is widely used for animation, interactivity and presentational effects. SVG allows the same script-based manipulation of the document tree and the style sheet.
いかなる XML 言語も、それが何をモデル化するかが意識されている。文章形式をモデル化する場合、普通は名詞, 副詞, 音素などより段落や成句のレベルが念頭に置かれることになる。同様に SVG ではグラフィックスを、個別の画素ではなく、グラフィックスオブジェクトのレベルでモデル化を行う。
With any XML grammar, consideration has to be given to what exactly is being modelled. For textual formats, modelling is typically at the level of paragraphs and phrases, rather than individual nouns, adverbs, or phonemes. Similarly, SVG models graphics at the level of graphical objects rather than individual points.
SVG は汎用のパス（曲線や直線で繋がった一本の経路）を扱う。それらを用いることで膨大な種類のグラフィックスオブジェクトを作り出すことが可能になる。長方形や楕円のような頻繁に用いられる 基本図形 も提供されている。これらは手作業でコーディングするときに便利であり、より汎用的なパスと同じ様に扱うことができる。 SVG は、グラフィックスオブジェクトが定義される座標系と描画過程で適用される座標変換に対し、詳細にわたる制御を提供する。
SVG provides a general path element, which can be used to create a huge variety of graphical objects, and also provides common basic shapes such as rectangles and ellipses. These are convenient for hand coding and may be used in the same ways as the more general path element. SVG provides fine control over the coordinate system in which graphical objects are defined and the transformations that will be applied during rendering.
標準的な定義済みグラフィックを定めることも考えられたが、何を標準と定めるべきであろうか？ 電子工学, 地図製作, 流れ図、等々の分野においては常に新たなシンボルが追加されていくものである。これらのシンボルを必要とする人々は「次のバージョン」が提供されるまで待たされることになる。 SVG は中央集権的な管理の下に登録することを必要とせずに、利用者達自身によるシンボル資産の作成, 再利用, 共有を可能にする。利用者のコミュニティは、特別な許可を得ずとも自分達の欲するシンボルを作り、改良を加えていけるようになる。デザイナー達にとっては、サポートの有無に悩まされずとも、利用するシンボルが意図どおり表示に反映される確証が得られるようになる。
It would have been possible to define some standard symbols that SVG would provide. But which ones? There would always be additional symbols for electronics, cartography, flowcharts, etc., that people would need that were not provided until the "next version". SVG allows users to create, re-use and share their own symbols without requiring a centralized registry. Communities of users can create and refine the symbols that they need, without having to ask a committee. Designers can be sure exactly of the graphical appearance of the symbols they use and not have to worry about unsupported symbols.
シンボルは、異なる大きさや方向で用いたり、グラフィック作品の中で他の部分と調和するようにスタイルを変えて用いることもできる。
Symbols may be used at different sizes and orientations, and can be restyled to fit in with the rest of the graphical composition.
現在のウェブ画像の多くは、画像処理ソフトウエアによるぼかし, 影付け, 照明などのフィルタ処理を使って製作されている。ベクター形式の画像をクライアント側でラスター化するような場合、そのような効果を得るのは不可能と思われるかもしれない。 SVG では、宣言的な記述による単独のフィルタまたは複数のフィルタの組み合わせを指定することにより、クライアント側においてそのような処理を可能にする。それらの指定においても、グラフィックの伸縮や異なる解像度による表示機能は依然として維持される。
Many existing Web graphics use the filtering operations found in paint packages to create blurs, shadows, lighting effects and so on. With the client-side rasterization used with vector formats, such effects might be thought impossible. SVG allows the declarative specification of filters, either singly or in combination, which can be applied on the client side when the SVG is rendered. These are specified in such a way that the graphics are still scalable and displayable at different resolutions.
美しいグラフィックス表現はしばしば特定のフォントと正確なグリフの字詰めに依存している。多くの場合、デザイナー達はフォントの置換や代用を避けるべく、テキストをアウトラインに変換する。この事は、元のテキストが失われ、検索やアクセシビリティの障壁になることを意味する。デザイナー達からの要望により、 SVG にはテキストとそのグラフィックス表現の両方の保持を可能にするフォント要素が含められることになった。
Graphically rich material is often highly dependent on the particular font used and the exact spacing of the glyphs. In many cases, designers convert text to outlines to avoid any font substitution problems. This means that the original text is not present and thus searchability and accessibility suffer. In response to feedback from designers, SVG includes font elements so that both text and graphical appearance are preserved.
アニメーションの生成はスクリプトベースの操作でも可能であるが、スクリプトは編集が難しく、文書作成ツール間で互換性をとるのは困難になる。ここでもデザイナーコミュニティからの要望により、 SVG には SVG と SYMM ワーキンググループとの協力により設計された宣言的な記述を行えるアニメーション要素が含まれることになった。これにより、ウェブでよく使われるようなアニメーション効果を SVG で表現することが可能になる。
Animation can be produced via script-based manipulation of the document, but scripts are difficult to edit and interchange between authoring tools is harder. Again in response to feedback from the design community, SVG includes declarative animation elements which were designed collaboratively by the SVG and SYMM Working Groups. This allows the animated effects common in existing Web graphics to be expressed in SVG.
SVG 内容をウェブページに埋めこむには様々な方法がある。ここにそれらの一部を挙げる：
There are a variety of ways in which SVG content can be included within a Web page. Here are some of the options: