SVG:
1.是可伸缩矢量图形(Scalable vector Graphics)
2.用来定义用于网络的基于矢量的图形
3.使用XML格式定义图形
4.图像在放大或改变尺寸的情况下其图形质量不会有损失
5.是万维网联盟的标准
优势:
1.图像可通过文本编辑器来创建和修改
2.图像可被搜索、索引、脚本化火压缩
3.可伸缩
4.图像可再任何的分辨率下被高质量地打印
5.可再图像质量不下降的情况下被放大
SVG 参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/SVG
SVG元素参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element
SVG属性参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute
SVG DOM API 参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
SVG.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--盒子的大小-->
<svg viewBox="0 0 120 120" height="200" width="200" version="1.2">
<!--圆 圆心坐标 及半径-->
<circle cx="60" cy="60" r="50"></circle>
</svg>
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1">
<!--xmlns="http://www.w3.org/2000/svg">-->
<ellipse cx="60" cy="60" rx="50" ry="25"/>
</svg>
<!--引入外部svg文件-->
<iframe src="SVG.svg" width="400px" height="200px" frameborder="no"></iframe>
</body>
</html>
SVG.svg——外部资源
<?xml version="1.0"?>
<svg width="100%" height="100%" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red"/>
<text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
<!-- Show outline of the viewport using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" />
</svg>
网友评论