The use of SVG in Web Drawing

First, in the Web project development process, if you need animation or drawing effect of the function, we generally how to deal with? The traditional practice of GIF animation, HTML5 Assembly animation, if the animation needs to interact with the operator, the general use of Flash,flex and sliverlight technology to achieve. These techniques are too complex to use and manipulate, and now I introduce another web-based graphics technology SVG.

Second, what is SVG:

Scalable Vector Graphics (English: Scalable Vector graphics,svg) is a graphic format for describing two-dimensional vector graphics based on Extensible Markup Language (XML). SVG was developed by the consortium and is an open standard.

SVG is a new two-dimensional vector graphics format developed by the World Wide WEB consor-tium Internet Standards Organization in August 2000, and is also the network vector graphics standard in the specification. SVG strictly conforms to the XML syntax and describes the image content in a descriptive language of the text format, so it is a vector graphics format independent of the image resolution.

The SVG format has the following advantages:

Image files are readable, easy to modify and edit (in theory, but in fact because of the various SVG file editors that may be stored as SVG files that are not easy to read), and can be interactively fused with existing technologies. Can be used seamlessly with JavaScript. SVG graphics format supports a variety of filters and special effects, without changing the content of the image can be implemented in bitmap format similar to the effect of text shadow

SVG graphics format can be used to dynamically generate graphics. For example, SVG can be used to dynamically generate interactive maps that are embedded in Web pages and displayed to end users

The downside is the need for browser environment support, but now the mainstream browser has supported SVG drawings (except IE8).

Three, SVG's function and the application scene:

SVG main Features:

1, vector display object, basic vector display object including rectangle, circle, ellipse, polygon, line, arbitrary curve, etc.

2, embedded external image, including PNG, JPEG, SVG, etc.

3, Text object: SVG can achieve dynamic and interactive functions. Based on the DOM model, SVG development designers can use ECMAScript or SMIL for timing control or object manipulation. SVG is a text format, but SVG supports the use of gzip compression algorithms to reduce file size, and compressed files are often referred to as "Svgz files".

SVG Application Scenario:

1, high fidelity complex vector document is and will continue to be the best point of SVG. It is very detailed, suitable for viewing and printing, can be standalone, or can be embedded in a Web page

2, in the Web project plan drawing, such as the need to draw lines, polygons, pictures and so on.

3. Animation in a Web project, such as the need for an object in a plane requires some kind of animation effect.

Iv. How SVG is used:
This article describes the use of svg.js to manipulate SVG drawings.

: http://svgjs.com/

Demo Address: http://svgjs.com/test/

Instructions for use document address: Http://documentup.com/wout/svg.js

In fact, according to the above I sorted out the contents of the address, it can be used initially. I have categorized some of the objects and behaviors in Svgjs to make it easy for you to understand:

1. Create SVG objects and get SVG objects:
Vardraw = SVG (' drawing '). Size (300, 300) where ' drawing ' can be either a Div object or an SVG object, you can get to the current SVG operand. If it is a Div object, an SVG object is created under the current Div, and if it is an SVG object, it is obtained directly.

2. SVG Vector object:
Rect rectangles, Ellipse circles, circle polygons, line lines, Path lines, image images, text text.

3. Animation effect:
Animate () animation, pause () stop, play play, during simultaneous, loop loop, after, move () moves, etc.

4. Sample code:
Vardraw = SVG (' drawing '). Size (300, 300);

var rect = Draw.rect (+). attr ({fill: ' #f06 '});
Rect.animate (). Move (200, 200);

Rect.mouseenter (function () {this.pause ()}) Rect.mouseleave (function () {This.play ()});

Five, Summary:

SVG is based on XML as well as HTML semantics and has good interactivity. At present, SVG has been widely used in various systems, and the main browser has begun to vigorously support SVG graphics, is a rare good technology.

The use of SVG in Web Drawing