svg简介
一、svg是什么？
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。 SVG 是万维网联盟的标准。二、svg的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大；
三、浏览器支持情况
image.png
四、使用方式
1、可在浏览器直接打开；
2、在HTML中的使用；
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 、 <iframe>和<img>。
SVG的代码可以直接嵌入到HTML页面中，或直接链接到SVG文件。
（1）使用 <embed> 标签
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
示例：
<embed width='300px' height='300px' src='img/demo.svg' type='image/svg+xml' />（2）使用 <object> 标签
优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
缺点：不允许使用脚本。
示例：
<object width='300px' height='300px' data='img/demo.svg' type='image/svg+xml'></object>（3）使用 <iframe> 标签
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
示例：
<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-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 }实例篇请访问：svg入门详解（实例篇）
理论篇请访问：svg入门详解（理论篇）
path详解篇请访问：svg之path详解
作者：ywyan
链接：https://www.jianshu.com/p/0899c6b481cd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
你可能想看：