1 / 24

Scalable Vector Graphics (SVG)

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 This chapter is divided into four sections:

odette-albert
Download Presentation

Scalable Vector Graphics (SVG)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Introduction Scalable Vector Graphics (SVG), an extremely versatile 2-D graphics format designed primarily for the Web 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

  3. 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 www.w3.org/TR/SVG/. Aug’10 – Dec ’10

  4. 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: SVG image files - significantly smaller in size an image can be treated as separate objects and manipulated independently vector graphic images can easily be resized – “scalable” – suitable for mobile phones XSLT, DOM, interoperability – availble for use – true XML! SVG has a powerful scripting facility built in! Aug’10 – Dec ’10

  5. Putting SVG to Work Uses of SVG – 3 categories: Static graphics rendering—to define a fixed image – “vector-based” 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 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

  6. 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 - http://jiggles.w3.org/svgvalidator 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

  7. Getting Started <?xml version=”1.0”?> <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svgxmlns=”http://www.w3.org/2000/svg” version=”1.1”> <rect x=”100” y=”10” width=”100” height=”100” fill=”green” /> </svg> <svg> element clearly marks the boundaries of the SVG material <rect> element defines a rectangle, with its attributes fill attribute x, y – measured from top left Aug’10 – Dec ’10

  8. Steps: install an SVG viewer Open a text editor and type in the following code <?xml version=”1.0”?> <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svgxmlns=”http://www.w3.org/2000/svg” version=”1.1”> <rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” stroke-width=”10” /> <line x1=”10” y1=”10” x2=”90” y2=”90” stroke=”green” stroke-width=”4” /> <circlecx=”50” cy=”50” r=”30” fill=”red” /> </svg> Save as shapes.svg Open shapes.svg in your viewer Aug’10 – Dec ’10

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

  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 <svg> element is considered a view and can be customized using the width, height, and viewBox attributes Aug’10 – Dec ’10

  11. 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 <circlecx=”50” cy=”50” r=”30” fill=”red” /> <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: Aug’10 – Dec ’10

  12. Grouping <g> element enables you to group related elements helps if u want elements to share properties <g stroke=”green” stroke-width=”4”> <circlecx=”50” cy=”50” r=”30” fill=”red” /> <line x1=”10” y1=”10” x2=”90” y2=”90” /> </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 <rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” stroke-width=”10” transform=”translate(100,100) rotate(45)”/> Aug’10 – Dec ’10

  13. Transform continued… <rect x=”1” y=”1” width=”100” height=”100” fill=”none” stroke=”blue” stroke-width=”10” transform=”translate(100,100) rotate(45)”/> The transform attribute actually modifies the coordinate space of the element and its children elements used with <g> usually Aug’10 – Dec ’10

  14. Paths An SVG <path> 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 <line x1=”10” y1=”10” x2=”90” y2=”90” stroke=”green” stroke-width=”4” /> <path d=”M 10,10 L 90,90” stroke=”green” stroke-width=”4” /> 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

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

  16. drawback : difficult to write the code manually and make sense of existing code <path d=”M1 1L1 100L100 100L100 1z M10 10l80 80M30 70.7a30 30 1 1 1 1 1” stroke=”pink” stroke-width=”5” /> Aug’10 – Dec ’10

  17. Images <svg version=”1.1” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> <rect x=”10” y=”10” width=”120” height=”120” fill=”yellow” stroke=”green” stroke-width=”4” /> <image xlink:href=”http://www.jpeg.org/images/flag_fr.jpg” type=”image/jpeg” x=”20” y=”20” width=”100” height=”100” /> </svg> Aug’10 – Dec ’10

  18. 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 <svg version=”1.1” xmlns=”http://www.w3.org/2000/svg”> <rect x=”10” y=”10” width=”120” height=”120” fill=”yellow” stroke=”green” stroke-width=”4” /> <text x=”15” y=”70” font-size=”20” fill=”red”>SVG is XML</text> </svg> Aug’10 – Dec ’10

  19. Comments, Annotation, and Metadata <svg version=”1.1” xmlns=”http://www.w3.org/2000/svg”> <!-- This is an XML comment --> <title>This is the title of the document</title> <desc>This is the description of the document</desc> <circlecx=”60” cy=”60” r=”50” fill=”red”> <title>This is a circle</title> <desc>The color is red.</desc> </circle> <g> <title>This is a collection of squares</title> <desc>The squares are arranged in a grid.</desc> <rect x=”45” y=”45” width=”10” height=”10” /> <rect x=”65” y=”45” width=”10” height=”10” /> <rect x=”45” y=”65” width=”10” height=”10” /> <rect x=”65” y=”65” width=”10” height=”10” /> </g> </svg> <title>, <desc>, <metadata> tags Aug’10 – Dec ’10

  20. 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 - <title> or <desc> text may be displayed <metadata> 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, <desc> for text to speech screen readers) Aug’10 – Dec ’10

  21. Scripting ECMAScript, international standard version of JavaScript SVG object model not all browsers provide support for SVG scripting <?xml version=”1.0” standalone=”no”?> <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svgxmlns=”http://www.w3.org/2000/svg” version=”1.1”> <polygon points=”150,100, 50,100 100,29.3” fill=”green” onclick=”handleClick(evt)” /> <script type=”text/ecmascript”> <![CDATA[ function handleClick(evt) { var polygon = evt.target; polygon.setAttribute(“fill”, “red”); } ]]> </script> </svg> Aug’10 – Dec ’10

  22. 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+xmlsvg AddType image/svg+xmlsvgz AddEncodinggzipsvgz download tool such as wget – to check what the MIME type is. for SVG it is : image/svg+xml Aug’10 – Dec ’10

  23. The SVG Specification Introduction Concepts Rendering Model Basic Data Types and Interfaces Document Structure Styling Coordinate Systems, Transformations and Units Paths Basic Shapes Text Painting: Filling, Stroking, and Marker Symbols Color Gradients and Patterns Aug’10 – Dec ’10

  24. SVG Spec Contd.. Clipping, Masking, and Compositing Filter effects Interactivity Linking Scripting Animation Fonts Meta Data Backward compatibility Extensibility Aug’10 – Dec ’10

More Related