|
|
|
|
|
本文介紹一個在網(wǎng)頁設(shè)計中比較常用的首頁圖標(biāo)(icon-home),一些人可能會選擇用字體圖標(biāo)如FontAwesome來實現(xiàn),不過本文介紹的是用SVG來實現(xiàn)的方法,好處是,不用附帶加載一大堆字體文件,也不用配置Web服務(wù)器添加某些映射腳本。
有兩種寫法,一種是把SVG代碼寫在HTML代碼里,另一種寫法是把SVG代碼寫到一個獨立的文件里,然后在HTML代碼里引用該文件。
方法一:不用獨立SVG文件
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024">
<title>home</title>
<path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
</defs>
</svg>
<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>
body {
font: 32px sans-serif; color: #444;
margin: 1em;
}
.icon {
display: inline-block;
color: #444444;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-home {
color: red;
font-size: 48px;
}
代碼解釋
可以通過CSS的代碼設(shè)置圖標(biāo)(icon)的大小,width: 1em;
和 height: 1em;
,也可設(shè)置圖標(biāo)的顏色,color: #444444;
。
<html>
<head>
<title>SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
font: 32px sans-serif; color: #444;
margin: 1em;
}
.icon {
display: inline-block;
color: #444444;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-home {
color: red;
font-size: 48px;
}
</style>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024">
<title>home</title>
<path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
</defs>
</svg>
<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>
</body>
</html>
方法二:使用獨立SVG文件
我們可以把SVG代碼獨立成一個文件,然后在HTML代碼里引用。
首先,創(chuàng)建一個SVG獨立文件,symbol-defs.svg
,代碼如下:
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024">
<title>home</title>
<path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
</defs>
</svg>
<html>
<head>
<title>SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
font: 32px sans-serif; color: #444;
margin: 1em;
}
.icon {
display: inline-block;
color: #444444;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-home {
color: red;
font-size: 48px;
}
</style>
</head>
<body>
<svg class="icon icon-home"><use xlink:href="symbol-defs.svg#icon-home"></use></svg><span> icon-home</span>
</body>
</html>
總結(jié)
本文介紹了SVG實現(xiàn)的圖標(biāo):icon-home,有兩種寫法,一種是把SVG代碼寫在HTML代碼里,另一種是把SVG代碼獨立用一個文件,然后在HTML代碼里引用。個人建議用獨立SVG文件,因為更好維護(hù),HTML代碼也更簡潔了。
另外要說的是,本文只介紹了一個SVG圖標(biāo),要想獲得更多的SVG圖標(biāo),可看此文《逾千個SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費下載》。
相關(guān)文章