SVG 在前端的7种使用方法,你还知道哪几种?

这篇具有很好参考价值的文章主要介绍了SVG 在前端的7种使用方法,你还知道哪几种?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


theme: smartblue

本文简介

点赞 + 关注 + 收藏 = 学会了

技术一直在演变,在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。

所以我打算把我知道的 7种 SVG 的使用方法列举出来,有备无患~

如果你还知道其他方法,可以在评论区补充~

1. 在浏览器直接打开

SVG 在前端的7种使用方法,你还知道哪几种?

```svg

```

xml 是浏览器能读取的格式,但如果希望 svg 能在浏览器中渲染出来,需要使用 xmlns 声明渲染规则。

所以必须使用 xmlns="http://www.w3.org/2000/svg"

2. 内嵌到 HTML 中(推荐⭐⭐⭐)

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 背景图(推荐⭐)

```html

```

SVG 也是一种图片格式,所以按理说是能当做背景图来使用的。

一试,果然可以~

4. 使用 img 标签引入(推荐⭐)

html <img src="./case1.svg" width="100" height="100">

既然 SVG 可以在 CSS 中当背景图使用,那也可以在 <img> 标签里使用咯~

5. 使用 iframe 标签引入(不推荐❌)

SVG 在前端的7种使用方法,你还知道哪几种?

```html

```

iframe 可以在网页里再嵌套一个网页,既然 SVG 可以直接在浏览器打开,那使用 <iframe> 引用 SVG 同样也是可以的。

需要注意的是,<iframe> 默认是有个边框样式的,如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。

6. 使用 embed 标签引入(不推荐❌)

html <embed src="./case1.svg" width="100" height="100" />

<embed> 标签定义了一个容器,用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。

<embed> 标签已经被标准采用了。但它不能包含任何子内容,因此如果嵌入失败就没有备用选项了。所以现阶段来看,我不太推荐使用 embed 的方式引入 SVG

7. 使用 object 标签引入(不推荐❌)

```html
```

<object> 是通过 data 属性引入资源的。它可以用于嵌入图像,类似 <img> ,也可以用于嵌入独立的 HTML 文档,类似 <iframe>

使用 <object> 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG

需要注意的是,在某些现代浏览器中,typecodebase 是可以不写的。

type 用来声明当前引入的资源是属于什么类型。

总结

在写本时,我推荐使用 内嵌到 HTML 的方式来做日常开发。

其他方式按照你实际需求去使用即可。

最后的 embedobject 这两种方式可以当做备用方案去使用。

代码仓库

⭐雷猴 SVG

推荐阅读

👍《Canvas 从入门到劝朋友放弃(图解版)》

👍《Fabric.js 从入门到膨胀》

👍《『Three.js』起飞!》

👍《console.log也能插图!!!》

👍《纯css实现117个Loading效果》

👍《视差特效的原理和实现方法》

👍《这18个网站能让你的页面背景炫酷起来》文章来源地址https://www.toymoban.com/news/detail-459040.html

到了这里,关于SVG 在前端的7种使用方法,你还知道哪几种?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • promise的原理和几种使用方法

    promise概念 Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果,其实是一个构造函数,自己身上有all、reject、resolve,race这几个方法,原型上有then、catch, finally 等方法

    2023年04月09日
    浏览(32)
  • Vue中使用icon的几种方法

    目录 1. 使用第三方 UI 库 2. 使用矢量图标库 3. 自定义 icon 组件 4. 使用 CDN 5. 使用 CSS 图标库 在Vue中使用icon可以有多种方法,以下是其中的一些: 使用第三方 UI 库,如 ElementUI、Vuetify等,它们提供了一系列的组件和 icons 组件。 使用矢量图标库,如 Font Awesome、Material Design Ic

    2024年02月10日
    浏览(40)
  • Linux 查看内存使用情况的几种方法

    *以下内容为本人的学习笔记,如需要转载,请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/27UaVm5_FMhCnxB88pc0QA 在运行 Linux 系统的过程中为了让电脑或者服务器以最佳水平运行,常常需要监控内存统计信息。 那么今天我们就来看看有哪些方法可以访问所有相关信息

    2023年04月20日
    浏览(41)
  • 使用html网页播放多个视频的几种方法

            因为项目测试需要,我需要可以快速知道自己推流的多路视频流质量,于是我想到可以使用html网页来播放视频,实现效果极其简单,方法有好几种,以下是几种记录:         注意 :测试过,VLC需要使用360急速浏览器,于是以下都是基于360急速浏览器测试的: vi

    2024年04月28日
    浏览(41)
  • 分享Linux 查看内存使用情况的几种方法

    Linux 查看内存使用情况的几种方法包括使用 free 命令、top 命令、htop 命令、vmstat 命令和/proc/meminfo 文件。这些方法可以帮助用户了解系统内存的使用情况,包括总内存、已用内存、空闲内存、缓存和交换分区等信息。 在运行 Linux 系统的过程中为了让电脑或者服务器以最

    2024年02月04日
    浏览(49)
  • QTextDocument的使用方法及几种初始化方式

    qtextDocument并不像控件一样可以通过拖拽方式拉到设计器中使用,也不能直接声明就可以初始化使用,而是需要通过包涵库文件的方式包涵在当前的窗体文件中。 如: 上面说了Qtextdocument并不是控件,它是辅助配合QT中的文本编辑控件进行文本操作的类库。 QTextDocument在使用之

    2024年02月09日
    浏览(45)
  • 使用JavaScript关闭浏览器窗口的几种方法

    在Web开发中,有时候我们需要通过JavaScript来控制用户的浏览器行为,其中之一就是关闭浏览器窗口。本文将介绍几种使用JavaScript关闭浏览器窗口的方法,并提供相应的源代码示例。 使用window.close方法关闭窗口 要关闭当前窗口,可以使用window.close方法。这个方法会关闭当前浏

    2024年02月04日
    浏览(70)
  • 使用python判断字母大小写的几种方法

    使用Python中的内置函数 isupper() 和 islower() 来判断一个字母是否为大写或小写字母。 用户输入一个字母,程序使用isupper()和islower()函数判断字母是否为大写或小写,并输出相应的信息。如果用户输入了除字母以外的字符,程序会输出一个错误信息。 使用ASCII码值来判断字母大

    2024年02月04日
    浏览(59)
  • 【linux】Linux 查看内存使用情况的几种方法汇总

    Linux 查看内存使用情况的几种方法包括使用 free 命令、top 命令、htop 命令、vmstat 命令和/proc/meminfo 文件。这些方法可以帮助用户了解系统内存的使用情况,包括总内存、已用内存、空闲内存、缓存和交换分区等信息。 在运行 Linux 系统的过程中为了让电脑或者服务器以最佳水

    2024年02月04日
    浏览(45)
  • 几种预训练模型微调方法和peft包的使用介绍

    现流行的微调方法有:Lora,prompt,p-tunning v1,p-tunning v2,prefix,adapter等等,下面抱着学习的心态进行宏观层面的介绍 如有错误,欢迎指出 LoRA(Low-Rank Adaptation)是一种技术,通过低秩分解将权重更新表示为两个较小的矩阵(称为更新矩阵),从而加速大型模型的微调,并减少内存

    2024年02月07日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包