I Minimizing SVG File Sizes

This appendix is informative.

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.

Here are some of the features in SVG that promote small file sizes:

• 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.
• Text can be specified using XML content, thus there is no need to convert to outlines.
• SVG contains a facility for defining symbols once and referencing them multiple times using different visual attributes, different sizing and positioning.

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:

A related issue is progressive rendering. Some SVG viewers will support:

• 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.
• 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.

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:

• 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.
• 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.
• 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.