SVG vector graph technology

1. SVG Overview:

SVG (Scalable Vector Graphics, Scalable Vector Graphics) is W 3c An open standard text-style vector graphic description language, which is an XML-based image format specially designed for the network. SVG is a language that uses XML to describe two-dimensional graphics. SVG graphics can be dynamic and interactive. SVG can be used to display a variety of high-quality vector images on the web page.

In the future, there will be more standard format graphics files on the Network: GIF, JPEG, PNG, SVG... the reason for this is that the SVG standard is composed of many manufacturers and 3c The purpose is to create a new, scalable, and open graphic format on the network.

Ii. SVG features:

1. SVG is a vector image.

Vector images use point, line, and other vector data to describe the image, and contain color and position information in the image. The biggest advantage is that the arbitrary scaling of the image does not affect the resolution, or the definition of resolution in the vector graph is fuzzy. In addition, the vector graph has no relationship with the device resolution in the Process of display and output.

As a vector image format, SVG can correctly express bitmap images in addition to its advantages.

2. SVG is created based on XML

XML is W 3c The developed network development language has far more functions than the current HTML language. The XML language provides better management and interaction functions than the HTML language. XML completely separates the content and framework of the website. By defining the structure data type, website users can use the client program to display and process data independently and have good scalability.

The syntax and structure of SVG are based on XML, so it has good scalability.

3. SVG supports vector filters.

Comparing vector images and bitmap images, we can find that bitmap images can use a large number of filter effects, texture maps, space Phantom and other special effects to enhance the visual effects of images. This is one of the important reasons why bitmap images are adopted by the majority of designers. With the appearance of the SVG vector image format, this situation has changed. Using the vector filter supported by SVG, you can create various filter effects, and more importantly, these filter effects can be adjusted after they appear. The analysis shows that the vector filter used by SVG does not directly operate on pixels, but exists in the text as an independent attribute of the object. The modification to the image effect is only to adjust this attribute of the image. SVG's support for vector filters provides space for remote collaboration and redevelopment.

4. SVG follows the text format

The SVG file format is text. SVG images and animations have the following text formats:

(1) text in SVG images is also in text format

This feature is completely different from the current "text" in images and animations. To be precise, the text in images and animations are essentially images. Based on this feature, the text in SVG can be searched by the network search engine as a keyword, and a very efficient image search engine can be created. You can search for the keywords provided by the SVG image to search for the relevant SVG image.

(2) SVG images can be dynamically generated by programming languages

For example, an animation generation system can be developed using JavaScript, Perl, Java, and other programming languages. This feature is very useful for database tabulation. Online SVG images can be dynamically changed in real time based on the amount of relationships in the database.

(3) SVG fully supports dom (Document Object Model)

Dom (Document Object Model) is a document platform. She regards documents as a node tree composed of a series of elements, allows programs or scripts to dynamically store or upload the content, structure, or style of a file.

Using the DOM defined for SVG, you can easily make SVG animations through script statements. Objects in SVG and SVG can be driven by external events through the scripting language, such as the mouse action (onclick) and keyboard action, to control themselves or other objects and graphics, create Interactive images and animations.

(4) SVG cross-platform job

Because SVG images are in plain text format, they are not restricted by the operating platform and can solve a series of problems such as external output, color mode, and network bandwidth.

(5) Secondary editability

Compared with the Flash format of the same vector image, this point is particularly outstanding. SWF is the format of the Flash output file. As the final Animation Generation format, its creation process is encapsulated in SWF and cannot be edited twice. Once the flash is output into the SWF file, it cannot be modified, unless you have the original FLA file. Although this is meaningful in intellectual property protection, it is inconvenient to update and use resources. For SVG, because it is a text format with a structure and syntax similar to HTML, it can be opened and edited by using notepad.

Iii. Application of SVG

(1) network development needs, and compatibility with other open standards

SVG is an industrial standard for solving vector images in networks. As W 3c Recommended format. SVG is compatible with other open standards. These standards include dom1, dom2, CSS, XML, XSL, SMIL, HTML, and XHTML. Compared with the existing network image formats such as GIF, JPEG, and SWF, SVG is more suitable for the development of the network. developing and applying SVG means obtaining a better tool and method.

(2) Data Tables and image maps

In the field of application, SVG can be very suitable for applications in data tables and image maps. In the source file of SVG, you can easily control the graphics generated by using variables. This provides a great prospect for the use of graph data tables.

Creating a graphic map is also a major advantage of SVG. Because SVG is a vector format, images can achieve the same effect at any display resolution, and there will be no quality loss if you zoom in on a file, therefore, you can create an image map that contains geographical information and text information. It also provides interactive and search functions.

(3) wireless device requirements

Another attractive application prospect of SVG is the graphics and animation of open method devices. With SVG, you only need to install a text parser in a wireless device to identify and display SVG files. Meanwhile, because it is a vector text file, the file size is not very large, and it is suitable for wireless product network transmission. SVG also provides animation and multimedia editing functions. Therefore, it supports 2D flat animations and playing audio and video files. With some other technologies (SMIL), you can create an ideal multimedia wireless terminal solution.

(4) Image Search Engine

In SVG images, information is in the text format and open form. Text is independent of image information, which makes it possible for image search and query. For example, in an SVG animation, you can search for a keyword to query the corresponding information in the image. This is impossible for SWF, which is also a vector image and an animation format. Based on the interaction of SVG, large image search engines can be created.

(5) web publishing of images

Because SVG has many features suitable for network applications, such as openness, secondary editing, and excellent compression quality, it is very suitable for the Web release of 2D vector graphics files and has become a hot topic of research. For example 《Design and Implementation of an SVG-based Oracle Network PlatformAndSVGWeb release with architectural design drawings.

(6) dynamically generate images

On the server side, extract updated data from the database, convert it to an XML document, and use Dom to parse the document to form an SVG file. The client browser uses the SVG plug-in to browse images. For example 《Real-time release mode of SVG-based Image InformationAndXML-SVG-Based Image Dynamic Update and animation Play System implementation.

Iv. Summary

As a vocabulary of XML, SVG has many advantages, such as good data storage format, scalability, high structuring, and easy network transmission. It has an infinite future. However, currently, SVG is not supported by browsers, and users still need to download specialized plug-ins to browse.