Discussion on the basic concept of SVG graphics and its use in HTML5

Scalable Vector Graphics (SVG) are part of a vector-based graphics family. They are different from raster based graphics, which store the color definitions of each pixel in a data array. Today, the most common raster graphics formats used on the network include http://www.aliyun.com/zixun/aggregation/16701.html ">jpeg, GIF, and PNG, each of which has advantages and disadvantages."

SVG has several advantages over any raster based format:

SVG graphics are created using mathematical formulas that require much less data to store in the source file because you do not need to store data for each individual pixel. Vector graphics can be scaled better. For images on the network, trying to enlarge the image from the original size can produce distorted (or pixel) images.

Raw pixel data is designed for a specific size. When the image is no longer the size, the program that displays the image guesses what data is used to populate the new pixel. The vector image has higher elasticity and the data formula can be adjusted accordingly when the image size changes.

source files may be smaller, so SVG graphics can load faster and use less bandwidth than other raster graphics. SVG images are rendered by the browser and can be drawn programmatically. SVG images can be changed dynamically, making them especially suitable for data-driven applications, such as charts. The source file for an SVG image is a text file, so it has both easy access and search engine friendly features.

This article Wind network (www.ithov.com) will introduce the advantages of SVG formats and how they can help with Web design work in HTML5.

SVG Basics

To create an SVG graphic, you experience a process that is completely different from creating a JPEG, GIF, or PNG file. JPEG, GIF, and PNG files are typically created using an image-editing program, such as Adobe Photoshop. SVG images are typically created using xml-based languages. There are some SVG editing GUIs that will generate the underlying XML for you. However, for this article, we assume that you are using the original XML language.

Listing 1 shows an example of a simple SVG XML file that draws a red circle with a black border of 2 pixels wide.

Listing 1. SVG XML File

<svg xmlns= "Http://www.w3.org/2000/svg" version= "1.1" > <circle cx= "cy=" r= "BLACK" Stroke-width= "2" fill= "Red"/></svg>

The above code gets the graph in Figure 1.

Figure 1. Red circle with 2 pixel wide black border