在网页中使用SVG
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. svg学习笔记-在网页中使用svg
在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...
- 在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- 字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...
- 网页中导入特殊字体@font-face属性详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...
- HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
- 在网页中制作icon图标
用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
随机推荐
- Windows下面安装和配置Solr 4.9（二）
将Solr和Tomcat结合: 1.在D盘下创建目录 D:\Demos\Solr 2.解压solr-4.9.0文件,我这里下载的是这个4.9版本,将example文件夹下的solr文件夹中的所有文件( ...
- C# 获取当前打开的文件夹
最近做一个项目,有一个功能点需要获取当前打开的文件夹,网上查资料+自己摸索,整理出如下代码,鉴于网上完整的代码比较少,顾贴出来,以供参考.如有更好的建议,欢迎留言. 因demo,故没有完整的异 ...
- GO1.6语言学习笔记3-工具篇（SublimeText 3+GoSublime组合)
选择SublimeText作为开发工具的原因,最最主要的是它够轻巧,搭配GO开发才能有飞一般的感觉.当然作为开发工具之一,Sublime组合工具也提供足够强大的功能. 自动化提示代码 保存的时候自动格 ...
- Django修改用户名密码的方法
1.python manage.py shell 2.from django.contrib.auth.models import User 3.user=User.objects.get(usern ...
- IP分片
物理网络层一般要限制每次发送数据帧的最大长度.任何时候IP层接受到一份要发送的IP数据报时,它要判断向本地哪个接口发送数据(选路),并查询该接口获得其MTU(最大传输单元:Maximum Transm ...
- 基于Cocos2d-x学习OpenGL ES 2.0之多纹理
没想到原文出了那么多错别字,实在对不起观众了.介绍opengl es 2.0的不多.相信介绍基于Cocos2d-x学习OpenGL ES 2.0之多纹理的,我是独此一家吧.~~ 子龙山人出了一个系列: ...
- spring整合kafka项目生产和消费测试结果记录（一）
使用spring+springMVC+mybatis+kafka做了两个web项目,一个是生产者,一个是消费者. 通过JMeter测试工具模拟100个用户并发访问生产者项目,发送json数据给生产者的 ...
- windows 简单api应用
//调用系统函数 将鼠标移动到相应位置 [DllImport("user32.dll", EntryPoint = "SetCursorPos")] publi ...
- 有趣的switch应用（填入种类，显示响应的价格）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux没有那个文件或目录
linux脚本执行 报错 没有那个文件或目录 但是ls 看一下,明明有文件 原因: vim filename然后用命令 :set ff可看到dos或unix的字样,如果的确是dos格式的, 那么用se ...