HTML5 多媒体之<svg>标签 使用
一、HTML5 多媒体之<svg>标签 使用
矢量图，可用作字体
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
1.引用svg文件，和引用图片一样
<!-- 引用svg文件 --> <img src="../../img/images/circle.svg" alt="">
<svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"> <circle cx="200" cy="200" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff" /> </svg>
2.内联svg内容
<!-- 内联svg --> <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"> <rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;" /> </svg>
更多：
