1. McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. SVG Ellen Pearlman Eileen Mullin Programming the Web Using XML

2. 11-2 Learning Objectives 1.The benefits of using SVG 2.Creating and rendering an image in the SVG Viewer 3.Investigating the basic SVG Syntax 4.Creating and styling basic shapes 5.Validating SVG and CSS

3. 11-3 Introduction to SVG Referencing specific mathematical algorithms to draw images in real time on a viewing screen creates an SVG image. This means these images can scale in real time and thus can be used in real time for different devices. The issue of creating two-dimensional images on the web that renders the same on all browsers, and conceivably all devices is problematic for designers and developers.

4. 11-4 Limitations of Raster Images Currently images on the Web and most display devices are bitmapped graphics (also referred to as raster) images. These images are composed of thousands of pixels that carry information about color, almost like the dots that make up newspaper images, except much smaller. The images do not compress very well in terms of how much information they must display and there is a constant tradeoff between download time and image quality.

5. 11-5 How SVG Works SVG, which is based on a mathematical formula and coordinate system, is not constrained by pixel size. Using an internal, preset graph, vectors plot a series of coordinate points and instruct browsers on how to render these points as an image by using straight lines, and curves through the use of paths. SVG also works with different basic shapes, and can have many special effects and filters. Because SVG is derived from XML it enjoys all the advantages of XML like portability and cross-platform compatibility.

6. 11-6 Vector vs. Bitmapped Graphics SVG Not resolution dependent Does not lose resolution upon zooming image Keeps file size small and has a quick load time Bitmapped Resolution dependent with fixed number of pixels Loses resolution upon zooming image File size over 50 kb can be problematic with slow load time

7. 11-7 Advantages of SVG It is part of the official standard at W3C and therefore compatible with all XML standards It is written in a XML derived language It is open source and interested committees can add on new facets of the standards SVG is text based and therefore can be edited by individuals It is cross-browser compatible Search engines can look for specific information

8. 11-8 Advantages of SVG (2) People with visual disabilities can access it It is dynamic and can be updated The graphics can be animated Images can use filters, transformations, clips and masks Images can work with layers of transparency Individual text can be copied, indexed or with VoiceML, spoken by the computer SVG files can be exported from Illustrator, CorelDraw, WebDraw and other packages It can be used for both Web and print graphics

9. 11-9 SVG vs. Flash Both SVG and Flash are vector-based. Flash uses.swf files instead of SVG’s.svg files. Both allow hyperlinking, can connect to databases and are scriptable, though Flash's Actionscript is proprietary. The fact that SVG is open source is a huge advantage. This means the code can be read and edited by any user with access, and it is text-based as well.

10. 11-10 SVG Viewer There is currently no native browser support for SVG in browsers such as Netscape, IE and Opera. Right now the common way to view SVG files is with a plug-in. There are a number of common plug-ins available, but the most common one is the Adobe SVG viewer. Batik, an open source project and IBM also offer viewers. SVG keeps the code easily editable until it renders as a bitmap from the machine of the person viewing the image. So the SVG Viewer takes the responsibility of rendering the image, not a separate program.

11. 11-11 An Empty SVG Working Area Called the Viewport

12. 11-12 Introducing SVG Syntax <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd">

13. 11-13 A Simple Circle in SVG

14. 11-14 The SVG Viewport As a default, the SVG viewer makes the viewport 100% of the width and height of the browser. That is why it is so important to set the width and height attributes. SVG can have nested viewports by having elements nested inside one another. The main reason is to allow you to space information inside of each one the way you choose to.

15. 11-15 A Centered Nested Viewport

16. 11-16 Code for the Centered Nested Viewport <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <rect x="0" y="0" width="300" height="300" style="stroke:red; stroke-width:2; fill:blue; fill-opacity:.25"/> Centered Viewport

17. 11-17 Preserve Aspect Ratio One of the great things about SVG is that it snaps to the size of the browser or device it uses for display purposes. This is very important when planning multiple uses. Preserve Aspect works in conjunction with the viewBox attribute to allow control over an image keeps its original proportions or distorts them into the viewing area. The size of an SVG canvas viewing area is potentially infinite. The viewBox attribute narrows it down to specific measurements.

18. 11-18 A Nested Viewport Without viewBox Attribute Applied

19. 11-19 Code for A Nested Viewport Without viewBox Attribute Applied <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <rect x="0" y="0" width="300" height="300" style="stroke:red; stroke-width:2; fill:grey; fill- opacity:.25"/> No ViewBox Attribute

20. 11-20 Viewport With viewBox Attribute

21. 11-21 Code for Viewport With viewBox Attribute <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <rect x="0" y="0" width="300" height="300" style="stroke:red; stroke-width:2; fill:grey; fill-opacity:.25"/> VB Attribute <rect x="0" y="0" width="300" height="300" style="stroke:red; stroke-width:2; fill:grey; fill-opacity:.25"/> VB Attribute

22. 11-22 Creating the preserveAspectRatio PreserveAspectRatio is used with the viewBox attribute for a very important purpose – the combination allows sized drawings to fit in any viewing area. Even more importantly, PreserveAspectRatio allows control of the drawing as to whether it keeps its original proportions or distorts to fit in the viewing area.

23. 11-23 Viewport With a Width of 350 and a Height of 200

24. 11-24 Code for Viewport With a Width of 350 and a Height of 200 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="350" height="200" viewBox="0 0 1500 1500" preserveAspectRatio="none"> STRETChIT

25. 11-25 Viewport With a Width of 150 and a Height of 250

26. 11-26 Using to Scale an Image Uniformly Within the viewport

27. 11-27 Basic Shapes SVG works with just a few basic shapes. They are –Circles –Ellipse –Lines –Rectangles (including rounded corners) –Polygons –Polylines

28. 11-28 Three Rectangles Used to Make a Group

29. 11-29 The Group Element Grouping images together is a very common graphic trick that takes two or more graphic objects and makes them into one object. The or group element is referred to as a container element, which means it can contain other elements or groups of elements. Container elements also help streamline code.

30. 11-30 Code for Three Rectangles Used to Make a Group <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> Group of 3 rectangles <rect x="120" y="120" width="120" height="70" style="fill:blue; stroke:rgb(0,0,128); stroke-width:3; opacity:0.5"/> <rect x="160" y="160" width="120" height="70" style="fill:blue; stroke:rgb(0,0,128); stroke-width:3;opacity:0.75"/> <rect x="200" y="200" width="120" height="70" style="fill:blue; stroke:rgb(0,0,128); stroke-width:3; opacity:1"/>

31. 11-31 Description Element Description Element The description element is similar to a comment, but can also allow rendering into other forms like Braille, or VoiceML, a speech recognition XML. This makes it ideal for people with disabilities. However,, like a comment, does not render in a browser.

32. 11-32 Filling, Stroking and Opacity The way you are able to actually see color in SVG is to either “fill” an object, which paints the inside of it, or “stroke” an object, which colors the outline of the object’s shape. Objects are painted in the order they appear in code, with the first instance being laid down on the bottom, and other instances layering on top. style="fill:blue; stroke:rgb(0,0,128); stroke-width:3; opacity:0.5"/>

33. 11-33 Transform Attributes The transform attribute transforms or shifts an original coordinate system from one location in a view box to another location along an x y coordinate system. The transform attribute does not transform separate elements but actually creates a new coordinate system and viewport within the original viewport.

34. 11-34 Translate Transformation Translate really means “move”. Translate Transformation creates a new coordinate system that moves the old coordinate system to the new x and y coordinates.

35. 11-35 Moving an Image to a New Location

36. 11-36 Circle Nested Inside a Rectangle With Stroke and Fill

37. 11-37 Code for Circle Nested Inside a Rectangle With Stroke and Fill <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd"> <rect x="50" y="50" width="300" height="300" style="fill:peachpuff;fill-opacity:.75;stroke:orange; stroke-width:4"/>

38. 11-38 SVG And CSS StyleSheets Styling allows the user to separate the presentational aspects of an element from the strictly structural aspects of the element in a separate document, usually a CSS document. The style element in SVG allows a CSS to be embedded within the document. Different elements can be assigned different styles by using a class selector and class attribute. A class selector is defined within the actual stylesheet. Then it is referenced in the class attribute of an element.

39. 11-39 Circle and Stroke Used As a CSS Style With a Class Selector and Class Attribute

40. 11-40 Code for Circle and Stroke Used As a CSS Style <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <![CDATA[ circle.newStyle { fill:blue; stroke:red; stroke-width:4 } ]]>

41. 11-41 Ensuring Your SVG is Valid Besigdes XML Spy, some of the more popular XML editors are Amaya, a W3C editor and browser and Jasc Webdraw, a commercial product. These programs can read and modify SVG files without converting them first to another format. Other editors can only export SVG files like Adobe Illustrator and Corel Draw. Still other programs are specific to just SVG conversions, like Apache Batik or JPEG to SVG encoders.

42. 11-42 The End