Tutorial pengenalan untuk melukis grafik vektor SVG menggunakan petua tutorial HTML5_html5

VG bermaksud Grafik Vektor Boleh Skala, bahasa untuk menerangkan grafik 2D aplikasi ditulis menggunakan XML, yang kemudiannya dipaparkan oleh program pembaca SVG.

SVG digunakan terutamanya untuk carta jenis vektor, seperti carta pai, carta dua dimensi dalam sistem koordinat X, Y, dsb.

SVG menjadi pengesyoran W3C pada 14 Januari 2003. Anda boleh melihat versi terkini spesifikasi SVG pada halaman Spesifikasi SVG.

Lihat fail SVG
Kebanyakan penyemak imbas web boleh memaparkan SVG, sama seperti mereka boleh memaparkan grafik PNG, GIF dan JPG. Pengguna IE mungkin perlu memasang Adobe SVG Reader untuk dapat melihat SVG dalam penyemak imbas.

Benamkan SVG dalam HTML5
HTML5 membolehkan kami membenamkan SVG secara langsung menggunakan teg __, berikut ialah sintaks mudah:

Kod XML/HTMLSalin kandungan ke papan keratan

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

HTML5 - Bulatan SVG
Berikut ialah versi HTML5 contoh SVG, menggunakan teg

Kod XML/HTMLSalin kandungan ke papan keratan

1. >  
2. <kepala>  
3. <tajuk>SVGtajuk>  
4. <meta charset="utf- 8" />  
5. kepala>  
6. <badan>  
7. <h2>HTML5 SVG Bulatan h2>  
8. <svg id="svgelem"  tinggi="200" xmlns="http://www.w3.org/2000/svg">  
9.     <bulatan id="bulatan merah"  cx="50" cy="50" r="50" isi ="merah" />  
10. svg>  
11. badan>  
12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

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

Kod XML/HTML复制内容到剪贴板

1. >  
2. <kepala>  
3. <tajuk>SVGtajuk>  
4. <meta charset="utf- 8" />  
5. kepala>  
6. <badan>  
7. <h2>HTML5 SVG Rectangle h2>  
8. <svg id="svgelem"  tinggi="200" xmlns="http://www.w3.org/2000/svg">  
9.     <betul id="redrect"  lebar="300" tinggi="100" isi="merah" / >  
10. svg>  
11. badan>  
12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

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

Kod XML/HTML复制内容到剪贴板

1. >  
2. <kepala>  
3. <tajuk>SVGtajuk>  
4. <meta charset="utf- 8" />  
5. kepala>  
6. <badan>  
7. <h2>HTML5 SVG Line h2>  
8. <svg id="svgelem"  tinggi="200" xmlns="http://www.w3.org/2000/svg">  
9.     <baris x1="0"  y1="0" x2="200" y2="100"  
10.           gaya="stroke:red;stroke-width:2"/>  
11. svg>  
12. badan>  
13. html>  

gaya 你可以使用 属性给它设置额外的样式信息，比如笔画，填充色，笔画充色，笔画宽度。在启用 HTML5 的最新版 FireFox 中会生成如下结果：

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

Kod XML/HTML复制内容到剪贴板

1. >  
2. <kepala>  
3. <tajuk>SVGtajuk>  
4. <meta charset="utf- 8" />  
5. kepala>  
6. <badan>  
7. <h2>HTML5 SVG Ellipse h2>  
8. <svg id="svgelem"  tinggi="200" xmlns="http://www.w3.org/2000/svg">  
9.     <elips cx="100"  cy="50" rx="100" ry="50" isi ="merah" />  
10. svg>  
11. badan>  
12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

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

Kod XML/HTML复制内容到剪贴板

1. >  
2. <kepala>  
3. <tajuk>SVGtajuk>  
4. <meta charset="utf- 8" />  
5. kepala>  
6. <badan>  
7. <h2>HTML5 SVG Polygon h2>  
8. <svg id="svgelem"  tinggi="200" xmlns="http://www.w3.org/2000/svg">  
9.     <poligon  mata="20, 10 300,20, 170,50" isi="merah"  />  
10. svg>  
11. badan>  
12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

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

Kod XML/HTML复制内容到剪贴板

1. >  
2. <kepala>  
3. <tajuk>SVGtajuk>  
4. <meta charset="utf- 8" />  
5. kepala>  
6. <badan>  
7. <h2>HTML5 SVG Polyline h2>  
8. <svg id="svgelem"  tinggi="200" xmlns="http://www.w3.org/2000/svg">  
9.  <poliline mata="0, 0 0,20 20,20 20,40 40,40 40,60" isi="merah"<🎜 🎜> />  
10. svg>  
11. badan>  
12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

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

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

Kod XML/HTML复制内容到剪贴板

1. >  
2. <kepala>  
3. <tajuk>SVGtajuk>  
4. <meta charset="utf- 8" />  
5. kepala>  
6. <badan>  
7. <h2>HTML5 SVG Elips Gradienh2>  
8. <svg id="svgelem"  tinggi="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.       <berhenti mengimbangi="0% " gaya="stop-color:rgb(200,200,200);   
13.       stop-opacity:0"/>  
14.       <berhenti mengimbangi="100% " gaya="stop-color:rgb(0,0,255);   
15.       stop-opacity:1"/>  
16.       radialGradient>  
17.    defs>  
18.  <elips cx="100" cy="50" rx="100" ry="50"
19.  gaya="fill:url(#gradient)" />
20. svg>
21. badan>
22. html>

Dalam versi terbaru FireFox dengan HTML5 mendayakan hasil carian ini: