SVG: Scalable Vector Graphics - PowerPoint PPT Presentation

svg scalable vector graphics l.
Skip this Video
Loading SlideShow in 5 Seconds..
SVG: Scalable Vector Graphics PowerPoint Presentation
Download Presentation
SVG: Scalable Vector Graphics

play fullscreen
1 / 19
Download Presentation
SVG: Scalable Vector Graphics
Download Presentation

SVG: Scalable Vector Graphics

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. SVG: Scalable Vector Graphics ITK 352.05, Fall 2003 Amy Jones

  2. What is SVG? • A dynamic new graphics standard released by the W3C in 2001 • Combines advantages of many older graphics standards into one format • Adds new capabilities not known to graphics before • Growing in popularity, and receiving more and more support from drawing programs and browsers

  3. Why do we need SVG? • Limited capabilities of bitmaps: • Bitmaps can lose considerable resolution when resized • A high quality bitmap will also come with a large file size • However, because of widespread browser support, the vast majority of graphics on the Internet today are bitmaps

  4. Why do we need SVG? (cont.) • Limited capabilities of vectors: • Graphics based on mathematical formulas, making vectors unable to support photographic-quality images • Never received widespread browser support • However, unlike bitmaps, vectors do not lose image quality when resized

  5. History of SVG • Mid-1990’s: Adobe, Microsoft, and Macromedia began to develop new web graphic standards • New standard would have to: • Be resolution independent • Maintain quality on different size screens • Maintain a small file size • Receive widespread browser support • Support photographic-quality images

  6. History of SVG (cont.) • Macromedia was the first company to achieve a new web graphics standard, when it purchased Future Splash in 1996, and named the technology Flash • The industry still felt that a new standard was needed, because Flash lacked built-in browser support, it was proprietary, and it was designed for animations, not static graphics

  7. History of SVG (cont.) • 1998: Adobe submitted Precision Graphics Markup Language (PGML) to W3C as an XML-based graphic standard • 1998: Microsoft submitted Vector Markup Language (VML) to the W3C, which Macromedia also supported • 1999: W3C decided PGML and VML would be merged into a new standard, and Microsoft and Macromedia abandoned development of the new standard at that time

  8. History of SVG (cont.) • September 2001: SVG became a formal W3C recommendation • Late 2001: Adobe claimed it had ownership and royalty rights on SVG • January 2002: The Internet community protested Adobe’s claim, and Adobe abandoned the issue • January 2003: SVG 1.1 released by W3C

  9. Development Text Editor Adobe Illustrator 10 Corel Draw 11 Jasc WebDraw Viewing Browser support: Mozilla, Amaya Promised future support by IE and Netscape SVG Viewers from: Adobe Corel IBM Apache Current SVG Tools

  10. Advantages of SVG • Text-based: easy to code and edit • Open source: royalty-free, license-free • Written in XML: the future of IT • Official standard from the W3C • Accessibility: scalability & screen readers • Searching: based on text, accessible by XML-aware search engines • Can be updated from a database • Browser support either natively or through a viewer

  11. Advantages of SVG (cont.) • Can be exported from geographic information systems (GIS) software • Supports animation and interactivity • Supports filters, transformations, clipping, and masks • Supports transparency • Can be edited in popular drawing programs such as Adobe Illustrator and Corel Draw

  12. SVG Foundations in XML • An SVG is written in XML 1.0 syntax in a text editor, or generated by a drawing program • SVG abides by XML’s strict coding rules • SVG contains elements and attributes, as does XML

  13. SVG Coordinate System • SVG is based on mathematical formulas, like traditional vector graphics • SVG elements are placed on the X and Y axis

  14. XML Code for a Simple SVG <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010909//EN"""> <svg width="600" height="400"><rect x="1" y="1" width="598" height="398" style="fill:#00FF00"/><text x="210" y="25" style="fill:#FFFFFF; stroke:none;font-family:Arial, sans-serif; font-size:22">Hello World!</text> </svg>

  15. Advanced Capabilities of SVG • Paths: used to draw 2D elements of any shape or size by defining points • Transformations: allow rotation and scaling of an object • Clipping and Masking: provide the ability to modify an object’s fill effect • Filters: provide effects such as drop shadows (associated with bitmaps) • Animation/Interactivity: can be accomplished with SVG tags, or with external script files

  16. SVG and Other Web Technologies • CSS: can define the formatting of some or all elements in a document • HTML/XHTML: allow embedded SVG using the object tag • Java (client side): can display, generate, and update from DB • JSP, .NET, etc (server side): can display, generate, and update from DB

  17. SVG Examples • SVG vs. bitmap: scaling & image quality • Interactivity and text-Based searching • SVG support for photographic-quality images through embedded bitmaps

  18. The Future of SVG • Becoming widely known in the industry • Gaining support from more and more development and viewing products • Seen as having great potential in mobile and wireless devices • Potential as web graphics standard will depend on widespread browser support

  19. Questions or Comments ?