HTML5 Advanced -8 HTML5 SVG (overview, elements)

I. Overview of SVG

SVG Concepts

-SVG (Scalable Vector graphics) is a language that uses XML technology to describe two-dimensional graphics

-SVG can be used to describe two-dimensional graphics in three different ways

-Vector diagram (vector graphic shapes), such as a line or curve-formed path

-Pictures (Images)

-Texts (text)

SVG Advantages

-SVG can be created and modified by a text editor

-SVG can be searched, indexed, school-based, and compressed

-SVG can be printed with high quality at any resolution

-SVG can be amplified in the case of image quality not falling

The difference between SVG and Canvas

-SVG

-No resolution dependent

-Supports event handlers

-Best for applications with large rendering areas (e.g. Baidu map)

-Not suitable for games

-Canvas

-Dependent resolution

-Event handlers are not supported

-Ability to save result images in ". png" or ". jpg" format

-the most suitable image-intensive game

SVG Example

-Draw a rectangle with a black-edged blue bottom:

<svg width= "100%" height= "> <rect x=" "" y= "" width= "," height= "," the "" Blue "fill=" stroke= "Black "Stroke-width=" 4 "/> </svg>

-SVG Tags: for embedding svg images

-rect tag: used to describe the shape as a rectangle

X and Y properties: The coordinate value representing the upper-left point of the rectangle

Stroke property: Represents the border color of the rectangle

Stroke-width property: Represents the border width of the rectangle

How to use SVG

-Separate SVG file form

-Using an XML file definition:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/48/wKiom1b7V4SC5bz9AAApVJ5cRVs086.png "title=" Web.png "alt=" Wkiom1b7v4sc5bz9aaapvj5crvs086.png "/>

-Specify a special namespace:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/48/wKiom1b7V5zzzxEPAAAnFquhpww840.png "title=" Web.png "alt=" Wkiom1b7v5zzzxepaaanfquhpww840.png "/>

-Define SVG in the same way as HTML

-Embed HTML pages with SVG tags

-Embed in HTML pages with tags such as embed, object, and IFRAME

-embedded in the XHTML page

Ii. SVG Elements

SVG element types

-SVG pre-defined elements

-Rectangular elements

-Round elements

-Ellipse element

-Line elements

-Polyline Elements

-Polygon Elements

-SVG effect elements

-SVG Filter

-SVG Gradient

SVG Rectangle Element

-SVG uses <rect> tags to create rectangles with the following code:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/44/wKioL1b7XBKDLbFJAABAuYqi9KE251.png "title=" Web.png "alt=" Wkiol1b7xbkdlbfjaabauyqi9ke251.png "/>

-Rect width and Height properties: Defines the rectangle's widths and heights

-The Style property is used to define CSS properties

-CSS's Fill property defines the padding color of the rectangle CSS's Stoke-width property defines the width of the rectangle border

-The Stroke property of the CSS defines the color of the rectangle's border

SVG round Elements

-SVG uses <circle> tags to create a round shape with the following code:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/48/wKiom1b7W8GwcmCOAAA0AfswJKo408.png "title=" Web.png "alt=" Wkiom1b7w8gwcmcoaaa0afswjko408.png "/>

-CX and CY Properties define the x and Y coordinates of the dots (if you omit CX and CY, the center of the circle is set to (0,0))

-R property defines the radius of the circle

SVG Ellipse Element

-SVG uses <ellipse> tags to create ellipses with the following code:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/44/wKioL1b7XNqRlq0bAABCoqUofuw381.png "title=" Web.png "alt=" Wkiol1b7xnqrlq0baabcoquofuw381.png "/>

-CX attribute defines the x-coordinate of a dot

-CY Property defines the y-coordinate of the dot

-Rx attribute defines the horizontal radius

-Ry property defines the vertical radius

SVG line Elements

-SVG uses <line> tags to create ellipses with the following code:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/49/wKiom1b7aZaTluPQAAAy9MxtuVA576.png "title=" Web.png "alt=" Wkiom1b7azatlupqaaay9mxtuva576.png "/>

-The X1 property defines the beginning of the line in the x-axis

-The Y1 property defines the start of the line in the y-axis

-X2 Property Defines the end of the line on the X axis

-The Y2 property defines the end of the line in the y-axis

SVG polyline Elements

-SVG uses <polyline> tags to create ellipses with the following code:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/45/wKioL1b7bEHCGy8oAAA2QE7E4U4197.png "title=" Web.png "alt=" Wkiol1b7behcgy8oaaa2qe7e4u4197.png "/>-Points attribute for storing x and Y coordinate values of start, vertex, and end points in a polyline

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/4A/wKiom1b7bTfzv1zmAAAjDrBNQq8118.png "title=" Web.png "alt=" Wkiom1b7btfzv1zmaaajdrbnqq8118.png "/>

SVG Polygon Elements

-SVG uses <polygon> tags to create polygons with a lot of three edges, the code is as follows:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/45/wKioL1b7b-ewup5QAAA9mtLpuHw234.png "title=" Web.png "alt=" Wkiol1b7b-ewup5qaaa9mtlpuhw234.png "/>

-The Points property defines the x and y coordinates of each corner of the polygon

SVG Gaussian blur filter element

-SVG Use <filter> tags to create filters

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/46/wKioL1b7cvrSTAjHAABNhDtO6pY456.png "title=" Web.png "alt=" Wkiol1b7cvrstajhaabnhdto6py456.png "/>

-SVG uses <linearGradient> tags to create linear gradients

-<filter> Tag ID property to define a unique name for the filter (the same filter can be used by multiple elements in the document)

-The filter effect is defined by the <feGaussianBlur> tag

-The Stddeviation attribute of the <feGaussianBlur> tag defines the degree to which the blur is

-in= "sourcegraphic" This section defines the effect created by the entire image

-SVG uses <ellipse> tags to invoke a linear gradient:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/4A/wKiom1b7eh7B_QWJAAAvxwLdOVo564.png "title=" Web.png "alt=" Wkiom1b7eh7b_qwjaaavxwldovo564.png "/>-filter:url attribute to link elements to the filter. When you link a filter ID, you must use the # character

SVG gradient Elements

-The concept of gradients

-a gradient is a smooth transition from one color to another (multiple colors can be applied to the same element)

-SVG Gradient Type

-SVG linear gradient, using <linearGradient> tags to define linear gradients

-SVG radioactive gradients, using <radialGradient> tags to define radioactive gradients

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/46/wKioL1b7fGzBo2KMAAAhc5Emquo542.png "title=" Web.png "alt=" Wkiol1b7fgzbo2kmaaahc5emquo542.png "/>

-SVG uses <linearGradient> tags to create a linear gradient:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/46/wKioL1b7fNmDU2BGAAIDLtj3PaA757.png "title=" Web.png "alt=" Wkiol1b7fnmdu2bgaaidltj3paa757.png "/>-SVG using <linearGradient> tags to create a linear gradient

-The id attribute of the <linearGradient> tag can define a unique name for the gradient

-The X1,x2,y1,y2 property of the <linearGradient> tag defines the start and end positions of the gradient

-The color range of the gradient can be composed of two or more colors. Each color is specified by a <stop> tag. The Offset property is used to define the start and end positions of the gradient

-SVG uses <ellipse> tags to invoke linear gradients

-Fill:url (#orange_red) property to link the ellipse element to this gradient

Summary: This chapter mainly introduces the next HTML5 SVG (overview, elements)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced -8 HTML5 SVG (overview, elements)