Scalable Vector Graphics (SVG) Aug’10 – Dec ’10

Introduction Scalable Vector Graphics (SVG), an extremely versatile 2-D graphics format designed primarily for the Web Scalable Vector Graphics (SVG), an extremely versatile 2-D graphics format designed primarily for the Web This chapter is divided into four sections: This chapter is divided into four sections: ❑ An overview of SVG, what tools are available to the developer ❑ A hands-on section demonstrating some of the basics of SVG in code examples ❑ A simple but complete browser-based SVG application constructed using XHTML and SVG, as well as a script manipulating the XML DOM ❑ A summary of the contents of the SVG specification Aug’10 – Dec ’10

What Is SVG?  a language for creating graphical documents  can be generated and processed using standard XML tools  documents can be viewed in browsers with the appropriate plug-in  animation and scripting capabilities  sophisticated graphic filtering, processing, and geometry  a dominant format on mobile phones and browsers  current version of SVG is 1.  The SVG specification is available at Aug’10 – Dec ’10

Scalable, Vector, Graphics  JPEG and GIF – bitmapped format – pixel by pixel (unlike SVG)  SVG - defines how images should be drawn using a series of statements.  Several advantages: 1. SVG image files - significantly smaller in size 2. an image can be treated as separate objects and manipulated independently 3. vector graphic images can easily be resized – “scalable” – suitable for mobile phones 4. XSLT, DOM, interoperability – availble for use – true XML! 5. SVG has a powerful scripting facility built in! Aug’10 – Dec ’10

Putting SVG to Work Uses of SVG – 3 categories: 1. Static graphics rendering—to define a fixed image – “vector-based” 2. Self-contained applications— animation and scripting capabilities of SVG are used to provide dynamic, interactive graphics. OPEN standard! Works with XHTML, Ajax… to build secure apps 3. Server-based applications— SVG provides the front end for bigger and more complex systems ex: GIS – produce maps on-the-fly based on client requests Aug’10 – Dec ’10

An SVG Toolkit - Viewer (SVG enabled browser)  Firefox, Opera, Konqueror, or Safari or IE+Adobe plug-in  Batik, the Java toolkit for SVG – “Squiggle” provides useful error messages  Adobe PDFs allow for embedded SVG – “Mars project” for XML-based print formats -Editor  text editor is certainly adequate  SVG Validator  Amaya, a combined web browser and editor with support for SVG  XMLSpy, Codeplot -Programming Tools  self-contained SVG applications - any JavaScript editor, jEdit, syntax highlighting  SVG-specific programming libraries- librsvg, CPAN, SVGDraw, SVG#  Apache Batik  Dojo Toolkit - to build crossbrowser Ajax applications Aug’10 – Dec ’10

Getting Started <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “ </svg>  element clearly marks the boundaries of the SVG material  element defines a rectangle, with its attributes  fill attribute  x, y – measured from top left Aug’10 – Dec ’10

Steps:  install an SVG viewer  Open a text editor and type in the following code <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “   </svg>  Save as shapes.svg  Open shapes.svg in your viewer Aug’10 – Dec ’10

O/P OF THE CODE Aug’10 – Dec ’10

Views and Units  relative units, absolute units, or percentages  eight kinds of absolute units in SVG: ❑ em to measure units using font height ❑ px to measure units using pixels ❑ pt to measure units using points (often used in graphic design and publishing) ❑ pc to measure units using picas (often used in graphic design and publishing) ❑ cm to measure units using centimeters ❑ mm to measure units using millimeters ❑ in to measure units using inches <rect x=”1” y=”1” width=”2in” height=”2in” fill=”none” stroke=”blue” stroke-width=”10” />  the root element is considered a view and can be customized using the width, height, and viewBox attributes Aug’10 – Dec ’10

The Painter’s Model  The order in which the elements appear is significant – it is the order in which visual objects are rendered: painter’s model <line x1=”10” y1=”10” x2=”90” y2=”90” stroke=”green” stroke-width=”4” /> <rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” stroke-width=”10” /> Notice the difference: Notice the difference: Aug’10 – Dec ’10

Grouping  element enables you to group related elements  helps if u want elements to share properties </g>Transformations  transform attribute enables modification of a shape or set of shapes defined in a group ❑ translate displays the shapes shifted vertically or horizontally by specified distances. ❑ rotate rotates the shapes by a given angle around the origin or a specified point. ❑ scale makes the shapes larger or smaller by a specified ratio. ❑ skewX leans the shapes along the x-axis. ❑ skewY leans the shapes along the y-axis Aug’10 – Dec ’10

Transform continued…  The transform attribute actually modifies the coordinate space of the element and its children elements  used with usually Aug’10 – Dec ’10

Paths  An SVG element describes the behavior of a virtual pen, which can be used to create practically any shape you like.  can draw straight-line segments and curves  can move the pen with or w/o drawing  Inside the d attribute is the path data  M –move the virtual pen to (10,10)  L – draw line from current point to abs pt (90,90)  Path commands are case sensitive  Uppercase letters (L, M, and so on) – abs co-ordinates  Lowercase lettters (l,m,….) – relative co-ordinates Aug’10 – Dec ’10 0

Commands that can appear in paths Aug’10 – Dec ’10

 drawback : difficult to write the code manually and make sense of existing code Aug’10 – Dec ’10

Images <svg version=”1.1” xmlns=” <rect x=”10” y=”10” width=”120” height=”120” fill=”yellow” stroke=”green” stroke-width=”4” /> <image xlink:href=” type=”image/jpeg” x=”20” y=”20” width=”100” height=”100” /> </svg> Aug’10 – Dec ’10

Text  text in SVG is that it is real text  In SVG, text is a first-class citizen – can copy from graphics, read text from src code and modify DOM tree  support for almost all languages <rect x=”10” y=”10” width=”120” height=”120” fill=”yellow” stroke=”green” stroke-width=”4” /> SVG is XML SVG is XML </svg> Aug’10 – Dec ’10

Comments, Annotation, and Metadata This is the title of the document This is the title of the document This is the description of the document This is the description of the document This is a circle This is a circle The color is red. The color is red. </circle><g> This is a collection of squares This is a collection of squares The squares are arranged in a grid. The squares are arranged in a grid. </g></svg> ,, tags Aug’10 – Dec ’10

 the 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 - or text may be displayed  element allows more complex machine-readable data to be included in the document  features of SVG make it particularly good for communication (zoom for those with poor vision, for text to speech screen readers) Aug’10 – Dec ’10

Scripting  ECMAScript, international standard version of JavaScript  SVG object model  not all browsers provide support for SVG scripting <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “ <polygon points=”150,100, 50, ,29.3” fill=”green” onclick=”handleClick(evt)” /> <![CDATA[ function handleClick(evt) { var polygon = evt.target; polygon.setAttribute(“fill”, “red”); }]]></script></svg> Aug’10 – Dec ’10

SVG on Your Website  two ways to give the browser a hint about SVG content: ❑ Give the file an appropriate extension—.svg for regular SVG files and.svgz for gzip compressed files. ❑ Most important, ensure that the web server delivers the document with the right MIME type. Apache-based services: create a file called.htaccess (note the initial dot) in the top- level directory, below which your SVG files appear, and enter the following text: AddType image/svg+xml svg AddType image/svg+xml svgz AddEncoding gzip svgz  download tool such as wget – to check what the MIME type is.  for SVG it is : image/svg+xml Aug’10 – Dec ’10

The SVG Specification 1. Introduction 2. Concepts 3. Rendering Model 4. Basic Data Types and Interfaces 5. Document Structure 6. Styling 7. Coordinate Systems, Transformations and Units 8. Paths 9. Basic Shapes 10. Text 11. Painting: Filling, Stroking, and Marker Symbols 12. Color 13. Gradients and Patterns Aug’10 – Dec ’10

SVG Spec Contd Clipping, Masking, and Compositing 15. Filter effects 16. Interactivity 17. Linking 18. Scripting 19. Animation 20. Fonts 21. Meta Data 22. Backward compatibility 23. Extensibility Aug’10 – Dec ’10