SVG FAQ
- Q: What is SVG?
- A: SVG stands for Scalable Vector Graphics. It is a vector graphics format intended primarily for the Web, though it is getting wider deployment on a variety of devices.
- Q: What are vector graphics, and why is it important?
- A: Vector graphics is a way of describing an image not as rows and columns of pixels, but rather as a set of instructions on how to create the image. A raster image, such as a bitmap, PNG, JPEG, or GIF, is merely a series of unconnected pixels (or colored dots), while a vector image represents different parts of the image as discrete objects, so it allows for better interactivity. When you zoom in on a raster image, it becomes blocky and fuzzy (or "pixelated"), but when you zoom in on a vector image, it remains crisp and clear at any resolution. Also, vector graphics can often have a smaller file size (especially when compressed) than the equivalent raster image. Note that for photographic images, however, raster images are called for; vector graphics are better for line art, drawings, charts and graphs, maps, and text.
- Q: Where can I learn how to use SVG?
- A: The W3C SVG Interest Group is publishing a book to teach you SVG, written by Dr. David Dailey, an expert in SVG; An SVG Primer is available free of charge. If you are a designer, you may be interested in Tavmjong Bah's Inkscape: Guide to a Vector Drawing Program, available as a print or free digital edition, which teaches you how to use the open-source drawing tool Inkscape. Finally, there are many only resources about SVG, but the best way to learn SVG may be to simply view the source code of an SVG image or application you like, to see how it was made! SVG is a text format, like HTML and CSS, so you can learn it the same way you learned those technologies.
- Q: What is the difference between SVG and Canvas?
- A: Both SVG and Canvas have a vector-graphics script API for drawing to the browser canvas. SVG produces a DOM (a scene graph), while Canvas draws directly to the screen and does not retain the drawing "instructions"; this means that sometimes, Canvas can use less memory and render faster. SVG's final format remains vector-based and will scale to whatever size is needed automatically, while Canvas' final format is pixel-based, and cannot be scaled without distortion unless the drawing scripts are run again. SVG provides several helper functions, such as bounding-box detection and hit-testing for mouse events, while Canvas is a lower-level API, but both SVG and Canvas allow authors to add more functionality using script libraries. Both are complementary technologies, and we recommend you use each for its own strengths... or use them together!
- Q: Is SVG based on VML or PostScript? What is the history of SVG?
- A: SVG is influenced by several formats, but was not based on any one format. For more details, please see the Secret Origin of SVG. You can also read about the history of the various SVG specifications and implementation news.