svg标签(svg图标如何直接显示？)

一、svg图标如何直接显示？
一、什么是SVG

严格来说SVG应该是一种开放标准的矢量图形语言，作为目前十分流行的图像文件格式，可以直接用代码来描绘图像

二、如何在HTML中完整的显示SVG图像

首先来说，VG 文件可以通过通过以下的标签嵌入到 HTML 文档：<embed>、<object> 或者 <iframe>。

1、使用 <embed> 标签

<embed> 标签可以被所有主流的浏览器支持，并允许使用脚本。

语法如下：

<embed src="rect.svg" width="300" height="100"

type="image/svg xml"

pluginspage="

2、使用<object> 标签

<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

语法如下：

<object data="rect.svg" width="300" height="100"

type="image/svg xml"

codebase="

3、使用<iframe>标签

<iframe> 标签可工作在大部分的浏览器中。

语法如下：

<iframe src="rect.svg" width="300" height="100">

</iframe>

二、svgedit怎么保存？
1、首先访问需要下载svg文件的网站。

2、然后按 F12键 进入【开发人员工具】。

3、然后使用【选择元素】工具点击Logo，显示【svg】，然后点击，在【开发人员工具】能找到svg的标签元素。

4、右键点击svg标签元素，选择【Edit as HTML】并点击。

5、然后按Ctrl A全选。

6、右键点击，并选择点击【复制】。

7、打开文本编辑软件例如Visual Studio Code或Sublime Text（注意：不要使用记事本），新建文件后Ctrl V进行粘贴。

8、然后Ctrl S进行保存文件，选择【All Files】保存类型，输入文件名，注意后缀修改为.svg，然后保存。

9、这样就保存了需要的svg文件了。