この章は情報を提供するものである。 This chapter is informative.
SVG とは Scalable Vector Graphics （スケーラブル・ベクター・グラフィックス）を意味し、 XML 名前空間 として利用可能な２次元ベクターグラフィックスを記述するための XML 言語である。 SVG stands for Scalable Vector Graphics, an XML grammar for 2D vector 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 グラフィックへの埋め込みや、他からの参照による利用も可能であり、複雑なイラストを幾人かの手による部分から組み上げることが可能、という意味でもスケーラブルである。 use と font の機能により、グラフィックス部品の再利用を促し, 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 use 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 to produce a complete illustration; SVG is no exception.
現代のディスプレイがラスター指向であるが故に、ラスターのみのグラフィックスとベクターグラフィックスの違いは、つまるところ、どの時点でラスター化されるかにある。サーバー側ですでにラスター化しておくのとは対照的に、ベクターグラフィックスではクライアント側がラスター化を行う。 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 provides hints to control the rasterization process, for example to allow anti-aliased artwork without the ugly aliasing typical of low quality vector implementations.
現在の 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 [XML10, XML11] は、急速に一般に受け入れられ、幅広い分野で信頼できる実装を持つようになった。 XML で記述されることにより、 SVG はこの確固とした基盤のもとに、国際化のためのしっかりした基礎, 強力な組織化能力, オブジェクトモデル, 等々、多くの利点を得る。現存するきれいな実装を持つ仕様のもとに構築されたことにより、この XML に基づく文法は膨大なリバースエンジニアリングの労力を要することなく、実装に対して開かれた存在になっている。 XML [XML10, XML11], 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 [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 [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.
スクリプトと HTML DOM の組み合わせは、しばしば「ダイナミック HTML 」という言葉に表され、アニメーション, 対話的操作, 表示効果などに利用されている。 SVG においても同様に、文書木とスタイルシートに対し XML DOM のサブセットと SVG uDOM を利用するスクリプトベースの操作が可能である。 The combination of scripting and the HTML DOM is often termed "Dynamic HTML" and is widely used for animation, interactivity and presentational effects. Similarly SVG allows the script-based manipulation of the document tree using a subset of the XML DOM and the SVG uDOM.
いかなる 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 実装が提供することになる標準的な定義済みグラフィックを定めることも考えられたが、何を標準と定めるべきであろうか？ 電子工学, 地図製作, 流れ図、等々の分野においては常に新たなシンボルが追加されていくものである。これらのシンボルを必要とする人々は「次のバージョン」が提供されるまで待たされることになる。 SVG は中央集権的な管理の下の登録を必要とせずに、利用者達自身によるグラフィックス資産の作成, 再利用, 共有を可能にする。利用者のコミュニティは、特別な許可を得ずとも自分達の欲するグラフィックスを作り、改良を加えていくことが出来る。デザイナー達にとっては、サポートの有無に悩まされずとも、利用するグラフィックスが意図どおり表示に反映される確証が得られるようになる。 It would have been possible to define some standard, pre-defined graphics that all SVG implementations 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 graphical assets without requiring a centralized registry. Communities of users can create and refine the graphics that they need, without having to ask a committee. Designers can be sure exactly of the graphical appearance of the graphics they use and not have to worry about unsupported graphics.
グラフィックスは異なる大きさや方向にも再利用できる。 Graphics may be re-used at different sizes and orientations.
美しいグラフィックス表現はしばしば特定のフォントと正確なグリフの字詰めに依存している。多くの場合、デザイナー達はフォントの置換や代用を避けるべく、テキストをアウトラインに変換する。この事は、元のテキストが失われ、検索やアクセシビリティの障壁になることを意味する。デザイナー達からの要望により、 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:
この場合、 SVG 文書（ウェブ上のリソースで、 MIME タイプが "image/svg+xml" のもの）が直接ウェブブラウザなどの UA （ユーザーエージェント）から読込まれることになる。 SVG 文書そのものが利用者に表示されるウェブページになる。
In this case, an SVG document (i.e., a Web resource whose MIME type is "image/svg+xml") is loaded directly into a user agent such as a Web browser. The SVG document is the Web page that is presented to the user.
この場合、別に保存された SVG 文書が部品として埋めこまれるべく、親のウェブページから参照されることになる。 HTML または XHTML の場合、次の３通りの方法がある： In this case, a parent Web page references a separately stored SVG document and specifies that the given SVG document should be embedded as a component of the parent Web page. For HTML or XHTML, here are three options:
HTML ページでグラフィックスを利用する最も普及している方法は (X)HTML の img 要素である。高速な表示のために、画像の幅と高さを属性に与えられる。 'img' 要素にはブラウザの画像表示をオフにしている利用者や画像を見ることができない利用者のための代替テキストを与える属性として alt 属性が要求されているが、このテキストはマークアップできない。 longdesc 属性を用いて、マークアップができるより豊富な記述が可能な場所（通常は HTML ）を参照できる。 The (X)HTML 'img' element is the most common method for using graphics in HTML pages. For faster display, the width and height of the image can be given as attributes. One attribute that is required is 'alt', used to give an alternate textual string for people browsing with images off, or who cannot see the images. The string cannot contain any markup. A 'longdesc' attribute lets you point to a longer description — often in HTML — which can have markup and richer formatting.
The (X)HTML の object 要素は空要素の img とは異なり、入れ子が可能である。すなわち、最終手段としてテキストによる（マークアップやリンクも含められる）代替表示を含ませつつ、入れ子を用いて様々な形式の代替表示を用意できる。表示可能な形式のうち入れ子の最も外側に位置するものが実際の表示に利用される。 The (X)HTML 'object' element can contain other elements nested within it, unlike 'img', which is empty. This means that several different formats can be offered, using nested 'object' elements, with a final textual alternative (including markup, links, etc). The rootmost element which can be displayed will be used.
(X)HTML の applet 要素は Java アプレットを起動してウェブページ内に SVG を表示できる。アプレットには様々なことが可能だが、特によく行われるのは、特殊な形式のもの、あるいは何らかの理由でプログラムによる制御下での表示が必要な画像を表示させることである。 The (X)HTML 'applet' element which can invoke a Java applet to view SVG content within the given Web page. These applets can do many things, but a common task is to use them to display images, particularly ones in unusual formats or which need to be presented under the control of a program for some other reason.
この場合、 SVG は親となるウェブページ内に直接記述されることになる。例えば XHTML 内に SVG 文書片 が記述された XHTML ウェブページ。 In this case, SVG content is embedded inline directly within the parent Web page. An example is an XHTML Web page with an SVG document fragment textually included within the XHTML.
この場合、任意のスタンドアローンな SVG ビューアが利用できる。このビューアは HTML を表示するためのプログラムであってもなくてもよい。この方法は特殊な形式の画像のためによく用いられるものである。 This allows any stand-alone SVG viewer to be used, which can (but need not) be a different program to that used to display HTML. This option typically is used for unusual image formats.
UA が Cascading Style Sheets, Level 2 [CSS2] でスタイル付けされた XML 内容、あるいは Extensible Stylesheet Language [XSL] Formatting Object に対応しており、かつ 適合 SVG ビューア であるならば、 CSS または XSL のプロパティがラスター画像を参照できるところならどこでも、必要に応じて SVG グラフィックを敷き詰めたり透明部分を持つならば背景合成も可能な機能も含め、 SVG リソースを参照できるはずである。 サンプルには CSS と XSL の両方に含まれる background-image ([CSS2], 14.2.1 節) と list-style-image ([CSS2], 12.6.2 節) プロパティの例が収録されている。 When a user agent supports Cascading Style Sheets, Level 2 [CSS2] styled XML content, or Extensible Stylesheet Language [XSL] Formatting Objects, and the user agent is a Conforming SVG Viewer, then that user agent must support the ability to reference SVG resources wherever CSS or XSL properties allow for the referencing of raster images, including the ability to tile SVG graphics wherever necessary and the ability to composite the SVG into the background if it has transparent portions. Examples include the 'background-image' ([CSS2], section 14.2.1) and 'list-style-image' ([CSS2], section 12.6.2) properties that are included in both CSS and XSL.