1 Scalable Vector Graphics (SVG)

2 SVG SVG is an application language of XML. “SVG is a language for describing two- dimensional graphics in XML. SVG allows for three types of graphic objects: –vector graphic shapes –images –text.”

3 SVG The most common graphics format found on the web today is raster (or bitmap) in the form of gif and jpeg. This format of graphic contains information about each and every pixel within it. Vector graphics describe an image in terms of the lines, text and shapes that make up its composition. This gives the ability to create sophisticated dynamic and interactive graphics.

4 SVG (Benefits) SVGs are smaller in size and are therefore quicker to download than raster graphics. They are smaller because they only describe what actually comprises the image – raster graphics contain information about each and every pixel in the graphic whether they are important to the image or not. The text that appears on a SVG is selectable and searchable, unlike the text that appears on equivalent raster graphics.

5 SVG (Benefits) SVG are clear and sharp, and can be zoomed in and out of without loss of clarity. SVG is an open-source technology and therefore information and examples are readily available. SVGs can be printed at the resolution of the destination printer SVG is an application of XML. Therefore the overall syntactic structure of SVG is known to parsers to handle it. SVG can benefit from the other activities within W3C concerned with the XML Family of standards.

6 SVG (Benefits) Every SVG element (and any of that element’s attributes) can be animated. As an XML based language, SVG shares the advantages of XML, including: Interoperability Internationalization Easy manipulation through the use of APIs such as the Document Object Model (DOM) Can be transformed through XSLT Tools for viewing SVG files are available and often free. XML Linking Language (XLink): XLink, defines a flexible hyperlinking mechanism. SVG uses the XLink hyper-linking functionality via the XLink namespace.

7 SVG (Drawbacks) The biggest disadvantage of SVG is the current lack of support in browsers such as Netscape and IE. However, this situation can be dealt with using plug-ins such as Adobes SVG viewer plug-in.

8 Scalable Vector Graphics: An Example <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <path d="M L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L Z"/>

9 Scalable Vector Graphics: An Example <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " Hello World!

10 Including SVG document in an HTML5 document <svg width="100%" height="100%" version="1.1" xmlns="

11 SVG Coordinates