Code for drawing SVG vector graphics using HTML5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Code for drawing SVG vector graphics using HTML5

Jun 20, 2018 am 10:00 AM

html5 svg Vector illustration

This article mainly introduces the introductory tutorial for using HTML5 to draw SVG vector graphics, including the introduction of basic graphics drawing and simple gradient effects. Note that the old version of IE does not support it well. Friends who need it can refer to it. Below

VG stands for Scalable Vector Graphics, which is a language used to describe 2D graphics. Graphics applications are written using XML, and then the XML is rendered by an SVG reader program.

SVG is mainly used for vector type charts, such as pie charts, two-dimensional charts in X, Y coordinate systems, etc.

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

View SVG files
Most web browsers can display SVG, just like they can display PNG, GIF, and JPG graphics. IE users may need to install Adobe SVG Reader to be able to view SVG in the browser.

Embed SVG in HTML5
HTML5 allows us to embed SVG directly using the __<svg>...</svg> tag. The following is a simple syntax:

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
...       
&lt;/svg&gt;

Copy after login

HTML5 - SVG Circle

Here is an HTML5 version of an SVG example, using the <circle> tag to draw a circle:

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;HTML5 SVG Circle&lt;/h2&gt;
&lt;svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;circle id=&quot;redcircle&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;red&quot; /&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Will work in the latest version of FireFox with HTML5 enabled Produces the following result:

2016219112130340.jpg (223×186)

##HTML5 - SVG Rectangle
Here is an HTML5 version of an SVG example, using the <rect> tag Drawing a rectangle:

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;HTML5 SVG Rectangle&lt;/h2&gt;
&lt;svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;rect id=&quot;redrect&quot; width=&quot;300&quot; height=&quot;100&quot; fill=&quot;red&quot; /&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

In the latest version of FireFox with HTML5 enabled, this results:

2016219112200272.jpg (316×152)

##HTML5 - SVG Line
The following is an HTML5 version of an SVG example, using the <line> tag to draw a line:

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;HTML5 SVG Line&lt;/h2&gt;
&lt;svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;200&quot; y2=&quot;100&quot;
          style=&quot;stroke:red;stroke-width:2&quot;/&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

You can use the style attribute to set additional style information for it, such as stroke, fill color, Stroke width, etc.

In the latest version of FireFox with HTML5 enabled, the following results will be generated:

2016219112220725.jpg (217×159)

HTML5 - SVG Ellipse
The following is a HTML5 version of the SVG example, using the <ellipse> tag to draw an ellipse:

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;HTML5 SVG Ellipse&lt;/h2&gt;
&lt;svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;ellipse cx=&quot;100&quot; cy=&quot;50&quot; rx=&quot;100&quot; ry=&quot;50&quot; fill=&quot;red&quot; /&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

In the latest version of FireFox with HTML5 enabled, this results:

2016219112240763.jpg (225×148)

##HTML5 - SVG Polygon

Here is an HTML5 version of an SVG example, using the <polygon> tag to draw a polygon:

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;HTML5 SVG Polygon&lt;/h2&gt;
&lt;svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;polygon  points=&quot;20,10 300,20, 170,50&quot; fill=&quot;red&quot; /&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

In the latest version of FireFox with HTML5 enabled will produce the following results:

2016219112258796.jpg (310×118)

HTML5 - SVG Polyline

Here is an HTML5 version of the SVG example, using <polyline> ; tag draws a line chart:

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;HTML5 SVG Polyline&lt;/h2&gt;
&lt;svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
 &lt;polyline points=&quot;0,0 0,20 20,20 20,40 40,40 40,60&quot; fill=&quot;red&quot; /&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

In the latest version of FireFox with HTML5 enabled, the following results will be generated:

2016219112318049.jpg (245×114)

HTML5 - SVG Gradient

The following is an HTML5 version of an SVG example using the <ellipse> tag to draw an ellipse and the <radialGradient> tag to define an SVG radial gradient.
We can create SVG linear gradients in a similar way using the <linearGradient> tag.

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;HTML5 SVG Gradient Ellipse&lt;/h2&gt;
&lt;svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
   &lt;defs&gt;
      &lt;radialGradient id=&quot;gradient&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;50%&quot;
      fx=&quot;50%&quot; fy=&quot;50%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(200,200,200);   
      stop-opacity:0&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; style=&quot;stop-color:rgb(0,0,255);   
      stop-opacity:1&quot;/&gt;
      &lt;/radialGradient&gt;
   &lt;/defs&gt;
   &lt;ellipse cx=&quot;100&quot; cy=&quot;50&quot; rx=&quot;100&quot; ry=&quot;50&quot;
      style=&quot;fill:url(#gradient)&quot; /&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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

The above is the entire content of this article, I hope it will be helpful to everyone's learning , please pay attention to the PHP Chinese website for more related content! 2016219112338977.jpg (319×157)

Related recommendations:

How to use HTML5 File interface is used to download files on the web page

html5How to achieve the animation effect of picture rotation

Canvas of HTML5 Implement the method of drawing curve

The above is the detailed content of Code for drawing SVG vector graphics using HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn