Markup Languages: More Than HTML5 - Web Standards: Mastering HTML5, CSS3, and XML - page 108

SVG
In contrast to raster graphic formats such as GIF, PNG, or JPEG that have been handled by browsers for years, native
support of vector graphics did not appear until the introduction of HTML5. Although the Vector Markup Language
( VML ) and the Precision Graphics Markup Language ( PGML ) appeared in 1998, they were soon followed by Scalable
Vector Graphics ( SVG ) in 1999; however, implementers had to wait for a decade.
SVG is an XML-based markup for describing two-dimensional static and dynamic (animated or interactive)
vector graphics [54]. The first version, SVG 1.0, became a W3C Recommendation in 2001, followed by SVG 1.1 in 2003.
Beyond the full version, SVG also has a Tiny specification and a Basic specification optimized for mobile devices [55].
They are described as profiles of SVG 1.1. SVG Tiny 1.2 became a W3C Recommendation in 2008. The full version
of SVG 1.2 has been stalled in the Working Draft stage and dropped in favor of SVG 2.0, which is a completely new
version with advanced support for HTML5, CSS3, and Web Fonts (Chapter 9). Because of the native SVG support in
(X)HTML5 along with the increasing browser support, the SVG format has gradually gained popularity. 19 Internet
Explorer 9+, Firefox 3.5+, Safari 3.1+, and Opera 9.5+ have native SVG rendering and embedding support and do not
require a plugin for SVG images.

■ The browser support for SVG in modern browsers, which do not require a plug-in for displaying SVG,
is different for each embedding method (inline, via img , via object ) and feature (SVG effects, SVG in SMIL animation,
SVG filters, SVG in CSS background, and SVG fonts).

Caution

Most browsers that support SVG do not render SVG files unless they are served as image/svg+xml . The most
common rendering error with embedded SVG files is that they are served with an incorrect MIME type.
SVG is suitable for logos, graphs, geographical information systems, and so on. The major benefits of the SVG
format can be summarized as follows:

• Accessibility : Images are often magnified by mobile users as well as for the visually impaired.
SVG images are scalable without distortions or quality loss. Moreover, in SVG, text is rendered
as text. Textual equivalents of objects can also be developed.

• Optimal file size : Although it depends on image content complexity, SVG files are generally
smaller in size than their bitmap equivalents.

• Scriptability : All features of SVG images can be manipulated through JavaScript and the DOM.

• Animation : SVG elements and element groups can also be animated without scripting. This
can be achieved by using Synchronized Multimedia Integration Language (SMIL) together
with SVG.

■ SMIL is an XML markup language that defines markup for media synchronization, layout, animations, visual
transitions, and media embedding. It supports presentations with text, images, audio, video, and links to other SMIL
presentations. SMIL is a W3C Recommendation [56].

Note

19 Although it can be used in XHTML 1.x/2.0 too.