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

Loading in 2 Seconds...

play fullscreen
1 / 19

SVG: Scalable Vector Graphics - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
svg scalable vector graphics

SVG: Scalable Vector Graphics

ITK 352.05, Fall 2003

Amy Jones

what is svg
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
why do we need svg
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
why do we need svg cont
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
history of svg
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
history of svg cont
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
history of svg cont7
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
history of svg cont8
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
current svg tools

Text Editor

Adobe Illustrator 10

Corel Draw 11

Jasc WebDraw


Browser support:

Mozilla, Amaya

Promised future support by IE and Netscape

SVG Viewers from:





Current SVG Tools
advantages of svg
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
advantages of svg cont
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
svg foundations in xml
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
svg coordinate system
SVG Coordinate System
  • SVG is based on mathematical formulas, like traditional vector graphics
  • SVG elements are placed on the X and Y axis
xml code for a simple svg
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>


advanced capabilities of svg
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
svg and other web technologies
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
svg examples
SVG Examples
  • SVG vs. bitmap: scaling & image quality
  • Interactivity and text-Based searching
  • SVG support for photographic-quality images through embedded bitmaps
the future of svg
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