1 / 14

G6DPMM - Lecture 17

G6DPMM - Lecture 17. Scaleable Vector Graphics. SVG. Scaleable Vector Graphics Markup language designed for graphics XML application (W3C recommendation) XML format for high quality 2D vector graphics (which can contain embedded bitmaps)

curran-anderson
Download Presentation

G6DPMM - Lecture 17

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. G6DPMM - Lecture 17 Scaleable Vector Graphics

  2. SVG • Scaleable Vector Graphics • Markup language designed for graphics • XML application (W3C recommendation) • XML format for high quality 2D vector graphics (which can contain embedded bitmaps) • May be static or dynamically generated from real-time data

  3. History • Web standards (W3C recommendations) • Cross-industry consortium (Sun & Adobe, also IBM, Apple, Microsoft, Kodak, Macromedia, Xerox and many others). • 1.0 recommendation - 2001 • 1.1 recommendation - 2003 • SVG Tiny - subset of 1.1 for phones • SVG Basic - subset of 1.1 for PDA

  4. What does SVG do? • Three types of graphic objects • Vector graphic shapes • Images (ie bitmap grapics) • Text (in any XML format) • Objects may be grouped, styled, transformed and composited. • Many transformations and effects defined by the language • Elements have an exposed API - hence may be under software control • SVG is extensible using templates

  5. Dynamic SVG • SVG includes the full XML DOM (Document Object Model) • Elements can be accessed and controlled by scripts • Many event handlers can be assigned to any SVG object (eg onmouseover, onclick)

  6. Benefits of SVG • Open standard • Highly interoperable • Becoming very widely supported • Scaleable and zoomable • Text is searchable and selectable • Scripting allows interaction and animation • Accessible through Java2D API • Unicode support for internationalizaion • Easily transformable using XSLT

  7. SVG Viewers • Adobe Viewer • Windows, Macintosh, Solaris & Linux • Browser plugin for Netscape, RealPlayer & Opera • ActiveX control for IE & MS Office • Corel Viewer • Browser plugin for Windows (IE or Netscape) • Apache Batik • Server plugin that renders SVG as JPEG or PDF • Mozilla • Native support in Mozilla - partial implementation • Full support promised in Firefox 1.1 • Google – now supports SVG searching • Many others - including SVG Tiny and SVG Basic viewers

  8. Native SVG Editors • JASC WebDraw • Windows WYSYWIG SVG editor • Bitflash Brilliance • Windows animated authoring tool for SVG, SVG-Tiny and SVG-Basic • Currently beta testing • Sodipodi • Linux drawing package

  9. Editors with SVG export • Adobe Illustrator (Windows) • Corel Draw (Windows & Macintosh) • CadStd Pro (Windows) • Oak Draw (Windows) • Sphinx (Unix) • Many others • Also many conversion engines

  10. Framework for SVG <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" ttp://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg xml:space="preserve" width="400" height="200"> ... </svg>

  11. SVG “Hello World!” <?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 xml:space="preserve" width="400" height="200"> <text style="fill:blue" x="20" y="20"> Hello from SVG! </text> </svg>

  12. Vector Objects <rect style="fill:green" x="20" y="20" width="200" height="100" /> <circle style="fill:green;stroke:cyan;" cx="200" cy="55" r="40" /> <path style="fill:red;stroke:blue;" d="M 50 10 L 350 10 L 200 120 z" />

  13. Text Objects <text x="20" y="150" style="fill:green font-family:sansserif; font-size:20;" > This is </text> <text x="160" y="150" style="fill:red font-family:serif; font-style:italic; font-size:32;" > some formatted text </text>

  14. Image Objects <image x="60" y="30" width="70" height="120" xlink:href="tim.gif" > </text>

More Related