SVG圖片
一. SVG介紹
1.1. SVG概念解析
- SVG全稱: Scalable Vector Graphics, 可縮放矢量圖形.
- SVG是什么?
- SVG是一種基于XML定義的二維矢量圖形.
- 什么是矢量圖形?
- 矢量圖形是計(jì)算機(jī)圖形學(xué)中用點(diǎn)/直線或者多邊形等基于數(shù)學(xué)方程的幾何圖表示的圖形.
- 矢量圖形有什么優(yōu)勢(shì)呢?
-
我們來看一張圖片, 分別是位圖和矢量圖形放大8倍的效果.
img - 結(jié)果解析:
- a是原圖, b是矢量圖形放大后的效果, c是位圖放大后的效果.
- 很明顯矢量圖形在圖像放大后依然可以保持清晰, 而不會(huì)出現(xiàn)位圖的像素點(diǎn).
-
1.2. SVG到底是什么?
- SVG到底是什么呢?
- SVG是基于XML的語言天吓，主要用于繪制二維圖像九昧。
- 你可以通過編寫代碼來展示簡單的或者是復(fù)雜的圖形趋距，例如：直線搪桂、曲線等等蓖谢。
- 為什么選擇SVG呢?
- SVG 是可伸縮的矢量圖形乳规，在瀏覽器中改變尺寸锤岸，其圖形質(zhì)量不會(huì)有所損失。
- 相比其它位圖切黔，SVG圖像文件更小砸脊，可壓縮性更強(qiáng)。
- SVG 可以被記事本等閱讀器纬霞、搜索引擎訪問凌埂。
- SVG 圖像中的文本是可選的，同時(shí)也是可復(fù)制的诗芜。
- SVG 圖像可以與DOM瞳抓，CSS和JavaScript交互秒紧。
- SVG 可以制作成整體或局部動(dòng)畫。
- 瀏覽器是否支持呢?
- 目前主流的瀏覽器對(duì)SVG的支持都非常好.
- 除了IE8以及以下的瀏覽器版本.(可以使用polyfull來對(duì)舊版的瀏覽器支持).
二. 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文件的使用
- 導(dǎo)入JS文件
- 通過use元素使用svg
-
代碼如下:
<body> <svg> <use xlink:href="#icon-shouye"></use> </svg> </body> <script src="imgs/iconfont.js"></script> </html>
