Browser-side graphics application development-using XML-based Svg[svg Overview]

Always want to write a series of articles on their own blog, but people stupid hand lazy has no action, open the door, first write a chapter.

This series will detail the Scalable Vector Graphics (SVG), and today is the first chapter of SVG overview.

1th SVG Overview before you start reading this chapter, do you know the answers to the following questions: · What is the difference between vector graphics and raster graphics? What is SVG. · What are the features of SVG? What are the main areas of SVG? · Why SVG is not as popular as other vector graphics formats such as Flash. If you are not sure of the answer, don't worry, after reading the content of this chapter, I believe you will have your own answer. 1.1 raster graphics and vector graphics computer-displayed graphics can be divided into two categories: Raster graphics (Raster graphics) and vector graphics. 1.1.1 Raster Graphics

Raster graphics are also known as bitmaps, bitmap plots, which are composed of several pixel points of the graph, each pixel has its own position, color values and transparency values. A large number of graphic description information is recorded in the raster graphics, which is large in size and generally stored in various compression formats. Most of the display devices we use daily are raster devices, so the normal display of raster graphics must first be decompressed.

The advantage of raster graphics is that it is easy to perform vivid image effects with rich color levels, especially suitable for images with rich image and color levels, and its disadvantages mainly include the following three aspects:

· Is that the file is relatively large and not conducive to network transmission.

· The graphic itself cannot contain the information being looked up.

· It is not possible to perform various graphical transformations (such as zooming in) without loss of data.

Figure 1-1 shows an example of a raster graphic with a current display scale of 100%, which is the original size.

Figure 1-1 The original size of the raster graphics will be shown in Figure 1-1 to enlarge 400%, the center of the stamens has a sawtooth edge, the effect as shown in Figure 1-2. Figure 1-2 Raster graphics after zooming in 400%1.1.2 Vector GraphicsVector graphics, also known as vector graphics, object-oriented graphics. Vector graphics use lines and curves to describe graphics, and their graphical elements are obtained by mathematical formulas. It is because vector graphics can be obtained by mathematical formula, the size of vector graphics file is generally relatively small. In vector graphics, the graphical elements they contain are called objects, each of which is an entity with properties such as color, shape, screen position, and so on. Relative to raster graphics, vector graphics have the following advantages: · No distortion after graphic transformation. In the same content size, the vector graphics volume is often smaller than the volume of the raster graphics. Vector graphics can be easily converted to raster graphics and are small in size, while vector graphics converted by raster graphics often contain a large amount of redundant information. Vector Graphics can carry lookup information.   Figure 1-3 shows the comparison of the effects of vector graphics before and after amplification. Figure 1-3 Comparison of the effects of vector graphics before and after amplification1.2 What is SVGAfter introducing the raster graphics and vector graphics, it is time for this book's protagonist--svg to debut. SVG full name Scalable Vector graphics, Chinese meaning is scalable vector graphic, it is the organization in 1999, the Director of the comprehensive company vector standards launched by the two-dimensional XML-based vector graphics open standards, the current release is the latest version of the SVG 1.2 draft, The stable version is SVG 1.1. SVG mainly has the following features: 1. Based on XML standards
XML full name Extensible Markup Language, you can extend markup language. XML, like HTML, comes from SGML (Standard Universal Markup Language), but unlike the trained markup in HTML, XML is a meta-markup language that allows users to define their own tags and use them later. Currently, XML is widely accepted and fully supported by software vendors. XML-based features are the biggest advantages of SVG compared to other vector graphics standards, and the commonality of XML makes it easier to interact with SVG graphics during Web application development. 2. Smaller volumes are a common feature of all vector graphics standards. SVG graphics file support in compressed format storage, in general, the compressed file volume will further reduce 70%~80% and not distortion, and for raster graphics format such as GIF, JPEG, etc., without distortion of the premise, the compressed file volume changes very small. 3. The user can freely transform the SVG image to zoom in, zoom out, rotation and other operations, the transformed graphics will not be distorted. 4. One of the most interesting features of text-based SVG is that it is an image in a text format, or, more specifically, an image in an XML document format. SVG's text-based features mean that when drawing SVG graphics, we can use a dedicated drawing tool or a text editor such as Notepad. Routine 1-1 is a simple SVG code example, as shown in Figure 1-4. 1 <? XML version= "1.0"?>
2 <! DOCTYPE svg public "-//W3C//DTD svg 1.1//en" "HTTP://WWW.W3.ORG/GRAPHICS/SVG/1.1/DTD/SVG11.DTD" >
3 < SVG width = "*" height = "" xmlns = "http://www.w3.org/2000/svg" >
4 < Rect x = "All" y = "width =" "Height =" "Stroke-width =" 1 "fill =" Black "/>
5 </svg > Figure 1-4 Example Effect 5. Easy Interactive SVG supports SMIL (Synchronized Multimedia Integration language, Synchronized Multimedia integrated language), making it possible to implement interaction within a picture. In addition, because SVG supports scripting languages, Web application developers can programmatically access elements and attributes in the SVG file Document Object model in response to specific events. 6. Diverse file style SVG can also introduce raster graphics in addition to vector graphics and text objects. In addition, SVG files are easy to modify and edit because of their XML document-based features. 7. Inline font data SVG embeds the font shape of the text contained in the image, thus solving the problem of the dynamic font, eliminating the process of downloading the font file for the user.1.3 svg yesterday, today and tomorrow 1.3.1 svg yesterdayThe history of SVG dates back to 1998, when, in April, Adobe, IBM, Sun and other companies submitted joint PGML standards to the organization. Subsequently, Microsoft, Macromedia and other companies to the company also submitted a similar vector graphics standard VML. Functionally, PGML is suitable for professional design and publishing, while VML is suitable for common vector graphics applications. Which is a very difficult thing to adopt as a general vector graphics standard, after a period of time, the organization finally decided to synthesize the two, releasing a new vector graphics standard, SVG. According to the official website, the first draft of SVG was introduced in February 1999. In August 2000, the organization officially released the SVG 1.0 specification. January 14, 2003, the organization released the SVG 1.1 specification. Currently, the latest version of SVG is the April 2005 release of the SVG 1.2 draft. SVG appears after a long time does not "fire", the main reason is two points: 1. Support for SVG by major software vendors SVG is an open universal vector graphics standard, the major software manufacturers take into account their own interests, reluctant to invest too much resources in the development of appropriate support technology and products. 2. SVG requires vector graphics standards such as VML, Flash, and so on, behind the competition for VML is Microsoft, behind the Flash is Adobe (Macromedia), who is behind SVG.1.3.2 svg today and tomorrowNow, the popularity of SVG can be described by "gradual warming up". With a closer look at the official website of the organization, you will find that the August 2000 SVG 1.0 specification was the candidate recommendation (candidate recommendation), and the April 2003 release of SVG The 1.1 specification became the recommended standard (recommendation), with subtle differences indicating the change in SVG status. In addition, Adobe, Microsoft, IBM and other industry-renowned software vendors are gradually increasing support for SVG, a variety of browser-side SVG plug-ins have appeared, many professional vector drawing tools also began to support the SVG standard. In addition to official and factory support, SVG-based WEB graphics applications are springing up, and the application of SVG extends from the original single Geographic Information system (Web GIS) to other domains. Judging by the current development trend, we have reason to believe that SVG will be better tomorrow.1.4 svg vs. VML, FlashIn the flash big line today, the future of SVG can be replaced by the mainstream of web graphics applications. It is not easy to answer this question, see the comparison of SVG with VML, flash in this section.1.4.1 svg vs. VMLVML was the first vector graphics standard submitted by companies such as Microsoft in 1998 to the company, and in September 1999, IE5.0 officially supported VML in Microsoft's release. As a vector graphics standard, VML has the advantages of XML-based standard, high-quality vector graphic display, text-based, and easy to interoperate. Compared with VML, SVG is the younger generation. SVG inherits from VML and PGML, therefore, the advantages of VML, SVG also have, in addition, SVG as an open universal standard, can get more extensive support. However, with Microsoft-supported VML not easy to exit the historical stage, SVG fully replaces the VML still takes time.1.4.2 svg vs. FlashLet's look at the differences between Flash and SVG. 1. Technology ownership SVG is an open standard for organization management, and Flash is owned by Macromedia Inc. (acquired by Adobe). Although the Macromedia Company's opening terms are looser, the initiative is always in the hands of the Macromedia Company. 2. File format SVG files are text files and Flash files are binary files, which is very important for search engines to build content indexes. Search engines can easily search for SVG files and establish an index corresponding to their content. The internal structure of the Flash file is inherently invisible to search engines, and extracting links from Flash is much more difficult than extracting links from ordinary HTML pages. 3. The interactivity of the Flash is obviously more limited than that of SVG based on the characteristics of XML documents. 4. Other mobile applications are the new battlefield between Flash and SVG, which was released in 2003 by the mobile version of SVG and supported by a number of vendors. There are comments that SVG's openness makes it more advantageous compared to flash, but mobile applications are still in the ascendant, making it difficult to determine which technology has the advantage. On the commercial level, Flash is better than SVG, although Flash is not the recommended standard for the World Wide Web, but it is a fact standard in the field of vector graphics, which is inseparable from the commercial support behind it, that is, the commercial interest Choice technology, SVG is superior to flash at the technical level, Moreover, SVG is the web vector graphic recommendation standard that the World Wide organization manages, many people think that SVG will eventually replace Flash as the fact standard of Web vector graphics application.   There is a growing number of SVG-enabled vendors and SVG-based applications, especially since Macromedia was acquired by Adobe, and Adobe has invested more resources to support SVG, which is why SVG has a great hope of eventually replacing Flash as a de facto standard. There is a growing number of SVG-enabled vendors and SVG-based applications, especially since Macromedia was acquired by Adobe, and Adobe has invested more resources to support SVG, which is why SVG has a great hope of eventually replacing Flash as a de facto standard.1.5 Summary This chapter introduces the physical properties of SVG from several angles, including the basic concept, characteristics, application field and history and prospect of SVG. At the end of this chapter, SVG is compared with VML and Flash, which shows the advantages and disadvantages of SVG in the process of competition with other vector graphics standards. The next article content plan is an example that illustrates the overall structure of SVG.