SVG Introduction
SVG is a language used to describe two-dimensional graphics and graphic applications in XML.
Prerequisites for Learning:
Before continuing, you should have a basic understanding of the following:
- HTML
- XML Basics
If you wish to learn these topics first, please select the appropriate tutorials from our homepage.
What is SVG?
- SVG stands for Scalable Vector Graphics
- SVG is used to define vector-based graphics for the web
- SVG defines graphics in XML format
- SVG images do not lose any quality when zoomed or resized
- SVG is a standard of the World Wide Web Consortium (W3C)
- SVG integrates with other W3C standards such as DOM and XSL
SVG as a W3C Recommendation
SVG became a W3C Recommendation on January 14, 2003.
For more information on W3C's SVG activities, please visit our W3C tutorial.
History and Advantages of SVG
In January 2003, SVG 1.1 was established as a W3C standard.
Organizations involved in defining SVG include Sun Microsystems (now owned by Oracle), Adobe, Apple, IBM, and Kodak.
Advantages of using SVG over other image formats include:
- SVG can be read and modified by many tools, including Notepad
- SVG files are smaller in size and more compressible compared to JPEG and GIF images
- SVG is scalable
- SVG images can be printed at any resolution with high quality
- SVG images can be scaled without losing quality
- SVG images can contain optional text that is searchable (ideal for maps)
- SVG can be used with JavaScript
- SVG is an open standard
- SVG files are pure XML
SVG's main competitor is Flash.
Compared to Flash, SVG's biggest advantage is its compatibility with other standards like XSL and DOM, whereas Flash is a proprietary, non-open technology.
Viewing SVG Files
Internet Explorer 9, Firefox, Google Chrome, Opera, and Safari all support SVG.
IE8 and earlier versions require a plugin, such as Adobe SVG Browser, which is available for free.
Creating SVG Files
Since SVG is an XML file, SVG images can be created with any text editor, but it is often used in conjunction with drawing programs like Inkscape for easier creation of SVG images.