Discussion on the basic concept of SVG graphics and its use in HTML5
Source: Internet
Author: User
KeywordsHtml5svg Graphics Basic concepts
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.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.