SVG animation
Encyclopedia
Animation of Scalable Vector Graphics
Scalable Vector Graphics
Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic . The SVG specification is an open standard that has been under development by the World Wide Web Consortium since 1999.SVG images and their...
, an open XML
XML
Extensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
-based standard vector graphics
Vector graphics
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon, which are all based on mathematical expressions, to represent images in computer graphics...
format, is possible through various means:
- ScriptingClient-side scriptingClient-side scripting generally refers to the class of computer programs on the web that are executed client-side, by the user's web browser, instead of server-side...
: ECMAScriptECMAScriptECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.- History :JavaScript...
is a primary means of creating animations and interactive user interfaces within SVG. - Styling: Since 2008, the development of CSS AnimationsCSS AnimationsCSS Animations is a proposed module for Cascading Style Sheets that allows for the animation of XML elements using CSS.- History :While the pseudo-class :hover has been used to generate rudimentary animations for years, extensions of CSS into the realm of animation were minimal until the late 2000s...
as a feature in WebKitWebKitWebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...
has made possible stylesheet-driven implicit animation of SVG files from within the Document Object ModelDocument Object ModelThe Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
(DOM). - SMIL: Synchronized Multimedia Integration Language, a recommended means of animating SVG-based hypermediaHypermediaHypermedia is a computer-based information retrieval system that enables a user to gain or provide access to texts, audio and video recordings, photographs and computer graphics related to a particular subject.Hypermedia is a term created by Ted Nelson....
is currently supported by the SafariSafari (web browser)Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
, OperaOpera (web browser)Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
, Mozilla FirefoxMozilla FirefoxMozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...
, Google ChromeGoogle ChromeGoogle Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
and AmayaAmaya (web browser)Amaya is a free and open source WYSIWYG web authoring tool with browsing abilities, created by a structured editor project at the INRIA, a French national research institution, and later adopted by the World Wide Web Consortium . Amaya is used as a testbed for web standards and replaced the Arena...
web browserWeb browserA web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s, as will any browser that aims to pass the Acid3Acid3Acid3 test is a web test page from the Web Standards Project that checks a web browser's compliance with elements of various web standards, particularly the Document Object Model and JavaScript....
web standardsWeb standardsWeb standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites,...
test as this requires SMIL support for tests 75 and 76. Libraries have also been written as a shim to give current SVG-enabled browsers SMIL support. This method is also known as SVG+Time.
As of 2010, numerous layout engines and web rendering frameworks, including WebKit (Safari, Chrome), KSVG (Konqueror
Konqueror
Not to be confused with the Conqueror web browser.Konqueror is a web browser and file manager that provides file-viewer functionality for file systems such as local files, files on a remote ftp server and files in a disk image. It is a core part of the KDE desktop environment...
), Gecko
Gecko (layout engine)
Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....
(Mozilla Firefox) and Presto
Presto (layout engine)
Presto is the layout engine for later versions of the Opera web browser . After several public betas and technical previews, it was released on January 28, 2003 in Opera 7 for Windows, and as of Opera 11 it is still in use. Presto is dynamic: the page or parts of it can be re-rendered in response...
(Opera) support animation of SVG to various levels.
Because SVG supports PNG and JPEG
JPEG
In computing, JPEG . The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality....
raster images, it can be used to animate such images as an alternative to APNG
APNG
The Animated Portable Network Graphics file format is an unofficial extension to the Portable Network Graphics specification. It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs...
and Multiple-image Network Graphics.
See also
- Flash animation
- CSS AnimationsCSS AnimationsCSS Animations is a proposed module for Cascading Style Sheets that allows for the animation of XML elements using CSS.- History :While the pseudo-class :hover has been used to generate rudimentary animations for years, extensions of CSS into the realm of animation were minimal until the late 2000s...
