1 / 91

Introduction to SVG

Introduction to SVG. Prepared by K.M.SO Department of Computer Science ver. 2 last update: June 2004. Introduction. What is SVG Advantage and disadvantage of using SVG Graphics systems XML basic What environments can view SVG Installing the Adobe SVG viewer

nitsa
Download Presentation

Introduction to 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. Introduction to SVG Prepared by K.M.SO Department of Computer Science ver. 2 last update: June 2004

  2. Introduction • What is SVG • Advantage and disadvantage of using SVG • Graphics systems • XML basic • What environments can view SVG • Installing the Adobe SVG viewer • SVG syntax, structure and rendering order

  3. What is SVG ? • SVG stands for Scalable Vector Graphics • SVG is a language for describing 2D vector and mixed vector/raster graphics in XML. • SVG drawings can be dynamic and interactive • vector graphics animation via scripting

  4. SVG background • An open standard developed by W3C organization. • SVG specification is available in: http://www.w3.org/TR/2000/CR-SVG-20001102/ • first drafted by W3C since Nov1999 • lack of supporting applications until June 2000, Adobe released plugins for both IE and Netscape • Current status: Candidate Recommendation - meaning that the specification is maturing and is now ready for more widespread implementation testing. • Supported by Sun, Adobe and IBM. • Plug-in is required.

  5. Motivation for SVG • Text based language. • Simple to program. • Takes advantage of existing tools - XML, CSS, XSL. • Powerful graphics capabilities - high performace, full animation support. • Open standard. • Extendable - MathML for instance. • Searchable.

  6. SVG is Scalable (1) • In terms of graphics scalable means not being limited to single, fixed units. • In terms of Web scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. • SVG, being a graphics technology for the Web, is scalable in both senses of the word

  7. SVG is Scalable (2) • SVG graphics is scalable to different display resolutions and color spaces. • The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. • SVG graphics can be magnified to see fine detail, or to aid those with low vision.

  8. SVG is Vector Graphics • Uses of the power of transformations, coordinate systems, units and vector-based shapes. • Rendering is done on the client side - using local processing power. • represented in text formats. • Can include Bitmap images

  9. Bitmapped Graphics • Bitmapped images are widely used over the Internet: attached to HTML documents using <img> tag. • Main formats: GIF, JPEG, BMP. • Represented in Binary format. • Image processing is done on server side and image is transferred as is to client.

  10. Vectors vs Bitmaps(1) • Size : Vectors cost much less to represent than bitmaps. • Example: a diagonal blue line on 640X480 window costs ~3000 bytes with a Bitmap. Same line using Vector Graphics ~20 bytes. • Bitmaps have problems with resolution and colors when viewed and printed on different kinds of screens and printers at different sizes. • Transformations can be applied on vectors to solve this problem.

  11. Vectors vs Bitmaps(2) • Format representation - Bitmaps are binary files, vector based graphics can be represented as text files. • Drawing instruction include text, and so are selectable and searchable. Links can be created to any part of a vector based image. • Flexibility - Vectors are much more flexibly to changes (transformations and different text styles).

  12. Vectors vs Bitmaps(3) • Animation is much simpler using vectors. • Accessibility to editing - easier to edit quickly a textual file than a binary file. • Interactivity – the ease of using scripts allows very good interactivity.

  13. Vectors vs Bitmaps(4) PNG SVG

  14. Vector Graphics Formats • SVF - Simple Vector Format. Plug-in for CAD drawing representation - 1996. No more development after 1997. Limited, no animation. http://www.softsource.com/svf • DWF - Drawing Web Format. Plug-in can be used with Javascript - but with no animation enabled. http://www.autodesk.com/whip/ • Flash - Marcomedia’s Vector Graphics Format. The most up to date. Supports full multimedia features. Occupies about 70% of the market. http://www.macromedia.com/software/flash

  15. Vector Graphics Formats(2) • VML - Vector Markup Language - based 2D vector format by Microsoft - not developed after 1998. Limited to one single platform - Microsoft. http://www.w3.org/TR/NOTE-VML • WebCGM - computer graphics metafile for the Web - binary format. Primarily designed to visualize technical and scientific drawings. http://www.w3.org/Graphics/WebCGM • VRML - Virtual Reality Modeling Language - devoted to 3D, supports 2D as well - complicated for simple presentations. Http://www.web3d.org

  16. Other Vector Graphics Tools • 2D APIs combined with ActiveX - limited to Microsoft platforms. • Java2D - binary program with graphical 2D output - inserted in web pages as applet - platform independent, but requires more than basic scripting programming skills.

  17. SVG is XML • SVG is defined by XML • a new way to put images on Web pages • SVG conforms to a certain structure defined by XML and the SVG DTD

  18. Markup Languages based on XML • XML is a meta-language • A language for creating other languages. • Markup Languages that have been created using XML • MathML • Chemical Markup Language (CML) • Scalable Vector Graphics (SVG) • Wireless Markup Language (WML) • Geography Markup Language (GML) • Synchronized Multimedia Integration Language (SMIL) • ...

  19. What is XML? • XML stands for EXtensible Markup Language • XML is a markup language much like HTML • XML was designed to describe data • XML tags are not predefined in XML. You must define your own tags

  20. XML Document • XML declaration • Defines the XML version (=1.0) and the character encoding used in the document • Root element • One and only one Root element • Child element of the Root • Inside the Root element

  21. XML Document • All XML elements must have a closing tag (except the declaration, which is not part of XML) • Tags are Case sensitive • Elements must be properly nested • Attribute values must be always be quoted • White Space is Preserved • Comments in XML <!– This is a comment -->

  22. XML Elements have Relationships • Elements are related as parents and children • Elements can have different content types • Element content • Mixed content • Simple content • Empty content • Attributes (name/value pairs)

  23. Element Naming • XML elements follow these naming rules: • Names can contain letters, numbers, and other characters • Names must not start with a number or punctuation character • Names must not start with the letters xml (or XML or Xml ..) • Names cannot contain spaces • Avoid “-” and “.” in names • “:” should not be used in element names, it is reserved for Namespaces

  24. Parsed Data & CDATA • All text in an XML document will be parsed by the parser • Only text inside a CDATA section is ignored by the parser • Escape Characters • Illegal XML characters have to be replaced by entity references • Entity references always start with the “&” and end with “;” character

  25. “Well Formed” and “Valid” XML • A “Well Formed” XML document has correct XML syntax (properly nested, must have closing tags and etc….) • A “Valid” XML document is a “Well Formed” XML document which conforms to the rules of a Document Type Definition (DTD) • Any errors will stop you.

  26. Well formed vs Valid SVG (1) • Well formed SVG document: • <?xml version="1.0 ”standalone="no"?> <svg width=”300px" height=”200px” xmlns = 'http://www.w3.org/2000/svg ’> <desc><!-- put a description here --> </desc> <g><!-- your graphic here --> </g> </svg>

  27. Well formed vs Valid SVG (2) • Valid SVG document: • <?xml version="1.0 ”standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width=”300px" height=”200px"> <desc><!-- put a description here --> </desc> <g><!-- your graphic here --> </g> </svg>

  28. Display your XML • With CSS (Cascade Stylesheet) • With XSL (preferred style sheet language of XML) • XML embedded in HTML

  29. Advantage and Disadvantage of using SVG • Advantage • Vector graphics • XML based • Text implementation • Disadvantage • Lack of native viewing support (plug-in needed)

  30. Advantage and Disadvantage of using SVG • Important Benefits – Vector Graphics • Text based descriptions of geometric objects • Small file size • Scalable • *Integrate raster images • *Quality of display • *Raster like filter effects

  31. Advantage and Disadvantage of using SVG • Important Benefits – XML based XML is open standard for structured data exchange has wide and reliable implementation makes data available to other open standard technologies XML + SVG = data driven graphics, also known as Smart Graphics Animation native and through scripting Interactive and dynamic

  32. Advantage and Disadvantage of using SVG • Important Benefits – Text Implementation Preserves both graphical appearance and ‘text’ Prevent font substitution and workarounds Searchable, selectable text Embed font information

  33. Technology Comparision Feature SVG Flash GIF JPEG PNG XHTML Vector artwork   Alpha Channel transparency    Pixel-precision      Typeface    Shared resources   Open-standard    Filter effect  Animation    Interaction    Editable      Masking   Gradients     

  34. SVG versus Flash • Both are vector graphic formats for the Web, likely standards, likely in competition... • Differences: • SVG is a “human readable” format • you need Macromedia Generator to dynamically change the content; with SVG you can do it via DOM • Advantages of SVG: XML namespace, can be combined with other XML namespaces • SVG is still being developed, Flash is mature, with nice authoring tools • SVG is free

  35. What enviornments can view SVG (1) A variety of viewers available for download free-of-charge: • Browsers native support SVG: • X-Smiles • www.xsmiles.org • W3C Amaya • www.w3.org/Amaya/Amaya.html • Browser + pulg-in • Adobe SVG viewer • www.adobe.com/svg/viewer/install/main.html

  36. What enviornments can view SVG (2) • Java-based SVG viewers: • IBM SVGView • www.alphaworks.ibm.com/tech/svgview • CSIRO SVG toolkit • sis.cmis.csiro.au/svg/ • others • Apache XML project Batik • xml.apache.org/batik/ • CSIRO PocketViewer • www.cmis.csiro.au/sis/SVGpocket.htm • 2004-06-14: Nokia announce SVG in Series 60(Scalable UI framework with SVG, supporting high display resolutions: 176 x 208, 208 x 208, 240 x 320 QVGA, 352 x 416) • 2004-04-19: Sony Ericsson K700 supports SVG using ZOOMON player

  37. What enviornments can view SVG (3) • The configuration of your web server: • Extension: svg • MIME type: image/svg+xml • Extension: .svgz • MINI type: image/svg+xml

  38. Tools to create SVG • You can use WYSIWYG program to export SVG code : • Adobe Illustrator 10 • Adobe GoLive 5.0 • Adobe Photoshop • CorelDraw 10 • JASC WebDraw 1.0 (30 days trial version) • OpenOffice 1.0 (free) • Amaya (free) • SVGDraw 0.9 (free)

  39. Activity : Installing the Adobe SVG Viewer(Time: < 5 mins) • Step 1: • Download Adobe SVG viewer from Adobe SVG Zone • www.adobe.com/svg/viewer/install/main.html • Step 2: • double-click the downloaded installer and follow the on-screen instructions.

  40. Step 3: • test your browser in SVG test page • www.adobe.com/svg/viewer/install/svgtest.html

  41. SVG basic data types, syntax, structure and rendering order

  42. Basic Data Types(1) Main Data types for SVG attributes: • <integer> - signed integer numbers of 32 bits. • <number> - decimal numbers. • <length> - <number> followed by a unit identifier: 1.5mm - in the user coordinate system - a pure number. • Unit identifiers : as defined in CSS: em, ex, px, pt, pc, cm, mm, in and percentages.

  43. Basic Data Types(2) • <coordinate> - represents a <length> in the user coordinate system - distance from the origin for a specific axis. • <angle> - <number> optionally followed by deg - degrees, grad - gradians or rad - radians. Default is degrees. (as defined in CSS2). • <color> - for representing colors from RGBcolor space. Either by keywords recognized by SVG or by hex numbers.

  44. Basic Data Types(3) • <paint> - possible values: fill - filling the shape or stroke - rendering the contour of a shape. • <transform-list> - a list of transformations. • <uri> - Uniform Resource Identifiers • <time> - <number> followed by a time identifier : ms - milliseconds or s- seconds. May not be negative.

  45. SVG document fragment • SVG code is found inside <svg> element tag (<svg>……</svg>). • An SVG document fragment consists of any number of SVG elements contained within an svg element. • <svg> element can be empty, contain basic shapes, or more complex graphic elements.

  46. A HelloWorld SVG (1/3) <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg width= "300" height= "300"> <text x= "100” y= "100">Hello, World!</text> </svg>

  47. A HelloWorld SVG (2/3) • The first two lines are standard XML form. <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> This document is a piece of XML Link to the W3C’s SVG DTD

  48. (0,0) (100,100) Hello, World! (300,300) A HelloWorld SVG (3/3) • Draw a simple text “Hello, World!” <svg width=”300" height=”300"> <text x=“100” y=“100”>Hello, World!</text> </svg>

  49. Activity Create your first helloworld.svg(Time: < 2 mins)

  50. Activity

More Related