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>