Dickzeng 2019-12-20
SVG 意为可缩放矢量图形(Scalable Vector Graphics)。 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。 SVG 是万维网联盟的标准。
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
1、可在浏览器直接打开;
2、在HTML中的使用;
SVG 文件可通过以下标签嵌入 HTML 文档: <embed> 、 <object> 、 <iframe> 和 <img> 。
SVG的代码可以直接嵌入到HTML页面中,或直接链接到SVG文件。
(1)使用 <embed> 标签
示例:
<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />
(2)使用 <object> 标签
示例:
<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>
(3)使用 <iframe> 标签
示例:
<iframe width="300px" height="300px" src="img/demo.svg"></iframe>
(4)直接在HTML嵌入SVG代码
示例:
<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="10" ry="10" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"/> </svg>
(5)使用 <img> 标签
示例:
<img src="img/demo.svg" width="300px" height="300px"/>
(6)链接到 svg 文件
示例:
<a href="img/demo.svg">查看svg</a>
3、在css中使用
示例:
1 .container{ 2 background: white url(img/demo.svg) repeat; 3 }