【教程】在頁面上使用SVG(SVG Sprite)
【教程】在頁面上使用SVG(SVG Sprite)
做者：吳業飛
時間：2019年1月4日css
前言
本文是我在閱讀了張鑫旭大神的文章《將來必熱：SVG Sprite技術介紹》後整理出來的實際操做流程，所有爲實測代碼，按照本教程能夠即學即用。爲了更好的理解本文，建議先行閱讀《將來必熱：SVG Sprite技術介紹》html
最終目標
在頁面上很方便的使用SVG圖標npm
步驟分解
獲取SVG圖標
網上有不少能夠下載SVG圖標的網站，找到咱們須要的ICON後，將它們放在一個文件夾下（此教程中是icon文件夾），方便咱們以後將這個文件夾下的全部SVG圖標合併成SVG Spritejson
合併SVG圖標(SVG Sprite)
咱們使用grunt的插件grunt-svgstore來合併svg,具體步驟以下：
咱們的初始項目目錄是這樣的編輯器
+icon
-close.svg
-QQ.svg
+svgDemo.html
複製代碼
一個用於演示的html文件，一個放svg的icon文件夾，就是這麼簡單。 接下來咱們初始化項目，由於我用的編輯器是VScode,因此ctrl + ~呼出終端，在終端輸入npm init。如今咱們的項目目錄是這樣的ide
+icon
-close.svg
-QQ.svg
svgDemo.html
package-lock.json
package.json
複製代碼
而後咱們安裝grunt和用於合併svg的插件grunt-svgstore，終端輸入npm install grunt --save-dev npm install grunt-svgstore --save-dev，安裝完後，個人package.json裏的版本號是svg
{
"name": "svgdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Alan",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.3",
"grunt-svgstore": "^2.0.0"
}
}
複製代碼
咱們在根目錄下新建Gruntfile.js文件，以下配置wordpress
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
svgstore: {
options: {
prefix : 'mysvgicon-', // This will prefix each ID
svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
}
},
mytest: {
// Target-specific file lists and/or options go here.
files: {
'./icon/all.svg': ['./icon/*.svg']
}
},
},
});
grunt.loadNpmTasks('grunt-svgstore');
// 默認被執行的任務列表。
grunt.registerTask('default', ['svgstore']);
};
複製代碼
如今咱們在終端運行grunt，一切順利的話在icon文件夾下回生成all.svg文件，它長這樣grunt
<svg viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css"/>
<style type="text/css"/>
</defs>
<symbol viewBox="0 0 1024 1024" id="mysvgicon-close">
<title>close</title>
<path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>
<path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">
<title>QQ</title>
<path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>
</symbol>
</svg>
複製代碼
注意到已經成功合併了兩個svg文件網站
在頁面上插入合併後的SVG Sprite
咱們在頁面<body>裏寫個display:none;的包裹標籤將咱們的SVG Sprite放在裏面
<body>
<div style="display:none;">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css" />
<style type="text/css"/>
</defs>
<symbol viewBox="0 0 1024 1024" id="mysvgicon-close">
<title>close</title>
<path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>
<path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">
<title>QQ</title>
<path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>
</symbol>
</svg>
</div>
</body>
複製代碼
使用SVG圖標
接下來咱們只要使用<use>就能夠使用咱們的svg了
<body>
<div style="display:none;">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css" />
<style type="text/css"/>
</defs>
<symbol viewBox="0 0 1024 1024" id="mysvgicon-close">
<title>close</title>
<path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>
<path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">
<title>QQ</title>
<path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>
</symbol>
</svg>
</div>
<svg class="closeBtn">
<use xlink:href="#mysvgicon-close"></use>
</svg>
<svg class="qq">
<use xlink:href="#mysvgicon-QQ"></use>
</svg>
</body>
複製代碼
參考文獻
【1】《將來必熱：SVG Sprite技術介紹》.張鑫旭.www.zhangxinxu.com/wordpress/2…
相關文章
- 1. 【Stimulsoft Reports Flex教程】在同一頁面上使用Designer和Viewer
- 2. WOW.js 使用教程 頁面動畫
- 3. 使用Namecheap的Github頁面教程上的自定義域
- 4. CSS sprite使用
- 5. svg-sprite使用
- 6. 教你來使用雪碧圖（CSS sprite）
- 7. 2d sprite 層級_教程：使用2D工具包進行Sprite優化。
- 8. Idea對Git在github上使用教程
- 9. Sprite Kit教程：初學者
- 10. 在VMware workstation上使用win_server_2012（Hyper-v）搭建雲桌面教程
- 更多相關文章...
- • SVG 在 HTML 頁面 - SVG 教程
- • TortoiseSVN 使用教程 - SVN 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【Stimulsoft Reports Flex教程】在同一頁面上使用Designer和Viewer
- 2. WOW.js 使用教程 頁面動畫
- 3. 使用Namecheap的Github頁面教程上的自定義域
- 4. CSS sprite使用
- 5. svg-sprite使用
- 6. 教你來使用雪碧圖（CSS sprite）
- 7. 2d sprite 層級_教程：使用2D工具包進行Sprite優化。
- 8. Idea對Git在github上使用教程
- 9. Sprite Kit教程：初學者
- 10. 在VMware workstation上使用win_server_2012（Hyper-v）搭建雲桌面教程