1 / 19

SVG: Scalable Vector Graphics

SVG: Scalable Vector Graphics ITK 352.05, Fall 2003 Amy Jones 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

Ava
Download Presentation

SVG: Scalable Vector Graphics

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. 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""http://www.w3c.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <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 ?

More Related