I SVG ファイルサイズの最小化

この付録は情報を提供するものである。 This appendix is informative.

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) to prevent the need to tessellate 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 content, thus there is no need to convert to outlines.
• SVG には一度定義したシンボルを、異なる視覚属性, 異なる大きさと配置を用いて何度でも参照できる機能が用意されている。 SVG contains a facility for defining symbols once and referencing them multiple times using different visual attributes, different sizing and positioning.

加えて、 HTTP/1.1 はサーバからクライアントへの圧縮データ送信が可能であり [RFC2616] 、結果として多大なファイルサイズの節約となる。 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 [RFC2616]. Here are some sample compression results using gzip compression [RFC1952] on SVG documents:

関連する論点が漸進的描画にもある。一部の 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 ビューアは画像と WebFonts のダウンロードを後回しにして、それらが利用可能になるまで仮の画像とシステムフォントで代用する。 delayed downloading of images and fonts. Just like some HTML browsers, some SVG viewers will download images and WebFonts 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 lacuna values whenever possible rather than defining all attributes and properties explicitly.
• パスデータ のデータ量節約機能の利点を活かす：相対座標の利用, 水平線と垂直線における h, v の利用, 三次および二次ベジェ区分において可能な限り s, t を利用, 余分な空白と区切り文字の削除。 Take advantage of the path 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.