付録 J: SVG ファイルサイズの最小化

この付録は参考であって、規定ではない。

XML の恩恵と他の W3C 仕様との互換性と相乗効果を維持しつつ、 SVG ファイルサイズを可能な限り小さくするための少なからぬ努力が注がれている。 Considerable effort has been made to make SVG file sizes as small as possible while still retaining the benefits of XML and achieving compatibility and leverage with other W3C specifications.

ファイルサイズの減量を促すための SVG の特能の一部をここに挙げる： Here are some of the features in SVG that promote small file sizes:

• SVG のパスデータ定義は、ベクターグラフィックスデータのデータストリーム生成においてデータ量が節約されるように定義されている： すべての命令は１文字／ 相対座標が可用／ 区切り文字はトークンが暗黙に特定される場合は不要／ 折れ線に細分化しないで済ませるための曲線（三次ベジェ, 二次ベジェ, 楕円弧）／ 座標の個数を減らすための 三次ベジェ区分, 二次ベジェ区分, 水平と垂直の線区分に対する省略形式。 SVG's path data definition was defined to produce a compact data stream for vector graphics data: all commands are one character in length; relative coordinates are available; separator characters do not have to be supplied when tokens can be identified implicitly; smooth curve formulations are available (cubic Béziers, quadratic Béziers and elliptical arcs) to prevent the need to tesselate into polylines; and shortcut formulations exist for common forms of cubic Bézier segments, quadratic Bézier segments, and horizontal and vertical straight line segments so that the minimum number of coordinates need to be specified.
• テキストは XML 文字データで指定できる — 外形線に変換する必要は無い。 Text can be specified using XML character data — no need to convert to outlines.
• SVG には一度定義したシンボルを、異なる視覚属性，および異なる 大きさ, 位置取り, クリッピング, クライアント側のフィルタ効果，を用いて何度でも参照できる機能が用意されている。 SVG contains a facility for defining symbols once and referencing them multiple times using different visual attributes and different sizing, positioning, clipping and client-side filter effects
• CSS によるスタイル付け をサポートする UA においては、共通して利用される属性の組み合わせは， CSS のセレクタとプロパティ継承を利用して，名前付きのスタイルとして一度定義すれば済む。 User agents that support styling with CSS can use CSS selectors and property inheritance to define commonly used sets of attributes once as named styles.
• フィルタ効果は、少量のベクター／ラスターデータにより，通常は画像作成ツールでしか得られないような印象的な視覚結果／効果を可能にする。 Filter effects allow for compelling visual results and effects typically found only in image-authoring tools using small amounts of vector and/or raster data

更に、 HTTP/1.1 はサーバからクライアントへの圧縮データ送信が可能であり、結果として多大なファイルサイズの節約となる。 SVG 文書に対する gzip 圧縮 [RFC1952] を用いたときのいくつかの圧縮結果のサンプルをここに示す： Additionally, HTTP/1.1 allows for compressed data to be passed from server to client, which can result in significant file size reduction. Here are some sample compression results using gzip compression on SVG documents [RFC1952]:

関連する論点が漸進的描画にある。 一部の SVG ビューアがサポートする： A related issue is progressive rendering. Some SVG viewers will support:

• SVG 文書片の最初の部分を，文書の残り部分がサーバからダウンロード中であっても，表示できる能力。 すなわち、 SVG のファイルサイズが大きくても，利用者は直ちに SVG の絵図を見て，対話できる。 the ability to display the first parts of an SVG document fragments as the remainder of the document is downloaded from the server; thus, the user will see part of the SVG drawing right away and interact with it, even if the SVG file size is large.
• 画像とフォントのダウンロードの遅延。 一部の HTML ブラウザと同様、一部の SVG ビューアは画像と Webフォント ([CSS2], 15.1 節) のダウンロードを後回しにして，それらが可用になるまで仮の画像とシステムフォントで代用する。 delayed downloading of images and fonts. Just like some HTML browsers, some SVG viewers will download images and WebFonts ([CSS2], section 15.1) last, substituting a temporary image and system fonts, respectively, until the given image and/or font is available.

SVG ファイルのサイズ減量および利用者が SVG 文書片と対話できるまでの時間の短縮に利用できる技法をここに挙げる： Here are techniques for minimizing SVG file sizes and minimizing the time before the user is able to start interacting with the SVG document fragments:

• 利用者によるクリックが予想されるリンクを SVG ファイルの最初の方に含めるように SVG ファイルを構成する。 Construct the SVG file such that any links which the user might want to click on are included at the beginning of the SVG file
• すべての属性とプロパティに明示的に値を与える代わりに、可能な限り既定値を利用する。 Use default values whenever possible rather than defining all attributes and properties explicitly.
• パスデータ のデータ量節約機能の利点を活用する： 相対座標の利用／ 水平線と垂直線に対する h や v の利用／ 三次および二次ベジェ区分に対する可能な限りの s や t の利用／ 余分な空白と区切り文字の削除。 Take advantage of the path data data compaction facilities: use relative coordinates; use h and v for horizontal and vertical lines; use s or t for cubic and quadratic Bézier segments whenever possible; eliminate extraneous white space and separators.
• 同じグラフィックが文書に何度も現れるときは、シンボルを利用する。 Utilize symbols if the same graphic appears multiple times in the document
• CSS によるスタイル付け をサポートする UA に対し、 CSS のプロパティ継承とセレクタを利用して，共通して利用されるプロパティを名前付きのスタイルに整理統合したり, あるいはプロパティを親の g 要素にあてがう。 For user agents that support styling with CSS, utilize CSS property inheritance and selectors to consolidate commonly used properties into named styles or to assign the properties to a parent ‘g’ element.
• フィルタ効果を利用して、グラフィック構築の一部をクライアント側グラフィックス処理に任せる Utilize filter effects to help construct graphics via client-side graphics operations.