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.
XML は，構造化された情報を交換するための技術として急速に一般に受け入れられ、幅広い分野で信頼できる実装を持つようになっている。 XML で記述されることにより、 SVG はこの確固とした基盤の上で，国際化のためのしっかりした基礎, 強力な組織化能力, オブジェクトモデル, 等々，多くの利点を得る。 現存するきれいな実装を持つ仕様の下に構築されたことにより、この XML に基づく文法は膨大なリバースエンジニアリングの労力を要することなく，実装側に対して開かれたものになっている。 XML, a 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:
この場合、 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: