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>