Scalable Vector Graphics (SVG)

Scalable Vector GraphicsScalable Vector Graphics

(SVG)(SVG)

Aug’10 – Dec ’10

Introduction

• Scalable Vector Graphics (SVG), an extremely versatile Scalable Vector Graphics (SVG), an extremely versatile 2-D 2-D graphics formatgraphics format designed primarily for the Web designed primarily for the Web

• This chapter is divided into four sections:This chapter is divided into four sections:

❑ ❑ An An overview of SVGoverview of SVG, what tools are available to the , what tools are available to the developerdeveloper

❑ ❑ A A hands-on section hands-on section demonstrating some of the basics of demonstrating some of the basics of

SVG in code SVG in code examplesexamples

❑ ❑ A simple but A simple but complete browser-based SVG application complete browser-based SVG application constructed using XHTML and SVG, as well as a script constructed using XHTML and SVG, as well as a script manipulating the XML DOMmanipulating the XML DOM

❑ ❑ A summary of the contents of the A summary of the contents of the SVG specificationSVG specification

Aug’10 – Dec ’10

What Is SVG?What Is SVG?

a language for creating graphical documentsa language for creating graphical documents can be generated and processed using standard XML toolscan be generated and processed using standard XML tools documents can be viewed in browsers with the appropriatedocuments can be viewed in browsers with the appropriate

plug-inplug-in animation and scripting capabilitiesanimation and scripting capabilities sophisticated graphic filtering, processing, and geometrysophisticated graphic filtering, processing, and geometry a dominant format on mobile phones and browsersa dominant format on mobile phones and browsers current version of SVG is 1.current version of SVG is 1. The SVG specification is available atThe SVG specification is available at

www.w3.org/TR/SVG/.

Aug’10 – Dec ’10

Scalable, Vector, GraphicsScalable, Vector, Graphics

JPEG and GIF – bitmapped format – pixel by pixel (unlike JPEG and GIF – bitmapped format – pixel by pixel (unlike SVG)SVG) SVG - defines how images should be drawn using a series of SVG - defines how images should be drawn using a series of statements.statements. Several advantages: Several advantages:

1.1. SVG image files - SVG image files - significantly smaller in sizesignificantly smaller in size

2.2. an image can be treated as an image can be treated as separate objects separate objects and and manipulated independentlymanipulated independently

3.3.vector graphic images can easily be vector graphic images can easily be resizedresized – “ – “scalablescalable” – ” – suitable for mobile phonessuitable for mobile phones

4.4. XSLT, DOM, interoperability – availble for use – true XML!XSLT, DOM, interoperability – availble for use – true XML!

5.5. SVG has a SVG has a powerful scriptingpowerful scripting facility built in! facility built in!

Aug’10 – Dec ’10

Putting SVG to WorkPutting SVG to Work

Uses of SVG – 3 categories:Uses of SVG – 3 categories:

1.1. Static graphics renderingStatic graphics rendering—to define a fixed image – —to define a fixed image – ““vector-based”vector-based”

2.2. Self-contained applications— Self-contained applications— animation and scripting animation and scripting capabilities of SVG are used to provide dynamic, interactive capabilities of SVG are used to provide dynamic, interactive graphics. OPEN standard! Works with XHTML, Ajax… to build graphics. OPEN standard! Works with XHTML, Ajax… to build secure appssecure apps

3.3. Server-based applications— Server-based applications— SVG provides the front end SVG provides the front end for bigger and more complex systemsfor bigger and more complex systems

ex: GIS – produce maps on-the-fly based on client ex: GIS – produce maps on-the-fly based on client requestsrequests

Aug’10 – Dec ’10

An SVG ToolkitAn SVG Toolkit-Viewer (SVG enabled browser)Viewer (SVG enabled browser)

Firefox, Opera, Konqueror, or SafariFirefox, Opera, Konqueror, or Safari or or IE+Adobe plug-inIE+Adobe plug-in BatikBatik, the Java toolkit for SVG – “, the Java toolkit for SVG – “SquiggleSquiggle” provides useful error ” provides useful error

messagesmessages Adobe PDFs allow for embedded SVG – “Mars project” for XML-based Adobe PDFs allow for embedded SVG – “Mars project” for XML-based

print formatsprint formats

--EditorEditor text editor is certainly adequatetext editor is certainly adequate SVG Validator - SVG Validator - http://jiggles.w3.org/svgvalidator AmayaAmaya, a combined web browser and editor with support for SVG, a combined web browser and editor with support for SVG XMLSpy, CodeplotXMLSpy, Codeplot

-Programming Tools-Programming Tools self-contained SVG applications - any JavaScript editor, jEdit, self-contained SVG applications - any JavaScript editor, jEdit, syntax syntax

highlightinghighlighting SVG-specific programming libraries- librsvg, CPAN, SVGDraw, SVG#SVG-specific programming libraries- librsvg, CPAN, SVGDraw, SVG# Apache Batik Apache Batik Dojo Toolkit - to build crossbrowser Ajax applicationsDojo Toolkit - to build crossbrowser Ajax applications

Aug’10 – Dec ’10

Getting StartedGetting Started

<?xml version=”1.0”?><?xml version=”1.0”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”

““http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”><svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”>

<rect x=”100” y=”10” width=”100” height=”100” fill=”green” /><rect x=”100” y=”10” width=”100” height=”100” fill=”green” />

</svg></svg>

<svg> <svg> element clearly marks the boundaries of the SVG materialelement clearly marks the boundaries of the SVG material <rect> <rect> element defines a rectangle, with its attributeselement defines a rectangle, with its attributes fill fill attributeattribute x, y x, y – measured from top left– measured from top left

Aug’10 – Dec ’10

Steps: install an SVG viewerinstall an SVG viewer Open a text editor and type in the following codeOpen a text editor and type in the following code

<?xml version=”1.0”?><?xml version=”1.0”?>




<rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” <rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” stroke-width=”10” />stroke-width=”10” />

<line x1=”10” y1=”10” x2=”90” y2=”90” <line x1=”10” y1=”10” x2=”90” y2=”90” stroke=”green” stroke-stroke=”green” stroke-width=”4” />width=”4” />

<circle cx=”50” cy=”50” r=”30” fill=”red” /><circle cx=”50” cy=”50” r=”30” fill=”red” />

</svg></svg>

Save as shapes.svgSave as shapes.svg Open shapes.svg in your viewerOpen shapes.svg in your viewer

Aug’10 – Dec ’10

O/P OF THE CODE

Aug’10 – Dec ’10

Views and UnitsViews and Units

relative units, absolute units, or percentagesrelative units, absolute units, or percentages eight kinds of absolute units in SVG:eight kinds of absolute units in SVG:❑ ❑ em to measure units using em to measure units using font heightfont height

❑ ❑ px to measure units using px to measure units using pixelspixels

❑ ❑ pt to measure units using pt to measure units using points (often used in graphic design and points (often used in graphic design and publishing)publishing)

❑ ❑ pc to measure units using pc to measure units using picas (often used in graphic design and picas (often used in graphic design and publishing)publishing)

❑ ❑ cm to measure units using cm to measure units using centimeterscentimeters

❑ ❑ mm to measure units using mm to measure units using millimetersmillimeters

❑ ❑ in to measure units using in to measure units using inchesinches

<rect x=”1” y=”1” width=”2in” height=”2in”<rect x=”1” y=”1” width=”2in” height=”2in”

fill=”none” stroke=”blue” stroke-width=”10” />fill=”none” stroke=”blue” stroke-width=”10” />

the root <svg> element is considered a view and can be customized using the root <svg> element is considered a view and can be customized using the width, height, and viewBox attributesthe width, height, and viewBox attributes

Aug’10 – Dec ’10

The Painter’s ModelThe Painter’s Model The order in which the elements appear is significant – it is The order in which the elements appear is significant – it is the order in which visual objects are rendered: the order in which visual objects are rendered: painter’s painter’s modelmodel


<line x1=”10” y1=”10” x2=”90” y2=”90”<line x1=”10” y1=”10” x2=”90” y2=”90”

stroke=”green” stroke-width=”4” />stroke=”green” stroke-width=”4” />

<rect x=”1” y=”1” width=”100” height=”100”<rect x=”1” y=”1” width=”100” height=”100”

fill=”none” stroke=”blue” stroke-width=”10” />fill=”none” stroke=”blue” stroke-width=”10” /> Notice the difference: Notice the difference:

Aug’10 – Dec ’10

GroupingGrouping <g> element <g> element enables you to group related elementsenables you to group related elements helps if u want elements to share propertieshelps if u want elements to share properties

<g stroke=”green” stroke-width=”4”><g stroke=”green” stroke-width=”4”>


<line x1=”10” y1=”10” x2=”90” y2=”90” /><line x1=”10” y1=”10” x2=”90” y2=”90” />

</g></g>

TransformationsTransformations transform attribute transform attribute enables modification of a shape or set enables modification of a shape or set of shapes defined in a groupof shapes defined in a group

❑ ❑ translatetranslate displays the shapes shifted vertically or horizontally by displays the shapes shifted vertically or horizontally by specified distances.specified distances.

❑ ❑ rotaterotate rotates the shapes by a given angle around the origin or a rotates the shapes by a given angle around the origin or a specified point.specified point.

❑ ❑ scalescale makes the shapes larger or smaller by a specified ratio. makes the shapes larger or smaller by a specified ratio.

❑ ❑ skewXskewX leans the shapes along the x-axis. leans the shapes along the x-axis.

❑ ❑ skewYskewY leans the shapes along the y-axis leans the shapes along the y-axis

<rect x=”1” y=”1” width=”100” height=”100” fill=”none” <rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” stroke-width=”10” transform=”translate(100,100) stroke=”blue” stroke-width=”10” transform=”translate(100,100) rotate(45)”/>rotate(45)”/>

Aug’10 – Dec ’10

Transform continued…

<rect x=”1” y=”1” width=”100” height=”100” fill=”none” <rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” stroke-width=”10” stroke=”blue” stroke-width=”10” transform=”translate(100,100) rotate(45)”/>transform=”translate(100,100) rotate(45)”/>

The transform attribute actually modifies the coordinate The transform attribute actually modifies the coordinate space of the element and its children elementsspace of the element and its children elements used with <g> usuallyused with <g> usually

Aug’10 – Dec ’10

PathsPaths An SVG An SVG <path> element <path> element describes the behavior of a describes the behavior of a virtual penvirtual pen, which can be used to create practically any , which can be used to create practically any shape you like.shape you like. can draw straight-line segments and curvescan draw straight-line segments and curves can move the pen with or w/o drawingcan move the pen with or w/o drawing

<line x1=”10” y1=”10” x2=”90” y2=”90” stroke=”green” <line x1=”10” y1=”10” x2=”90” y2=”90” stroke=”green” stroke-width=”4” />stroke-width=”4” />

<<path d=”M 10,10 L 90,90” path d=”M 10,10 L 90,90” stroke=”green” stroke-stroke=”green” stroke-width=”4” />width=”4” />

Inside the d attribute is the Inside the d attribute is the path path datadata M –move the virtual pen to (10,10)M –move the virtual pen to (10,10) L – draw line from current point to abs pt (90,90)L – draw line from current point to abs pt (90,90) Path commands are Path commands are case sensitivecase sensitive Uppercase letters (L, M, and so on) – abs co-ordinatesUppercase letters (L, M, and so on) – abs co-ordinates Lowercase lettters (l,m,….) – relative co-ordinatesLowercase lettters (l,m,….) – relative co-ordinates

Aug’10 – Dec ’10 0

Commands that can appear in paths

Aug’10 – Dec ’10

drawback : drawback : difficult to write the code manually and make sense of existing difficult to write the code manually and make sense of existing codecode

<path d=”M1 1L1 100L100 100L100 1z M10 10l80 80M30 70.7a30 30 1 1 1 1 <path d=”M1 1L1 100L100 100L100 1z M10 10l80 80M30 70.7a30 30 1 1 1 1 1”1” stroke=”pink” stroke-width=”5” /> stroke=”pink” stroke-width=”5” />

Aug’10 – Dec ’10

ImagesImages

<svg version=”1.1”<svg version=”1.1”

xmlns=”http://www.w3.org/2000/svg”xmlns=”http://www.w3.org/2000/svg”

xmlns:xlink=”http://www.w3.org/1999/xlink”>xmlns:xlink=”http://www.w3.org/1999/xlink”>


fill=”yellow” stroke=”green” stroke-width=”4” />fill=”yellow” stroke=”green” stroke-width=”4” />

<image xlink:href=”http://www.jpeg.org/images/flag_fr.jpg”<image xlink:href=”http://www.jpeg.org/images/flag_fr.jpg”

type=”image/jpeg” x=”20” y=”20” width=”100” height=”100” />type=”image/jpeg” x=”20” y=”20” width=”100” height=”100” />

</svg></svg>

Aug’10 – Dec ’10

TextText text in SVG is that it is text in SVG is that it is real textreal text In SVG, text is a In SVG, text is a first-class citizen first-class citizen – can copy from – can copy from graphics, read text from src code and modify DOM treegraphics, read text from src code and modify DOM tree support for almost all languagessupport for almost all languages

<svg version=”1.1” xmlns=”http://www.w3.org/2000/svg”><svg version=”1.1” xmlns=”http://www.w3.org/2000/svg”>


fill=”yellow” stroke=”green” stroke-width=”4” />fill=”yellow” stroke=”green” stroke-width=”4” />

<<texttext x=”15” y=”70” font-size=”20” fill=”red”>SVG is XML</ x=”15” y=”70” font-size=”20” fill=”red”>SVG is XML</texttext>>

</svg></svg>

Aug’10 – Dec ’10

Comments, Annotation, and MetadataComments, Annotation, and Metadata

<svg version=”1.1” xmlns=”http://www.w3.org/2000/svg”><svg version=”1.1” xmlns=”http://www.w3.org/2000/svg”>



<title>This is the title of the document</title><title>This is the title of the document</title>

<desc>This is the description of the document</desc><desc>This is the description of the document</desc>

<circle cx=”60” cy=”60” r=”50” fill=”red”><circle cx=”60” cy=”60” r=”50” fill=”red”>

<title>This is a circle</title><title>This is a circle</title>

<desc>The color is red.</desc><desc>The color is red.</desc>

</circle></circle>

<g><g>

<title>This is a collection of squares</title><title>This is a collection of squares</title>

<desc>The squares are arranged in a grid.</desc><desc>The squares are arranged in a grid.</desc>

<rect x=”45” y=”45” width=”10” height=”10” /><rect x=”45” y=”45” width=”10” height=”10” />




</g></g>

</svg></svg>

<title>, <desc>, <metadata> tags<title>, <desc>, <metadata> tags

Aug’10 – Dec ’10

the document title (“This is the title of the document”) - in the title barthe document title (“This is the title of the document”) - in the title bar if the mouse pointer is over an element, or part of a group - <title> or if the mouse pointer is over an element, or part of a group - <title> or <desc> text may be displayed<desc> text may be displayed <metadata<metadata> element allows more > element allows more complex machine-readable data complex machine-readable data to to be included in the documentbe included in the document features of SVG make it particularly good for communication (zoom features of SVG make it particularly good for communication (zoom for those with poor vision, <desc> for text to speech screen readers)for those with poor vision, <desc> for text to speech screen readers)

Aug’10 – Dec ’10

ScriptingScripting ECMAScript, international standard version of JavaScriptECMAScript, international standard version of JavaScript SVG object modelSVG object model not all browsers provide support for SVG scriptingnot all browsers provide support for SVG scripting

<?xml version=”1.0” standalone=”no”?><?xml version=”1.0” standalone=”no”?>




<<polygonpolygon points=”150,100, 50,100 100,29.3” fill=”green” points=”150,100, 50,100 100,29.3” fill=”green”

onclick=”handleClick(evt)” />onclick=”handleClick(evt)” />

<script type=”text/ecmascript”><script type=”text/ecmascript”>

<![CDATA[<![CDATA[

function handleClick(evt) {function handleClick(evt) {

var polygon = evt.target;var polygon = evt.target;

polygon.setAttribute(“fill”, “red”);polygon.setAttribute(“fill”, “red”);

}}

]]>]]>

</script></script>

</svg></svg>

Aug’10 – Dec ’10

SVG on Your WebsiteSVG on Your Website

two ways to give the browser a hint about SVG content:two ways to give the browser a hint about SVG content:❑ ❑ Give the file an appropriate extension—.svg for regular SVG Give the file an appropriate extension—.svg for regular SVG

files and .svgz for gzip compressed files.files and .svgz for gzip compressed files.

❑ ❑ Most important, ensure that the web server delivers the Most important, ensure that the web server delivers the document with the right MIME typedocument with the right MIME type. .

Apache-based services: Apache-based services: create a file called .htaccess (note the initial dot) in the top-create a file called .htaccess (note the initial dot) in the top-level directory, below which your SVG files appear, and enter level directory, below which your SVG files appear, and enter the following text:the following text:

AddType image/svg+xml svgAddType image/svg+xml svg

AddType image/svg+xml svgzAddType image/svg+xml svgz

AddEncoding gzip svgzAddEncoding gzip svgz

download tool such as download tool such as wget – to check wget – to check what the MIME type is.what the MIME type is. for SVG it is : image/svg+xmlfor SVG it is : image/svg+xml

Aug’10 – Dec ’10

The SVG Specification

1.1. IntroductionIntroduction

2.2. ConceptsConcepts

3.3. Rendering ModelRendering Model

4.4. Basic Data Types and InterfacesBasic Data Types and Interfaces

5.5. Document StructureDocument Structure

6.6. StylingStyling

7.7. Coordinate Systems, Transformations and UnitsCoordinate Systems, Transformations and Units

8.8. PathsPaths

9.9. Basic ShapesBasic Shapes

10.10. TextText

11.11. Painting: Filling, Stroking, and Marker SymbolsPainting: Filling, Stroking, and Marker Symbols

12.12. ColorColor

13.13. Gradients and PatternsGradients and Patterns

Aug’10 – Dec ’10

SVG Spec Contd..

14.14. Clipping, Masking, and CompositingClipping, Masking, and Compositing

15.15. Filter effectsFilter effects

16.16. InteractivityInteractivity

17.17. LinkingLinking

18.18. ScriptingScripting

19.19. AnimationAnimation

20.20. FontsFonts

21.21. Meta DataMeta Data

22.22. Backward compatibilityBackward compatibility

23.23. ExtensibilityExtensibility

Aug’10 – Dec ’10

Scalable Vector Graphics (SVG)

Documents

Transcript of Scalable Vector Graphics (SVG)