什么是SVG？及SVG引入方式

最新推荐文章于 2025-10-24 12:20:46 发布

原创最新推荐文章于 2025-10-24 12:20:46 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#SVG #矢量图 #Xi说SVG #Xi说孔方兄

SVG 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了SVG（可缩放矢量图形）的概念及其与HTML Canvas的区别。SVG是一种基于XML的矢量图形语言，适用于创建高分辨率的Web图形，而Canvas则侧重于实时绘制和动画效果。文章还探讨了SVG在不同场景下的应用及如何在HTML中引入SVG。

如题，什么是SVG呢？

百度百科答：SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

我们用过canvas，不管是安卓、iOS还是HTML，都有canvas标签，用来绘制简单的图形。

	图形类别	类别区别	识别色彩	代码标签
Canvas绘制图形	位图	放大变模糊、失真	丰富	基于HTML既有标签绘制
SVG绘制图形	矢量图	放大不会失真，依然清晰	稍逊于位图	基于XML绘制，可自定义标签

svg可以做出比HTML更加复杂，更加炫酷的图形出来。

svg可以作为单独的一个文档出现，文档后缀为.svg。

HTML引入SVG有多种方式，下面讲解四种方式：

图片
背景
框架

直接引用

<body>
  hello world!!!
<!--  图片方式引入-->
  <img src="standard_svg.svg" />
<!--  背景方式引入-->
  <div style="height:200px;width:200px;background:url(standard_svg.svg) no-repeat"></div>
<!--  框架方式引入-->
  <iframe src="first-圆-人脸.svg"></iframe>
<!--  直接在html中引入svg代码-->
  <div id="svg_div">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="red"></circle>
    </svg>
  </div>
</body>