SLTechnology News&Howtos › Development ›

How to use HTML5 to draw SVG Vector Graphics

Shulou Source: shulou.com Published: 2022-06-03 14:24:07 11月08日 Update

This article mainly introduces how to use HTML5 for SVG vector graphics drawing, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

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, such as 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 be able to view SVG in a browser.

Embed SVG in HTML5

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

...

HTML5-SVG circle

Here is the HTML5 version of a SVG example, drawing a circle with a label:

SVG HTML5 SVG Circle

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

HTML5-SVG rectangle

Here is the HTML5 version of a SVG example, drawing a rectangle with a label:

SVG HTML5 SVG Rectangle

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

HTML5-SVG lines

Here is the HTML5 version of a SVG example, drawing a line with a label:

SVG HTML5 SVG Line

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

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

HTML5-SVG ellipse

Here is the HTML5 version of a SVG example, drawing an ellipse with a label:

SVG HTML5 SVG Ellipse

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

HTML5-SVG polygon

The following is a HTML5 version of a SVG example that draws a polygon with a label:

SVG HTML5 SVG Polygon

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

HTML5-SVG broken line

The following is the HTML5 version of a SVG example, which draws a line chart with labels:

SVG HTML5 SVG Polyline

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

HTML5-SVG gradient

The following is the HTML5 version of a SVG example, which draws an ellipse with a label and defines a SVG radial gradient using the label.

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

SVG HTML5 SVG Gradient Ellipse

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

Thank you for reading this article carefully. I hope the article "how to use HTML5 to draw SVG vector graphics" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!