Community Learn Tools Library Leisure
search
English
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
Release： 2016-05-16 15:45:59
Original
2342 people have browsed it

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)

Related labels：
html5 svg Vector illustration
source：php.cn
Previous article：Summary of ways to achieve animation effects in HTML5 _html5 tutorial skills Next article：Modification of Html5 audio tag style _html5 tutorial skills
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
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template