SVG图片
一. SVG介绍
1.1. SVG概念解析
- SVG全称: Scalable Vector Graphics, 可缩放矢量图形.
- SVG是什么?
- SVG是一种基于XML定义的二维矢量图形.
- 什么是矢量图形?
- 矢量图形是计算机图形学中用点/直线或者多边形等基于数学方程的几何图表示的图形.
- 矢量图形有什么优势呢?
-
我们来看一张图片, 分别是位图和矢量图形放大8倍的效果.
img - 结果解析:
- a是原图, b是矢量图形放大后的效果, c是位图放大后的效果.
- 很明显矢量图形在图像放大后依然可以保持清晰, 而不会出现位图的像素点.
-
1.2. SVG到底是什么?
- SVG到底是什么呢?
- SVG是基于XML的语言，主要用于绘制二维图像。
- 你可以通过编写代码来展示简单的或者是复杂的图形，例如：直线、曲线等等。
- 为什么选择SVG呢?
- SVG 是可伸缩的矢量图形，在浏览器中改变尺寸，其图形质量不会有所损失。
- 相比其它位图，SVG图像文件更小，可压缩性更强。
- SVG 可以被记事本等阅读器、搜索引擎访问。
- SVG 图像中的文本是可选的，同时也是可复制的。
- SVG 图像可以与DOM，CSS和JavaScript交互。
- SVG 可以制作成整体或局部动画。
- 浏览器是否支持呢?
- 目前主流的浏览器对SVG的支持都非常好.
- 除了IE8以及以下的浏览器版本.(可以使用polyfull来对旧版的浏览器支持).
二. SVG用法
2.1.SVG画出图片
- 通常情况下, 不需要自己通过SVG画出图片, 而是自己生成就可以了.
- 简单了解一下画出的过程:
<svg class="svg1"> <rect x="50px" y="50px" width="100px" height="100px"/> </svg> - 画出需要使用的箭头:
<svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2922" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"> <path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z" fill="#ffffff" p-id="2923"></path> </svg>
2.2.查找SVG图片
-
可以在iconfont中查找下载SVG图片
image.png -
下载图片:
image.png -
下载所有的图片, 选择下载代码.
image.png
2.3.SVG图片使用
-
基本使用:
<!--1.用法一: 直接在HTML中嵌入使用--> <svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" width="12" height="12"> <path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z" fill="#ffffff" p-id="2923"></path> </svg> <!--2.用法二: 通过.svg文件使用--> <!--<img src="imgs/me.svg" alt="消息">--> <!--3.用法三: 直接作为背景--> <div></div> -
svg的js文件的使用
- 导入JS文件
- 通过use元素使用svg
-
代码如下:
<body> <svg> <use xlink:href="#icon-shouye"></use> </svg> </body> <script src="imgs/iconfont.js"></script> </html>
