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>

 

 

 

 

 

更多：

HTML5 多媒体之<canvas>标签 使用

 HTML5 多媒体之<video>标签 使用

HTML5 多媒体之<audio>标签 使用

posted @ 2020-08-22 13:57  天马3798  阅读(570)  评论(0)  编辑  收藏  举报