Industrial Standard vector image format-SVG

Industrial Standard vector image format-SVG

What is SVG?

SVG is short for Scalable Vector Graphics. It is based on XML (eXtensible identification language) and is a brand new standard open vector image and animation format. Unlike traditional binary (plane) images and animations, SVG uses simple unary (text) statements to complete vector images, such as color changes, object motion, filters, masks, sound effects, and other animation effects. SVG creates a myth that uses plain text to complete network multimedia.

SVG features

Vector Image

Images are usually divided into vector images and bitmap images.
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 of vector images is "Independent Resolution ". When an image is displayed or output, the quality of the image is not affected by the resolution of the device. Therefore, a high-definition image can be provided. Compared with bitmap, vector images are more suitable for printing, printing, or outputting directly to small devices such as portable devices. Enlarging or downgrading a vector image does not affect the image quality.
While bitmap images describe images with small points in a grid of pixels. A computer's screen is actually a grid containing a large number of pixels. The bitmap image is affected by the resolution. As a result, image edges are often sawtooth and enlarged "Mosaic. Relatively speaking, bitmap requires more storage space than a vector image.
As a vector image format, SVG also has many advantages of vector graphs and is more suitable for transmission and Application in the network. In addition to the advantages of vector images, SVG also maintains the correct expression function for bitmap images. Using xlink labels in XML, SVG can also call bitmap images in images.

Vector filter

Although SVG images are used as vector images, they have many advantages. However, we also see that there are still many image designers who prefer bitmap creation. This is because bitmap often uses a large number of filter effects, texture maps and space phantom to enhance the visual effect of the image.
However, because the creation of bitmap is directly targeted at pixels, once the effect is added, the designer can hardly modify it. For example, if you output a bitmap image of the atomization effect, you can no longer restore the original clear image.
With the vector filter supported by SVG, designers can also create a large number of popular and common filter effects. In addition, the filter effect is adjustable. Because the SVG vector filter does not directly operate on pixels, it is stored as an independent attribute of an object in the file. You only need to re-adjust these attributes to modify, replace, and delete the filter. SVG vector filters provide great freedom for remote collaboration and secondary editing.
For more information about filter instances, see <SVG Chinese tutorial>.

XML-based

The syntax and structure of SVG are based on XML (eXtensible identification language ). XML is the next generation network development language. It provides far more functions than HTML (hypertext link language) currently used ). As a website becomes more and more complex, website developers also need a better network development language and tool than HTML for better management and interaction. This is XML.
Unlike HTML, XML completely separates website content and website architecture. By defining the structure data type, user-side applications can display and process data, not just HTML, but web pages or data. For example, a phone number defined using an XML tag can be dialed by a browser as needed. XML has excellent scalability, so it has more space and prospects in industrial network applications than HTML.
SVG development and creation are based on XML. Therefore, we can also develop more new functions in SVG to provide more network services. For example, make intelligent data images. The data in the image can be read, modified, and statistical by the application as needed, and finally displayed in the image. These applications are far from HTML and related image technologies.

Text Format

SVG files are in the text format. SVG images and animations have the following text formats:
1. As a text-based format, text in SVG images is also a text format. This is different from the text in the current image and animation. Currently, the text in images and animations is essentially images. Therefore, the words in SVG can be searched by the network search engine as keywords. By using the text defined in SVG, an efficient image search engine can be created. Text in the image can also be searched by the user's browser.
2. SVG images can be conveniently generated dynamically by programming languages. For example, you can use JavaScript, Perl, Java, and other languages to develop an automatic image and Animation Generation System. This is very practical for some database tabulation. Online images can also be dynamically changed in real time based on the relational volume in the background database.
3. SVG fully supports dom (Document Object Model ). Therefore, objects in SVG and SVG can be driven by external events through scripting, such as mouse and keyboard actions, to control themselves or other objects and images, create Interactive images and animations.
4. Because it is a text format, SVG can work well across platforms and solve external output, color mode, network bandwidth, and other problems.
In short, the text format makes SVG more interactive and integrated with other technical standards.

Comparison with GIF and JPEG

GIF and JPEG are commonly used bitmap formats in the network. SVG has many unique advantages over GIF and JPEG:
1. High image quality. Because it is a vector image, the resolution is independent, users can freely scale the image without compromising the image definition. This is useful for viewing certain image details, such as numbers in data images.
2. Text in the image is independent. As described in the previous section, the text in an SVG image is independent of the image and can be edited and queried.
3. Small file size. Because the statements are used to save Images Based on Vector formats, SVG images have smaller file sizes than GIF and JPEG images, making download faster.
4. Stronger color adaptability. SVG images have a 16 million color palette that supports the (International Color Association) color standard and RGB color mode.
5. interactive. SVG is based on XML, so it can easily create powerful dynamic interaction. SVG images provide different responses to user actions, such as highlight, sound effects, special effects, and animations, reflecting the essence of network interaction. However, neither GIF nor JPEG can generate interaction.

Comparison with SwF

The SWF file format is the Flash output file format. In a sense, SwF and SVG have many striking similarities. However, although Flash has become the first choice for network animation design with its superior expression and convenient creation tools, SwF is increasingly popular in the network, we should also see that, compared with SVG, SWF has the following shortcomings:
1. SWF is a non-open standard. This means that the technology is in the hands of individuals, and the development of the technology is limited by all aspects. At the same time, SwF and other open standards do not have a complete integration solution. Although SWF currently provides support for XML, this support is unilateral. With the development of XML and other open standards, the inconsistency of SwF will become increasingly significant.
2. SWF is not editable as SVG. SWF is the final Animation Generation format. Its creation process is encapsulated in the SWF file, and it is almost impossible to perform secondary editing. At the same time, SwF does not support text formats, so it cannot obtain the function of querying text in images similar to SVG.

Application Value of SVG

Network development needs, compatible with other open standards

As PNG is W3C industrial standard for bitmap images, SVG is an industrial standard for solving vector images in networks. before SVG, apart from Macromedia's development of SwF as the vector network file format, there were no other vector files applied in the network. because bitmap files are subject to many limitations, vector files have great application value in graphic printing and transmission. Therefore, appropriate vector standards must be developed and applied, this is SVG.
As a W3C recommendation format, SVG is compatible with other open standards. these standards include dom1, dom2, CSS, XML, xpointer, XSLT, XSL, SMIL, HTML, and xhtm. SVG can be well coordinated with the standardization technologies of other organizations, such as , Uri, Unicode, sRGB, ecmascript/JavaScript, and Java.
Using SVG does not mean that we will abandon the current network image technologies such as GIF, JPEG, SWF. compared with the common file formats, SVG is more suitable for the development of networks. developing and applying SVG means obtaining a better tool and method.

Data Table, image map

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 image generation through variables. this provides a great prospect for the application of network image data tables. in a simple example, the existing ASP can easily construct dynamic data web pages. Using SVG, you can easily draw dynamic data images, such as column charts and pie charts in data analysis.
Making image maps 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 when files are zoomed in and watched, therefore, you can create an image map that contains all the geographical information of a city. files can be enlarged and displayed in different regions based on different viewing needs, each geographic term can contain a text description or corresponding geographical data, but you can click a geographical term to get the explanation description. the size of such an image map file is only K bytes.

Wireless device requirements

Another attractive application prospect of SVG is the development of graphics and animations for wireless devices. for example, for mobile phone products currently in use, the image is mainly wbmp. because this format is a bitmap file, it is limited by transmission size and does not provide a color pattern, so it looks dull. if SVG is used, you only need to install a text parser in a wireless device to identify and display SVG files. At the same time, because it is a vector text file, the file size is not very large, and it is very 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, such as SMIL (multimedia synchronization and Integration Language), you can create an ideal multimedia wireless terminal solution.

Image Search Engine

Unlike the current two-dimensional images, SVG is a file format that enables interaction and query. in SVG images, information is in the form of one-dimensional code and open form. the text is independent of the graphic information. this makes it possible for image search and search. 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.

Changes in web design ideas

Using SVG for webpage design is the next-generation webpage design concept. in the current webpage design, the overall page image is usually drawn in the bitmap image software, then the image is cut, and finally the text on the page is edited. it is usually very tedious to make secondary modifications. with SVG, you can achieve one-step page graphics design and text editing. if you want to perform remote collaboration to complete Web page design, you only need to transmit the created page file, instead of transmitting all the image source files and page files.
Because SVG can be well compatible with HTML and XML, the next generation of web page editing software will begin to combine the image creation function. many of the effects that need to be created through external images or animation software can be directly completed in the Web editing software.
Creating a webpage with SVG will enable web designers to "Draw" pages.

Basic SVG format

Similar to HTML, XML-based SVG also has structured syntax and format. The so-called structure means that objects in a file are defined by a specific element tag. Any element can be managed as an object, and the file is framed. By mastering the basic file framework, you can read, edit, and create your own files.

SVG uses a group of element tags to create and organize files and objects in files. Each SVG file contains the <SVG> </SVG> tag of the outermost layer. This label is used to declare the beginning and end of an SVG file. This is equivalent to the HTML file declaration tag <HTML>

<? XML version = "1.0" encoding = "iso-8859-1"?>
<! Doctype SVG public "-// W3C // dtd svg 20000303 stylable // en"
Http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd;>
<Svg xml: Space = "preserve" width = "5.5in" Height = ". 5in">
...
</SVG>

Where, <? XML version = "1.0" encoding = "iso-8859-1"?> The basic information of "this file is based on XML 1.0 and the encoding method is iso-8859-1" is established.
<! Doctype SVG public "-// W3C // dtd svg 20000303 stylable // en" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd";> although long, as long as you understand it, it is an annotation prompt. It declares the file definition type (DTD ). Document definition type (DTD) is a set of standard rules used to define elements, element attributes, and how to form files. DTD can be customized based on specific needs. This row does not affect the generation of SVG files.
<Svg xml: Space = "preserve" width = "5.5in" Height = ". 5in">
...
</SVG> declares the beginning and end of the SVG file body and the size of the image container. The size of the image container, that is, the size of the final image or animation, is equivalent to the canvas used in the painting.

The syntax and format definitions in the SVG body follow the XML standard. Describes SVG Objects Based on the attributes of various element tags and tags. SVG objects mainly include graphics, paths, and text. For more information about SVG objects, see <SVG practice handouts>. Some examples of creating basic images, animations, and texts in SVG are provided.

The following is an example of calling MP3 music:

<? XML version = "1.0" standalone = "no"?>
<SVG xmlns: A = "http://www.adobe.com/svg10-extensions"; A: timeline = "independent" width = "100%" Height = "100%" viewbox = "0 0 620">

<A: audio xlink: href = "follow.mp3" volume = "10" begin = "0 s" repeatdur = "INDEFINITE">
</A: audio>
</SVG>

Paste the source code above to the windwos notepad, select the file type as all files, and save the file *. SVG (suffixed with your own name). At the same time, place an MP3 file named follow in the folder where the file is saved. If your browser has an SVG Player installed, you can hear MP3 music.

 

SVG creation tools

Currently, the SVG creation tool is still in the development and development stage. There is still no mature software that includes static, dynamic, and interactive functions. here we will introduce several SVG creation software that can be used for research and testing. Adobe appsstator Adobe plays an important role in SVG development. adobe Illustrator 9.0 is an early vector creation software that combines SVG functions. currently, you can create static images and implement some interactive functions. the interaction function requires a handwritten Javascript script. After creating an AI image, select File-> Export (file-> output), select the file type SVG, set relevant properties in the SVG option panel, and output the SVG file, see <