svg入门详解
一、svg是什么?
SVG 意为可缩放矢量图形(Scalable Vector Graphics)。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 是万维网联盟的标准。
二、svg的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改;
- SVG 图像可被搜索、索引、脚本化或压缩;
- SVG 是可伸缩的;
- SVG 图像可在任何的分辨率下被高质量地打印;
- SVG 可在图像质量不下降的情况下被放大;
三、浏览器支持情况
四、使用方式
1、可在浏览器直接打开;
2、在HTML中的使用;
SVG 文件可通过以下标签嵌入 HTML 文档: <embed> 、 <object> 、 <iframe> 和 <img> 。
SVG的代码可以直接嵌入到HTML页面中,或直接链接到SVG文件。
(1)使用 <embed> 标签
- 优势:所有主要浏览器都支持,并允许使用脚本
- 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)
示例:
<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />
(2)使用 <object> 标签
- 优势:所有主要浏览器都支持,并支持HTML4,XHTML和HTML5标准
- 缺点:不允许使用脚本。
示例:
<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>
(3)使用 <iframe> 标签
- 优势:所有主要浏览器都支持,并允许使用脚本
- 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)
示例:
<iframe width="300px" height="300px" src="img/demo.svg"></iframe>
(4)直接在HTML嵌入SVG代码
示例:
<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="10" ry="10" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"/>
</svg>
(5)使用 <img> 标签
示例:
<img src="img/demo.svg" width="300px" height="300px"/>
(6)链接到 svg 文件
示例:
<a href="img/demo.svg">查看svg</a>
3、在css中使用
示例:
.container{
background: white url(img/demo.svg) repeat;
}
- 实例篇请访问:svg入门详解(实例篇)
- 理论篇请访问:svg入门详解(理论篇)
- path详解篇请访问:svg之path详解
作者:ywyan
链接:https://www.jianshu.com/p/0899c6b481cd
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
svg入门详解的更多相关文章
- Linq之旅:Linq入门详解(Linq to Objects)
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- SQL注入攻防入门详解
=============安全性篇目录============== 本文转载 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机 ...
- SQL注入攻防入门详解(2)
SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...
- Quartz 入门详解
Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...
- Redis快速入门详解
Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis ...
- [转]SQL注入攻防入门详解
原文地址:http://www.cnblogs.com/heyuquan/archive/2012/10/31/2748577.html =============安全性篇目录============ ...
- [置顶]
xamarin android toolbar(踩坑完全入门详解)
网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费.如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到 ...
- 转:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法、shiro认证与shiro授权
原文地址:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法.shiro认证与shiro授权 以下是部分内容,具体见原文. shiro介绍 什么是shiro shiro是Apache ...
- webpack入门详解
webpack入门详解(基于webpack 3.5.4 2017-8-22) webpack常用命令: webpack --display-error-details //执行打包 webpa ...
随机推荐
- vue-cli3使用svg
(根据网上教程实操,仅作个记录) 执行命令安装插件 npm install svg-sprite-loader --save-dev 在vue.config.js中,添加配置 module.expor ...
- Bootstrap-实现简单的网站首页
html: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- Java实现在线预览--openOffice实现
简介 之前有写了poi实现在线预览的文章,里面也说到了使用openOffice也可以做到,这里就详细介绍一下. 我的实现逻辑有两种: 一.利用jodconverter(基于OpenOffice服务)将 ...
- JMeter学习笔记(十八)——返回的响应数据出现中文乱码_解决方案
一.问题描述 使用jmeter过程中遇到了请求返回的响应数据出现中文乱码 二.原因分析 当没有对响应数据or响应页面设置支持解析中文的编码时,JMeter则会以默认的ISO-8859-1格式解析,而其 ...
- 【RAC】rac环境下的数据库备份与还原
[RAC]rac环境下的数据库备份与还原 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~ ...
- QQ推广工具
目前比较简单易用的QQ推广工具有:一键加群.在线聊天 一.一键加群 1.官网链接 http://qun.qq.com/join.html 2.使用 1登录自己的QQ 2创建一个想要作为推广的群 3选择 ...
- windows10 进入BIOS
windows10开机进入不了BIOS 原因 上网查了电脑固件所应该有的进入键,什么F1.F2.F12.Delete以及什么要配置Fn+F1...等等方法就是开机进入不了BIOS. 解决办法 最后发现 ...
- java集合-遍历arraylist-for循环-从指定下标开始遍历-for的用法
转载:http://www.9191boke.com/blogdetails/681220549.html java集合的for循环遍历有多种方式,但是都是从下标0开始遍历,有时会有从中间下标开始遍历 ...
- 发布WS接口与实现WS接口[小列子]
webservice简介:Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应用之间, ...
- CefSharp 与 js 相互调用及注意事项
CefSharp 与 js 相互调用 一. CefSharp调用 js CefSharp.WinForms.ChromiumWebBrowser wb; ... 方式1. ExecuteScriptA ...