search

Home >Web Front-end >H5 Tutorial >An introductory tutorial for drawing SVG vector graphics using HTML5_html5 tutorial tips

An introductory tutorial for drawing SVG vector graphics using HTML5_html5 tutorial tips

WBOY
WBOYOriginal
2016-05-16 15:45:592337browse

VG stands for Scalable Vector Graphics, a language for describing 2D graphics. Graphics applications are written using XML, which is then 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 __... tag, the following is a simple syntax:

XML/HTML CodeCopy content to clipboard
  1. <svg xmlns="http://www .w3.org/2000/svg"> 
  2. ... 
  3. svg>

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

XML/HTML CodeCopy content to clipboard
  1. >  
  2. <head>  
  3. <title>SVGtitle>  
  4. <meta charset="utf-8" />  
  5. head>  
  6. <body>  
  7. <h2>HTML5 SVG Circleh2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />  
  10. svg>  
  11. body>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112130340.jpg (223×186)


HTML5 - SVG 矩形
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个矩形：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <head>  
  3. <title>SVGtitle>  
  4. <meta charset="utf-8" />  
  5. head>  
  6. <body>  
  7. <h2>HTML5 SVG Rectangleh2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <rect id="redrect" width="300" height="100" fill="red" />  
  10. svg>  
  11. body>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112200272.jpg (316×152)


HTML5 - SVG 线条
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个线条：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <head>  
  3. <title>SVGtitle>  
  4. <meta charset="utf-8" />  
  5. head>  
  6. <body>  
  7. <h2>HTML5 SVG Lineh2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <line x1="0" y1="0" x2="200" y2="100"  
  10.           style="stroke:red;stroke-width:2"/>  
  11. svg>  
  12. body>  
  13. html>  

你可以使用 style 属性给它设置额外的样式信息，比如笔画，填充色，笔画宽度等等。

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112220725.jpg (217×159)


HTML5 - SVG 椭圆
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <head>  
  3. <title>SVGtitle>  
  4. <meta charset="utf-8" />  
  5. head>  
  6. <body>  
  7. <h2>HTML5 SVG Ellipseh2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />  
  10. svg>  
  11. body>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112240763.jpg (225×148)


HTML5 - SVG 多边形
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个多边形：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <head>  
  3. <title>SVGtitle>  
  4. <meta charset="utf-8" />  
  5. head>  
  6. <body>  
  7. <h2>HTML5 SVG Polygonh2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <polygon  points="20,10 300,20, 170,50" fill="red" />  
  10. svg>  
  11. body>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112258796.jpg (310×118)


HTML5 - SVG 折线
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个折线图：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <head>  
  3. <title>SVGtitle>  
  4. <meta charset="utf-8" />  
  5. head>  
  6. <body>  
  7. <h2>HTML5 SVG Polylineh2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.  <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />  
  10. svg>  
  11. body>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112318049.jpg (245×114)


HTML5 - SVG 渐变
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆，使用 标签定义一个 SVG 径向渐变。

我们可以以类似的方式用 标签创建 SVG 线性渐变。

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <head>  
  3. <title>SVGtitle>  
  4. <meta charset="utf-8" />  
  5. head>  
  6. <body>  
  7. <h2>HTML5 SVG Gradient Ellipseh2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.    <defs>  
  10.       <radialGradient id="gradient" cx="50%" cy="50%" r="50%"  
  11.       fx="50%" fy="50%">  
  12.       <stop offset="0%" style="stop-color:rgb(200,200,200);   
  13.       stop-opacity:0"/>  
  14.       <stop offset="100%" style="stop-color:rgb(0,0,255);   
  15.       stop-opacity:1"/>  
  16.       radialGradient>  
  17.    defs>  
  18.  <ellipse cx="100" cy="50" rx="100" ry="50"
  19.  style="fill:url(#gradient)" />
  20. svg>
  21. body>
  22. html>

In the latest version of FireFox with HTML5 enabled this results:
2016219112338977.jpg (319×157)

Statement：
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
Previous article：Summary of ways to achieve animation effects in HTML5 _html5 tutorial skillsNext article：Summary of ways to achieve animation effects in HTML5 _html5 tutorial skills

Related articles

See more