An in-depth analysis of SVG_html5 tutorial techniques in HTML5

SVG Background

SVG is the abbreviation of Scalable Vector Graphics, which means scalable vector graphics. In 1998, the World Wide Web Consortium established a working group to develop a technology for expressing vector graphics through XML - SVG! Since SVG is also an XML file, SVG also inherits the advantages of XML's openness, portability and interactivity. Nowadays, almost all major browsers support SVG. You can get more compatibility information from here, including:

Use or

* SVG
* Basic content
* SVG is not exclusive content of HTML5
* HTML5 provides native content about SVG
* Before the emergence of HTML5, there was SVG content
* SVG, simply speaking, is a vector image
* The extension of SVG file is ".svg"
* SVG uses XML syntax
* Concept
* SVG is a description using XML technology The language of two-dimensional graphics
* Features of SVG
* SVG drawn graphics can be crawled by search engines
* SVG can be enlarged without reducing the quality of the image
* The difference between SVG and Canvas
* SVG
* Does not depend on resolution
* Supports event binding
* Programs with large rendering areas (such as Baidu Maps)
* Cannot be used to implement web games
* Canvas
* Depends on resolution
* Does not support event binding
* Most suitable for web games
* Save images in ".jpg" format
* Usage
* Some small files on web pages Icons
* Dynamic special effects (animation effects) in web pages
* Use SVG in HTML5
* Use elements
* Function - similar to elements
* The default size is 300px*150px
* Use CSS style
* Use SVG to draw graphics, you must define the
* Draw graphics
* Rectangular element

Copy the code

The code is as follows:

* Circle element







* Ellipse element






* Line element







body>
* Polyline element



Element - Polyline
* points - Set the starting point, vertex and end point
* Use "," to separate x and y
* Use between multiple points Space separated
Characteristics of polyline
* The area in the polyline (starting point to end point) is provided in black by default
-->



* Polygonal element






* Special effect elements
* Gradient - the gradient element is defined within the element
* Linear gradient -
* This element is the starting element

* Sector (Ray) Gradient-
* Filter-Gaussian Blur
* Filter uses element
* Element-Gaussian Blur
* in="SourceGraphic"
* stdDeviation - Set the blur level

Copy code

The code is as follows:

Change for the sake of life, create for the sake of change.