Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use HTML5 for SVG vector graphics replacement", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use HTML5 for SVG vector graphics replacement" bar!

VG stands for scalable vector graphics, a language used to describe 2D graphics. Graphic applications are written in XML, and XML is presented by a SVG reader program.

SVG is mainly used for vector type charts, some pie charts, two-dimensional graphs in the XQuery Y coordinate system, and so on.

SVG became a W3C recommendation on January 14, 2003, and you can view the latest version of the SVG specification on the SVG specification page.

View the SVG file

Most Web browsers can display SVG, just as they can display PNG,GIF and JPG graphics. IE users may need to install an Adobe SVG reader to enable browsers to view SVG.

Embedding SVG HTML5 in HTML5 allows us to directly use _ _... The tag is embedded in SVG. Here is a simple syntax:

XML / HTML code copies content to text

< svg xmlns = " http://www.w3.org/2000/svg" >

...

HTML5-SVG circle

The following is the HTML5 version of a SVG example, placing a circle with a label:

XML / HTML code copies content to text

< title >

SVG

< meta charset = " utf-8" />

< h3 >

HTML5 SVG circle

< svg id = " svgelem" height = " 200" xmlns = " http://www.w3.org/2000/svg" >

< circle id = " redcircle" cx = " 50" cy = " 50" r = " 50" fill = " red" />

The following results are generated in the latest version of FireFox with HTML5 enabled:

2016219112130340.jpg (223 × 186)

HTML5-SVG rectangle

The following is the HTML5 version of a SVG example, placing a rectangle with a label:

XML / HTML code copies content to text

< title >

SVG

< meta charset = " utf-8" />

< h3 >

HTML5 SVG rectangle

< svg id = " svgelem" height = " 200" xmlns = " http://www.w3.org/2000/svg" >

< rect id = " redrect"宽度= " 300"高度= " 100" fill = " red" />

The following results are generated in the latest version of FireFox with HTML5 enabled:

2016219112200272.jpg (316 × 152)

HTML5-SVG

Below the line is the HTML5 version of a SVG sample, placing a line with a label:

XML / HTML code copies content to text

< title >

SVG

< meta charset = " utf-8" />

< h3 >

HTML5 SVG Lin

< svg id = " svgelem" height = " 200" xmlns = " http://www.w3.org/2000/svg" >

You can use the style property to set additional styling information, some strokes, fill colors, stroke width, and so on.

The following results are generated in the latest version of FireFox with HTML5 enabled:

2016219112220725.jpg (217 × 159)

HTML5-SVG ellipse

The following is the HTML5 version of a SVG example, with an ellipse placed with a label:

XML / HTML code copies content to text

< title >

SVG

< meta charset = " utf-8" />

< h3 >

HTML5 SVG ellipse

< svg id = " svgelem" height = " 200" xmlns = " http://www.w3.org/2000/svg" >

The following results are generated in the latest version of FireFox with HTML5 enabled:

2016219112240763.jpg (225 × 148)

HTML5-SVG

At the top and below is a HTML5 version of a SVG example, with an attachment with a label:

XML / HTML code copies content to text

< title >

SVG

< meta charset = " utf-8" />

< h3 >

HTML5 SVG polygon

< svg id = " svgelem" height = " 200" xmlns = " http://www.w3.org/2000/svg" >

The following results are generated in the latest version of FireFox with HTML5 enabled:

2016219112258796.jpg (310 × 118)

HTML5-SVG broken line

The following is a HTML5 version of a SVG example, with a line chart placed with a label:

XML / HTML code copies content to text

< title >

SVG

< meta charset = " utf-8" />

< h3 >

HTML5 SVG broken line

< svg id = " svgelem" height = " 200" xmlns = " http://www.w3.org/2000/svg" >

The following results are generated in the latest version of FireFox with HTML5 enabled:

2016219112318049.jpg (245x114)

HTML5-SVG

Scrolling below is the HTML5 version of a SVG example, with an ellipse placed with a label and a SVG radial size defined with the label.

We can create SVG linear variables with tags in a similar way.

XML / HTML code copies content to text

< title >

SVG

< meta charset = " utf-8" />

< h3 >

HTML5 SVG gradient ellipse

< svg id = " svgelem" height = " 200" xmlns = " http://www.w3.org/2000/svg" >

< defs >

< radialGradient id = " gradient" cx = " 50％" cy = " 50％" r = " 50％" fx = " 50％" fy = " 50％" >

< Stop offset = " 0％" style =" stop-color：rgb（200,200,200）; stop-opacity：0" />

< Stop offset = " 100％" style =" stop-color：rgb（0,0,255）; stop-opacity：1" />

Thank you for your reading, the above is the content of "how to use HTML5 for SVG vector graphics replacement". After the study of this article, I believe you have a deeper understanding of how to use HTML5 for SVG vector graphics replacement, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.