Scalable Vector Graphics

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. Overview[edit] This image illustrates the difference between bitmap and vector images. SVG has been in development since 1999 by a group of companies within the W3C after the competing standards Precision Graphics Markup Language (PGML, developed from Adobe's PostScript) and Vector Markup Language (VML, developed from Microsoft's RTF) were submitted to W3C in 1998. Since 2001, the SVG specification has been updated to version 1.1. Work is currently in progress on SVG 2, which incorporates several new features in addition to those of SVG 1.1 and SVG Tiny 1.2. Printing[edit] Scripting and animation[edit] SVG drawings can be dynamic and interactive. Compression[edit] Development history[edit]

Raphaël (JavaScript library) RaphaëlJs Tutorial RaphaëlJs Tutorial Author: Sebastián Gurin Copyright (c) 2012 SEBASTIAN GURIN. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". Read the Full License Text. This is a Raphaël Js tutorial, a tutorial about easy drawing in web pages using the great JavaScript library Raphaël Js. Since this is a JavaScript library tutorial, users should know the basics of JavaScript programming language. Raphaël comes with an nice Reference where all its features are described with examples. The author of this tutorial is also the author of raphael4gwt a Raphaël porting to GWT (Java). For downloading the entire tutorial so you can access all the source code involved you can do: Run Creating a paper

Raphaël Reference Creates a copy of existing animation object with given delay. delay number number of ms to pass between animation start and actual animation Returns: object new altered Animation object Animation.repeat(repeat)⚓➭ Creates a copy of existing animation object with given repetition. repeat number iterations of animation. Element.animate(…)⚓➭ Creates and starts animation for given element. params object final attributes for the element, see also Element.attr ms number of milliseconds for animation to run easing optional string easing type. callback function callback function. or animation animation object, see Raphael.animation Returns: object original element Acts similar to Element.animate, but ensure that given animation runs in sync with another given element. el element to sync with anim animation to sync with easing type. element Sets the attributes of the element. attrName attribute’s name value object of name/value pairs attrNames array in this case method returns array of current values for given attribute names key any