1. 1 Scalable Vector Graphics (SVG)

2. 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. 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. 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. 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. 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. 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. 8 Scalable Vector Graphics: An Example <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <path d="M 0 112 L 20 124 L 40 129 L 60 126 L 80 120 L 100 111 L 120 104 L 140 101 L 164 106 L 170 103 L 173 80 L 178 60 L 185 39 L 200 30 L 220 30 L 240 40 L 260 61 L 280 69 L 290 68 L 288 77 L 272 85 L 250 85 L 230 85 L 215 88 L 211 95 L 215 110 L 228 120 L 241 130 L 251 149 L 252 164 L 242 181 L 221 189 L 200 191 L 180 193 L 160 192 L 140 190 L 120 190 L 100 188 L 80 182 L 61 179 L 42 171 L 30 159 L 13 140Z"/>

9. 9 Scalable Vector Graphics: An Example <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> Hello World!

10. 10 Including SVG document in an HTML5 document <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

11. 11 SVG Coordinates