SVG 在前端的7种使用方法，你还知道哪几种?
lipiwang 2025-06-03 23:20 5 浏览 0 评论
本文简介
点赞 + 关注 + 收藏 = 学会了
技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。
所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~
如果你还知道其他方法，可以在评论区补充~
1. 在浏览器直接打开
<?xml version="1.0" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>雷猴</title>
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
xml 是浏览器能读取的格式，但如果希望 svg 能在浏览器中渲染出来，需要使用 xmlns 声明渲染规则。
所以必须使用 xmlns="
http://www.w3.org/2000/svg"。
2. 内嵌到 HTML 中（推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg demo</title>
</head>
<body>
<div>
<!-- 内嵌到 HTML 中 -->
<svg width="100%" height="100%" version="1.1">
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
</div>
</body>
</html>
可以看到上面的代码中，<svg> 标签并没有使用 xmlns="
http://www.w3.org/2000/svg" 声明命名空间，这是因为 HTML 5 文档使用 <!DOCTYPE html> 标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。
在写本文时，将 SVG 内嵌到 HTML 中 的做法是最常见的，也是比较推荐的方式之一。
做特效时，这种使用方式也是比较轻松的。
3. CSS 背景图（推荐）
<style>
.svg_bg_img {
width: 100px;
height: 100px;
background: url('./case1.svg') no-repeat;
background-size: 100px 100px;
}
</style>
<div class="svg_bg_img"></div>
SVG 也是一种图片格式，所以按理说是能当做背景图来使用的。
一试，果然可以~
4. 使用 img 标签引入（推荐）
<img src="./case1.svg" width="100" height="100">
既然 SVG 可以在 CSS 中当背景图使用，那也可以在 <img> 标签里使用咯~
5. 使用 iframe 标签引入（不推荐）
<iframe
src="./case1.svg"
width="100"
height="100"
></iframe>
iframe 可以在网页里再嵌套一个网页，既然 SVG 可以直接在浏览器打开，那使用 <iframe> 引用 SVG 同样也是可以的。
需要注意的是，<iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。
6. 使用 embed 标签引入（不推荐）
<embed
src="./case1.svg"
width="100"
height="100"
/>
<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。
<embed> 标签已经被标准采用了。但它不能包含任何子内容，因此如果嵌入失败就没有备用选项了。所以现阶段来看，我不太推荐使用 embed 的方式引入 SVG 。
7. 使用 object 标签引入（不推荐）
<object
data="./case1.svg"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install"
></object>
<object> 是通过 data 属性引入资源的。它可以用于嵌入图像，类似 <img> ，也可以用于嵌入独立的 HTML 文档，类似 <iframe> 。
使用 <object> 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG。
需要注意的是，在某些现代浏览器中，type 和 codebase 是可以不写的。
type 用来声明当前引入的资源是属于什么类型。
总结
在写本时，我推荐使用 内嵌到 HTML 的方式来做日常开发。
其他方式按照你实际需求去使用即可。
最后的 embed 和 object 这两种方式可以当做备用方案去使用。
代码仓库
雷猴 SVG
推荐阅读
《Canvas 从入门到劝朋友放弃（图解版）》
《Fabric.js 从入门到膨胀》
《『Three.js』起飞！》
《console.log也能插图！！！》
《纯css实现117个Loading效果》
《视差特效的原理和实现方法》
《这18个网站能让你的页面背景炫酷起来》
相关推荐
- 《每日电讯报》研发数字工具，教你更有效率地报道新闻
-
为鼓励新闻编辑部持续创新，《每日电讯报》正在尝试有战略地研发数字工具。网站的数字媒体主任马尔科姆o科尔斯（MalcolmColes）表示，《每日电讯报》正试图去“创建一些可持续资产”，以便于让记者们...
- html5学得好不好，看掌握多少标签
-
html5你了解了多少？如果你还是入门阶段的话，或者还是一知半解的话，那么我们专门为你们收集的html5常用的标签大全对你就很有帮助了，你需要了解了html5有哪些标签你才能够更好的。驾驭html5...
- 前端分享-少年了解过iframe么（我想了解少年）
-
iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏...
- 做SEO要知道什么是AJAX(人能看到但搜索引擎看不到的内容)
-
一个明显的，人能看到但搜索引擎不能看到的内容是AJAX。那么什么是AJAX呢？其实，了解过的基本上也都清楚，AJAX不是新的编程语言,而是一种使用现有标准的新方法。AJAX最大的优点是在不重新加...
- 介绍最前沿的人工智能创新，‘无反向传播’神经网络训练方法?
-
图像由GoogleImageFX生成前言：本文整理自NoProp原始论文与实践代码，并结合多个公开实现细节进行了全流程复现。对神经网络训练机制的探索仍在不断演进，如果你也在研究反向传播之...
- 说说我们对HTML6的期许（对html的看法）
-
HTML5概述HTML5是HTML语言最受欢迎的版本之一，它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了article,section,header这样的标签来帮助开发者更好...
- 浏览器中在线预览pdf文件，pdf.mjs插件实现web预览pdf
-
背景：本来只是淘宝上卖卖袜子，想着扩展一下业务，准备做同名“来家居”海外袜子馆外贸项目，碰到pdf在线预览的需求，就找了pdf.js插件进行实践后把此方法记录下来，可以通过多种方法来实现，每种方法都有...
- SVG 在前端的7种使用方法，你还知道哪几种?
-
本文简介点赞+关注+收藏=学会了技术一直在演变，在网页中使用SVG的方法也层出不穷。每个时期都有对应的最优解。所以我打算把我知道的7种SVG的使用方法列举出来，有备无患~如果你还...
- HTML5常用标签大全（html5em标签）
-
HTML前端开发最终取决于掌握标签的多少HTML大概有七八百个标签楼主这里给大家总结了下HTML常用标签标签描述<!--...-->定义注释。<!DOCTYPE>定义文档类型...
- "伪君子Snoop Dogg!"... WHAT?| MetroDaily 24/7
-
TUE.01-新作品-虽说年纪大了会有点糊涂，但是最近SnoopDogg的这波操作实在是让粉丝们有点迷，甚至有人表示没想到他是这样的"伪君子"......而这一切都源于他近日在IG上Po出的一...
- 莎夏·班克斯盼望表哥Snoop Dogg为其作出场曲
-
NXT女子冠军莎夏·班克斯(SashaBanks)近日接受了迈阿密先驱报采访，访谈纪要如下：关于她出众的形象：“我一向喜欢与众不同。为了能让人眼前一亮，我的装束总是非常前卫、非常抢眼，这样才能让观众...
- 喜欢Snoop!全球第一间「史努比博物馆」海外分馆在东京!
-
1950年起，由美國漫畫家CharlesM.Schulz創作的作品《Snoopy》史努比，其鮮明的可愛角色與幽默的劇情內容，至今仍成為許多大朋友與小朋友心中的最愛。為了紀念作者所設立的全球首...
- Vetements 推出 Snoop Dogg 肖像「天价」T-Shirt
-
Vetements的CEOGuramGvasalia早前才透露品牌经营策略的秘密–Vetements如何成为人人热议的话题品牌。但似乎他仍有更多需要解释的东西–这个法国奢侈品牌最新...
- 狗爷Snoop Dogg的《I Wanna Thank Me》巡回演唱会旧金山站
-
西海岸匪帮说唱歌手SnoopDogg在《IWannaThankMe》巡回演唱会旧金山站表演（图片来自ICphoto）西海岸匪帮说唱歌手SnoopDogg（图片来自ICphoto）西海...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)