Appendix G: Minimizing SVG File Sizes
This appendix is informative, not normative.
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 don't have to be supplied when tokens can be
identified implicitly; smooth curve formulations are available
(cubic beziers, quadratic beziers and elliptical arcs) to prevent
the need to tesselate into polylines; and shortcut formulations exist for common
forms of cubic bezier segments, quadratic bezier 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 character data -- no need to convert to
outlines.
- 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
- SVG supports CSS selectors and property inheritance, which allows
commonly used sets of attributes to be defined 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
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:
Uncompressed SVG | With gzip compression | Compression ratio |
30,203 | 8,680 | 71% |
12,563 | 8,048 | 36% |
7,106 | 2,395 | 66% |
6,216 | 2,310 | 63% |
4,381 | 2,198 | 50% |
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 Web fonts 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 default values whenever possible rather than defining all attributes
and properties explicitly.
- 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 bezier segments whenever possible;
eliminate extraneous white space and separators.
- Utilize symbols if the same graphic appears multiple times in the document
- 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.