svg图片的使用

最新推荐文章于 2025-05-17 14:23:50 发布

原创最新推荐文章于 2025-05-17 14:23:50 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui #html

开发中，经常用的都是png图片，今天UI给了个SVG图片忽然不知道怎么用了

什么是SVG？

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

怎么使用？

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心：

<img src="images/刷新.svg" alt="" style="display:block;width:330px;height:240px" >  // 直接使用

这个是最容易想到的 -- 因为svg图片也是图片嘛。



## 注意：

svg里面带的<image>标签将无法正常显示。**<img>标签适合显示纯矢量+文本的SVG图片**。

原文链接：https://blog.csdn.net/yoyful/article/details/85812776