HTML5——5 HTML5 SVG

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>SVG</title>
 6 </head>
 7 <body>
 8     <!-- 内部直接写 -->
 9     <!-- SVG属性参考 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute -->
10     <!-- SVG元素参考 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element -->
11     <!-- <svg viewbox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
12         <circle cx="60" cy="60" r="50"></circle>
13     </svg> -->
14     <!-- <svg width="120" height="120" 
15          viewPort="0 0 120 120" version="1.1"
16          xmlns="http://www.w3.org/2000/svg">
17         <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
18     </svg> -->
19     <!-- 外部引入 -->
20     <iframe src="svg.svg" width="1000" height="500" frameborder="no"></iframe>
21 </body>
22 </html>

svg.svg

1 <svg width="100%" height="100%" viewBox="0 0 400 400"
2      xmlns="http://www.w3.org/2000/svg">
3 
4   <path d="M 100 100 L 300 100 L 200 300 z"
5         fill="orange" stroke="black" stroke-width="3" />
6 </svg>