SVG：可縮放矢量圖形。全稱是：Scalable Vector Graphics

SVG使用 XML 格式定義圖像。

 

SVG是使用 XML 來描述（二維圖形和繪圖）程序的語言。

 

SVG是W3C的推薦標準

SVG於2003年1月14日成為W3C推薦標準。

 

這是SVG單獨文件：

<!--
standalone:該屬性規定此 或含有對外部文件的引用。
standalone="no"意味着 文件。
-->
<?xml version="1.0" ?>
<!--


引用外部的 。
該 元素。 

-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--
SVG代碼以 文檔的寬度和高度。
version屬性可定義所使用的SVG版本, xmlns屬性可定義 SVG命名空間。
-->
<svg version="1.1">
<!--


circle用來創建一個圓圈, cx (0,0)。
r屬性定義圓的半徑。stroke和strike-width屬性控制如何顯示形狀輪廓的顏色和寬度。
fill屬性設置形狀內的顏色。 

-->
<circle />
</svg>

SVG文件可以通過以下標籤嵌入 HTML 文檔：<embed>、<object>  和  <iframe>。

SVG的代碼可以直接嵌入到HTML頁面中，或你可以直接鏈接到SVG文件中。

 

使用<embed>標籤：

優勢：所有主流瀏覽器都支持，並允許使用腳本。

缺點：不推薦在HTML4和 XHTML中使用。

SVG有一些預定義的形狀元素，可被開發者使用操作。

矩形<rect>

圓形<circle>

橢圓<ellipse>

線<line>

折線<polyline>

多邊形<polygon>

路徑<path>

1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="css/main.css">
 7 </head>
 8 <body>
 9 
10 <svg xmlns="http://www.w3.org/2000/svg" version="1.0">
11     <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(255,0,0);"></rect>
12 </svg>
13 <p>代碼解析</p>
14 <ul>
15     <li>rect元素的width和height屬性可定義矩形的高度和寬度</li>
16     <li>style屬性用來定義css屬性</li>
17     <li>css的fill屬性定義矩形的填充顏色</li>
18     <li>css的stroke-width屬性定義矩形邊框的寬度</li>
19     <li>css的stroke屬性定義矩形邊框的顏色</li>
20 </ul>
21 
22 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
23     <rect x="50" y="20" width="100" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"></rect>
24 </svg>
25 <p>代碼解析</p>
26 <ul>
27     <li>x屬性定義矩形的左側位置</li>
28     <li>y屬性定義矩形的頂端位置</li>
29     <li>CSS的fill-opacity屬性定義填充顏色的透明度</li>
30     <li>CSS的stroke-opacity屬性定義筆觸顏色的透明度</li>
31 </ul>
32 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
33     <rect x="50" y="20" width="100" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.5;opacity:0.5"></rect>
34 </svg>
35 <p>代碼解析</p>
36 <ul>
37     <li>CSS的opacity屬性用於定義了元素的透明值</li>
38 </ul>
39 
40 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
41     <rect x="50" y="20" rx="20" ry="20" width="100" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"></rect>
42 </svg>
43 <p>代碼解析</p>
44 <ul>
45     <li>rx 和 ry 屬性可使矩形產生圓角</li>
46 </ul>
47 </body>
48 </html>

 

cdr處理python生成的svg文件_xml

這個是畫個圓，感覺挺簡單的。

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 9     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
10 </svg>
11 <p>cx和cy屬性定義圓點的x和y座標。如果省略cx和cy,圓的中心會被設置為(0,0).r屬性定義圓的半徑。</p>
12 
13 </body>
14 </html>