SVG可以作为一个独立的文件存在。但更多的时候，我们希望他能集成在某个更大的文档中，比如HTML。
将SVG插入到HTML中主要有以下几种方式：

  • 将 SVG 作为图像导入
  • 将 SVG放入 iframe 中导入
  • 将 SVG 作为object对象导入
  • 使用内联 SVG

将SVG作为图像导入

这可能是将SVG导入HTML文档的最简单的方法。将.svg文件把它加到一个普通<img>标签内。

<img src="example.svg" alt="example">

你需要确保你的服务器支持.svg文件，可能大多数都是支持的，但是还是查一下的好。
同时你也可以在CSS中把.svg文件作为一个background-image导入。

注意要加一个备用的.png图像，以防浏览器无法显示svg。

.svg-bg {

    background: url("example.png"); /* fallback */

    background-image: url("example.svg");

}

不足：

SVG作为图像引用时，

  • 大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)

  • 依据浏览器的安全策略，SVG中定义的脚本也可能不会执行

使用Object 或 iframe导入SVG图像

和把SVG作为图像导入相似，你可以把它作为一个<object>导入，通过data属性链接要导入的.svg文件。注意，MIME type必须是image/svg+xml。代码如下：

<object type="image/svg+xml" data="example.svg" class="example">

 My Example SVG

</object>

相比使用<object>，你也可以把.svg文件嵌入到一个<iframe>框架内。代码如下：

<iframe src="example.svg" class="example"></iframe>

上面2种方法都可以使用CSS控制SVG的样式，如：

.example {

    display: block;

    margin: 5em auto;

    border-radius: 10px;

}

使用内联SVG

你不必一定把SVG放在一个单独的文件中，因为你可以直接在HTML中嵌入SVG。

<!DOCTYPE html>

<html>

  <body>

    <svg>

      ...

    </svg>

  </body>

</html>

直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。

总结：

SVG并不难使用。尤其，最简单的是，你可以在一个矢量图形应用程序中创建一个图像，然后将图像导出为一个.svg文件，然后把它放入到一个<img>、<object>或者<iframe>的HTML标签中。你也可以在CSS文件中放入.svg文件，把它作为一个background-image。

参考文档：

https://segmentfault.com/a/1190000004447771

https://www.w3cplus.com/svg/svg-basics.html

在网页中使用SVG的更多相关文章

  1. 1. svg学习笔记-在网页中使用svg

    在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...

  2. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  3. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  4. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  5. 网页中导入特殊字体@font-face属性详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...

  6. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  7. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  8. 在网页中制作icon图标

    用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...

  9. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

随机推荐

  1. JSP开发中对jstl的引用方式(标签库引用）

    创建标签库引用文件taglibs.inc 一 采用本地标签库的taglibs.inc文件 <%--struts库标签 --%> <%@ taglib uri="/WEB-I ...

  2. BIP_BI Pubisher的SQL/XSL/FO扩展函数应用（概念）

    2014-12-01 Created By BaoXinjian

  3. Linux内核(17) - 高效学习Linux驱动开发

    这本<Linux内核修炼之道>已经开卖(网上的链接为: 卓越.当当.china-pub ),虽然是严肃文学,但为了保证流畅性,大部分文字我还都是斟词灼句,反复的念几遍才写上去的,尽量考虑到 ...

  4. Python degrees() 函数

    描述 degrees() 将弧度转换为角度. 语法 以下是 degrees() 方法的语法: import math math.degrees(x) 注意:degrees()是不能直接访问的,需要导入 ...

  5. [Jobdu] 题目1500：出操队形

    题目描述: 在读高中的时候,每天早上学校都要组织全校的师生进行跑步来锻炼身体,每当出操令吹响时,大家就开始往楼下跑了,然后身高矮的排在队伍的前面,身高较高的就要排在队尾.突然,有一天出操负责人想了一个 ...

  6. Matlab实现图像切割

    以下使用极小值点阈值选取方法,编写MATLAB程序实现图像切割的功能. 极小值点阈值选取法即从原图像的直方图的包络线中选取出极小值点, 并以极小值点为阈值将图像转为二值图像 clear all; cl ...

  7. bash脚本输入密码不回显问题的解决方法

    编写一个bash脚本时,需要用户输入一个密码,方可继续后续流程,但是又要保证用户输入的密码不会被别人看到,因此排除了通过参数将密码传入脚本的方案 不绕圈子,揭晓答案:设置终端状态为“字符不回显”(如果 ...

  8. kvm最小磁盘大于等于5G

    上图的实验为4G(磁盘的大小) 后来磁盘大小增加到5G后,成功安装! [root@bass virhost]# virt-install --name 22cache --ram=512 --arch ...

  9. C++ 容器类 vector使用

    vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 用法: 1.文件包含: ...

  10. sqllite 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)

    试图加载格式不正确的程序. (异常来自 HRESULT:0x8007000B) 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细 ...