Do you really know about SVG ???

Scalable Vector Graphics (SVG) is a W3C drawing standard built around XML, which enables fast and lightweight graphs (comparison tables and graphs) one of several vector graphics technologies that can be quickly presented on an appropriate viewer. Such vector graphics have many advantages, including bandwidth saving, media storage, and high flexibility. This article will explain these advantages and show you how to easilyProgramAdd powerful, dynamic, and interactive visual elements.

Scalable Vector Graphics (SVG) is a standard for creating and deploying 2D vector Images Using XML documents. It is a WWW Federation (W3C) Recommendation developed and recognized by a large number of industry organizations. SVC provides high-quality and rich vector graphics, simplicity, and extensive tool compatibility based on XML, as well as the power of the documentation Object Model (DOM) interface with rich functions, this brings a powerful new member to the DHTML project. By combining it with creativity (and a bit of ingenuity), you can turn countless interactive web possibilities into reality, improving the appearance, availability, and functionality of your web applications.

Various vector graphics formats

Vector Graphics (including SVG, Vector Markup Language (VML), Windows metafiles (. WMF and. EMF) and TrueType fonts) are stored and expressed in the form of command lists. These commands detail how to recreate an image using a series of shapes, lines, and transformations. This approach is like copying the drawing by accurately recording and re-creating the sequence of paint strokes originally used to generate the drawing. A vector image usually has a small amount of data (especially when it is compressed), which minimizes the storage space and bandwidth requirements. When they are printed, scaled, or even enlarged, they do not need to be rendered in pixels. Because they can be broken down into basic shapes and curves, it is a good choice for any image with limited precision. However, on the other side, it takes thousands of steps to recreate an image. Therefore, rendering a vector image requires a large amount of computing. Vector images are generally not suitable for displaying images that are actually taken and highly segmented, but they are usually suitable for displaying images, charts, or images (such as cartoon images) consisting of basic shapes ).

Grating graphics-for example, portable network graphics (PNG) GIF and JPEG are drawn by comparing the pre-presented final image with a specific resolution and zoom ratio in pixels. This is like waiting for the drawing to complete, and then drawing it with the resolution and size required by the specific purpose and output device. Raster images can be easily transplanted across platforms to minimize the need for computing. They are ideal for displaying highly segmented and actually captured images, but the scaling and printing effects are usually poor. Because a large file size is not processed, their dynamic programmability is very poor, and the storage and transmission efficiency is usually very low.

Careful readers may have noticed the VML mentioned above, and it is indeed necessary to introduce it in detail: VML has many of the same advantages of SVG, such as easy text-based production and vector graphics-based construction. However, other formats reject VML, and SVG obtained some vector graphics elements of VML last year. There are tools that can perform bidirectional conversion between SVG and VML, so we can believe that the two can be supported at the same time through a very small effort.

Getting started with SVG

An SVG is essentially an XML document that follows an architecture defined as part of the SVG approval process. The Specification defines a variety of basic geometric shapes, such as rectangles, circles, ovans, straight lines, line, polygon, and glyph elements (such as text ). Complex shapes can be created using path elements that allow you to define shapes such as a series of straight lines, arcs, and complex besell curves. Use these basic shapes with a clever design, even the most complex ry can be created. Figure 1 illustrates the XML structure of a basic SVG document,Figure 2The SVG displayed in the SVG viewer.

Figure 2 SVG in the viewer

Although some applications (such as CorelDraw, Adobe Illustrator, and batik SVG toolset) can directly display or process SVG, in most cases, SVG can be used as an element of an HTML document and coexist with other HTML text and multimedia content. The typical method is to implement it through the original embedding mark:

<HTML>
<Body>
<H1> A page containing an SVG <Embed name = "examplesvg"
Pluginspage = "http://www.adobe.com/svg/viewer/install"
Src = http://blog.csdn.net/rocky820618/archive/2006/12/29/ "figure1.svg" width = "400" Height = "300"
Type = "image/SVG-xml"/>
</Body>
</Html>
 

The pluginspage attribute directs users to available content handlers (if not installed ). In this example, I reference Adobe SVG viewer.

The value must note the correlation between the width and height attributes of the embedded tag, and the same is true for the root SVG Element in the referenced image (this value is sometimes expressed in various ways, including pixels and centimeters ). If the numbers do not match, the encapsulated image will be cropped or modified in an undesirable way. A commonly used technology that can avoid this problem and provide greater flexibility is to prevent the SVG from being limited to a specific size. Figure 3 shows a slightly modified SVG that uses the viewbox attribute instead of width and height. It fixed the canvas boundary during painting, and therefore fixed the ratio between width and height; however, it does not fixed the rendering size. If you change the width and height of an embedded element, but keep the relative ratio of width and height unchanged, the SVG image will be scaled accordingly.

An alternative to this non-standard HTML embedded element (especially when it is required to be compatible with XHTML) is to use an object or IFRAME element:

 
<HTML>
<Body>
<Object Data = http://blog.csdn.net/rocky820618/archive/2006/12/29/ "figure1.svg"
Codetype = "image/SVG-xml"
Style = "width: 400; Height: 300;">
</Object>
<IFRAME src = http://blog.csdn.net/rocky820618/archive/2006/12/29/ "figure3.svg" width = "600" Height = "450"/>
</Body>
</Html>
 

Because cascade is allowed when an unsupported type is encountered, this object tag provides a particularly powerful function. For example, the following document tells the browser to first try to render SVG. If it fails (for example, the SVG function is unavailable), the Alternative Grating PNG will be displayed. This structure allows you to create a single page set that supports both SVG and grating content, without necessary branches based on the capabilities of the client browser, as shown below:

<HTML>
<Body>
<Object Data = http://blog.csdn.net/rocky820618/archive/2006/12/29/ "figure1.svg" codetype = "image/SVG-xml"
Style = "width: 400; Height: 300;">

</Object>
</Body>
</Html>
 

There is a warning about object tagging. When developing Microsoft Internet Explorer, Microsoft makes the greatest effort to make it highly scalable. This is manifested in the ability of the browser to instantiate a large number of associated program components to display multimedia web pages (by directly referencing HTML, for example, referencing a specific ActiveX object through codebase/classid, or use the MIME type and find hkey_classes_root \ mime \ database \ content type ). This brings great versatility, But When malicious applications hijack the content type and cause improper presentation at the right time, or when they cannot re-associate Internet Explorer as a handler during uninstallation, the problem may occur. In addition, when I use object tags with SVG, I encounter some inconsistencies and irregularities-this problem does not occur when using embedded tags or IFRAME tags. However, the embedded tag is not supported. Generally, your use may be different, but remember this when you solve the problem of installing a large number of help applications on the client.

Dynamic Content

A powerful feature of SVG is its ability to operate on SVG graphical elements programmatically through internal or external scripts. Figure 4 is an HTML document that encapsulates the figure3.svg image (which can be obtained from the download file at the link at the top of this Article ). This example uses the Adobe SVG Viewer plug-in for Internet Explorer. This example describes the use of ecmascript (JavaScript) in the HTML document used as a container to automatically operate the DOM interface exposed by the SVG viewer. ClickFigure5As shown in the web page, you can switch the color used in the basic shape or control the rotation speed of a group of objects. However, this special case shows only blink tags that are not recommended after the change. It does imply that SVG provides a wide range of possibilities. You can add new objects to a graph or completely modify the existing content. This allows you to create images that are supported by dynamic interpretation prompts. For example, you can give a user a better tool to help him fully understand the information.

Figure 5 Operation shape

SVG deployment

Because of SVG's cutting-edge features and lack of local support from all mainstream browsers, therefore, web site visitors usually need to download and install a dedicated Viewer (such as Adobe SVG viewer or the upcoming Corel SVG Viewer) to see the SVG content on the web page (this should at least continue until the browser supports SVG locally just like most other graphic formats ). Adobe viewer can run on several platforms, including windows, Macintosh and Linux, and almost all mainstream web browsers. Considering that SVG is a widely proven standard, I don't feel like it's a bet on a private format, instead, it is an investment made to play a positive role in the future.

Despite the wide spread of clients installed with SVG, most sites still need to continue to support legacy clients that may not be able to install SVG-specific software. This solution can be easily implemented by generating the graphics infrastructure of SVG (and creating static raster images for legacy clients at the same time. This article will introduce in detail a powerful method to achieve this purpose. Of course, that is, make SVG never directly serve the Web Client, or combine SVG with powerful XML classes in Microsoft. NET Framework at the backend.

Quickly create SVG

The combination of VG's outstanding graphics capabilities and the all-encompassing feature set of Net Framework provides a great opportunity for Web developers. By using data backend and automatic SVG document creation, web sites can provide real-time, beautiful, and interactive graphics to help users better understand and understand information. It also gives Web applications a more professional and elegant appearance.

To make dynamic creation of the root SVG document easier, and to demonstrate the xmldocument derived class with basic SVG intelligence, I created a very common class, as shown in 6. This helper class will be used in the following example. It should be compiled together with the result DLL in the bin directory of the Web application (for example, c: \ Inetpub \ wwwroot \ bin:

 
CSC/Target: Library figure5.cs
Copy figure5.dll c: \ Inetpub \ wwwroot \ bin
 

Figure 7 shows the basis of a Web page generated by SVG. It contains a simple server-side ASP. NET script that responds to the request by returning an SVG file containing the current time in ISO 8601 format. Despite the limited practicality of this example, it does show the simplicity of dynamically creating SVG documents on the server. This example concatenates strings to form an XML document. It can also be implemented by adding each element and attribute using the appropriate DOM method programmatically. This example sets the contenttype attribute of the response object (it can also use the contenttype attribute of the @ page command ). This allows the client to identify content types without relying on cumbersome and unreliable file extensions. However, sometimes a URL contains a false parameter suffix (such ?. SVG) is advantageous because clients (such as opera 6) blindly look for an extension to determine the content type.

In this example, it is worth noting that XML documents are directly transmitted to the output stream without any unnecessary resident in the middle, thus maintaining high performance. This is worth considering when the page needs to meet the real-time needs of a large number of users.

The following is the result SVG generated when the ASP. NET page is called, and the date/time that depends on when the page is called:

 
<? XML version = "1.0" standalone = "yes"?>
<! Doctype SVG public "-// W3C // dtd svg 20010904 // en"
"Http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" []>
<SVG width = "400" Height = "200" xmlns = "http://www.w3.org/2000/svg">
<Text x = "100" Y = "100" font-family = "verdana" font-size = "15"
Fill = "blue"> 2003-03-28t122002-10-29t12: 02: 14 </text>
</SVG>
 

As described above, you can use object tags to include this dynamic SVG document in a basic HTML page:

<HTML>
<Body>
<Center>
<H1> SVG test <Object name = "examplesvg" codebase = "http://www.adobe.com/svg/viewer/
Install/"Data =" figure7.aspx ?. SVG "width =" 400 "Height =" 200"
Type = "image/SVG + XML"/>
</Center>
</Body>
</Html>
 

Drawing with SVG

Many SVG can be dynamically generated based on changes to the data in the database as required. GIS information including regional boundaries and Division or the latest monthly sales amount is an excellent example. As a technical example for dynamically generating SVG documents using data, namespace yafla. yaflasvg (obtain svg_graphing.zip through the link at the top of this article, and compile and install the yafla. yaflasvg. this namespace can be used for CS files) to help convert data into graphs. These graph types include pie charts (seeFigure8) And vertical and horizontal bar charts (seeFigure9). This type of hierarchy has been built in an easy-to-expand object-oriented way, and provides a large number of settings to control the UI of the generated image. Since the generated SVG image is returned in the form of an XML document, you can use the rich XML capabilities in. NET Framework to modify the document before returning it to the caller. Although these graphics cannot replace commercial drawing products, they are excellent entry-level products in the SVG series and provide practical solutions for some readers. Barchart_example.aspx and piechart_example.aspx (also available in download) demonstrate the basic knowledge of dynamically generating graphs using these classes (bar charts and pie charts are created here ). Although these examples are manually created and filled with datatable, it is as simple as searching datatable as the query result, so real dynamic vector graphics is realized.

Figure 8 pie chart

Save bandwidth

Although SVG documents are usually much smaller than the corresponding raster images, the inherent details of XML still generate large files for complex graphics when expressing basic graphics and charts. Fortunately, the SVG standard contains local support for gzip compression (as evidenced in RFC 1952), greatly reducing the size of transmission and storage-typically with a compression rate of 80% or more. Although gzip does increase some additional computing overhead due to compression and decompression, it can be mitigated by appropriate caching on the server side. On the client side, this worry is largely unnecessary, because the speed of modern high-performance processors far exceeds the speed of most network connections. With these factors in mind, we can clearly see that compression is two-pronged, which can not only reduce the bandwidth cost of the host, but also give the client a faster and more flexible web site.

Figure 9 bar chart

For static SVG files, compression is very simple. You only need to perform gzip operations on the files on the server side (the file extension obtained after compression is. svgz ;. SVG is the extension of an uncompressed SVG file. SVG and svgz are associated with the appropriate MIME type (image/SVG + XML), and make sure that the reference points to the compressed copy. In this way, only a small portion of the original required bandwidth can be used. Your clients, especially Internet users who access the Internet through dial-up, will enjoy a faster experience.

Compressing dynamically generated content is a little more complicated. The first step for dynamic compression is to determine whether it has been generated. Can the compressed output stream be sent to the client where the corresponding decompression device is installed in your web environment?Figure10Is a simple script that uses the URL as a parameter (for example, wscript figure9.js http: // 127.0.0.1/mydynamicpage. aspx) and use the MSXML serverxmlhttp object to report whether the URL supports Stream Transfer of compressed content. Another advantage is that it also reports the MIME type returned by the server to the request, so that you can confirm whether the server is correctly configured. It is important to perform a test, because compression can be performed transparently through the Server Load balancer frontend or iis isapi filter (compressed output upon receiving the request). In this case, double compression is unnecessary waste.

If you want to enable dynamic SVG compression, there are a variety of net accessible compression components on the market, including a wide range of functions, reliable commercial software packages, com InterOP packages for existing DLL, and excellent opennessSource codeProject. Many of these solutions are implemented as classes derived from. Net stream objects, so that they can be easily used when using stream objects. From the demonstration perspective, I chose to use C # To write and open the source.CodeThe sharpziplib library can be downloaded at http://www.icsharpcode.net/opensource/sharpziplib.

After the binary DLL is put into the Global Assembly Cache or the/bin directory of the Web application, it is easy to implement Stream Transfer of gzip compressed content, 11 (it is a variant of Figure 7 ). By using the gzip stream interface as a bridge between XML documents and HTTP Response objects, data can be compressed during transmission, which greatly reduces bandwidth requirements. For such a small SVG file, Gzip compression saves a small amount of bandwidth, which may not be worth the candle compared with the increase in computing costs. However, the practical use of documents may bring about great benefits. Compressed _ barchart_example.aspx (available for download) compresses chart components. In this example, the document is reduced from 7,722 to 1,235 bytes (reduced by 84% ).

Backward compatibility

It is unrealistic to expect every user to upgrade their system by using specific components dedicated to your web site. The use of esoteric technologies will cause numerous support calls due to users' worries about being excluded, or for public websites, inevitably, there will be a large number of emails from a few fans who are enthusiastic about everything after HTML 1.0. To avoid this situation, one possibility is to render SVG as a bitmap image on the server, return SVG itself to the supported client, and return bitmap images to other clients. If SVG itself never serves the client, this method is feasible, but it is only used as a dynamic graphics production technology, and it needs to be raster for rendering.

The amount of computing required to capture its GDI output for grating is conceivable. But whether Adobe SVG viewer can be used to present on the server side in their license agreement may mention that it can be verified by accessing the http://www.adobe.com. Another feasible approach is to use the batik Project (http://xml.apache.org/batik/svgrasterizer.html), which can convert SVG to various formats, including PNG, Tiff, PDF, JPEG, and other grating formats (although the lossy JPEG format is generally only applicable to actual images or images with smooth color transitions ). The GIF format is excluded from its output format probably because of license issues. Unfortunately, batik requires you to save SVG to a hard disk (such as a temporary folder) and then process it there and generate a grating image based on the passed parameters. Barchart_example_rasterize.aspx (provided in the download) demonstrates how to carry the width input parameter and use it to generate a grating PNG bar chart of the desired size (for example, http: // localhost/barchart_example_rasterize.asp? Width = 750 ). It is easy to add additional logic to carry a parameter that can select the target file type and generate Graphic Output of various types and sizes. The tricky case is to add logic to integrate the cache into the system. In this case, you need to save the SVG itself and a secondary grating image that will be regenerated as long as the source SVG changes to the cache object (even if it is only saved for a short time ). With this change, you can enable a powerful server-side graphics subsystem, which can meet the needs of dynamic vectors and grating. the cache infrastructure of Net Framework can achieve great scalability and short response time even when the load is high.

For performance and integration considerations, developing a. Net local SVG grating is a good choice, but this project is not covered in this article. As SVG becomes more and more important, implementation will become a reality. SVG also lacks DHTML behavior (supported by VML ). This will be another good field added to the SVG specification.

Summary

By combining the graphics power of SVG with the powerful functionality and versatility of the. NET Framework, you can turn Web applications into an invincible opportunity to process images. By adding dynamic graphic elements, you can make the data clearer, achieve better organizational structure support, and display more perfect and professional images to the outside world. We hope this article will provide sufficient information to meet your needs and encourage you to experience and explore exciting implementations of vector graphics in Web development.

Source:Http://www.microsoft.com/china/msdn/library/webservices/asp.net/ousScalableVectorGraphics.mspx? MFR = true