SVG——在网页中使用SVG

最新推荐文章于 2024-07-26 13:24:37 发布

weixin_33924770

最新推荐文章于 2024-07-26 13:24:37 发布

阅读量98

点赞数

文章标签：人工智能 xhtml

原文链接：https://segmentfault.com/a/1190000004447771

版权

SVG可以作为一个独立的文件存在。但更多的时候，我们希望他能集成在某个更大的文档中，比如HTML。
将SVG插入到HTML中主要有以下3种方式：

SVG本身作为一种图像格式，和其他图像一样通过指定<img>tag的src属性即可。并且可以通过css指定图像的尺寸和位置。
对于SVG图像来说，如果不指定图像（<img>）的尺寸，会按照以下情况进行显示：

和普通图片一样，SVG也可以作为background-image的属性的值进行显示。

background-image: url("image.svg");

SVG作为图像引用时，

SVG文件也可以作为<object>元素的data属性引入HTML中。
注意，MIME type必须是image/svg+xml。

<object data="image.svg" type="image/svg+xml">
  ...
</object>

作为应用程序对象引入的SVG文件尺寸和作为<img>引入时类似，并且不会继承定义在父文档中的任何样式。
但是，与<img>不同的是，此方式可是包含外部文件，且脚本可以在object和父文档之间进行通信。

可以直接将<svg>嵌入到XHTML或者HTML5文档中。
嵌入到XHTML需要为<svg>指定命名空间（xmlns），嵌入到HTML5则可以省略，解析器会自动识别<svg>tag。

<!DOCTYPE html>
<html>
  <body>
    <svg>
      ...
    </svg>
  </body>
</html>

直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。

关注