SVG圖標：icon-home【代碼】

技術頻道 - html技術

作者:admin 時間:2022-11-28 17:41:31 瀏覽:

本文介紹一個在網頁設計中比較常用的首頁圖標(icon-home)，一些人可能會選擇用字體圖標如FontAwesome來實現，不過本文介紹的是用SVG來實現的方法，好處是，不用附帶加載一大堆字體文件，也不用配置Web服務器添加某些映射腳本。

有兩種寫法，一種是把SVG代碼寫在HTML代碼里，另一種寫法是把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>

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;
}

代碼解釋

可以通過CSS的代碼設置圖標(icon)的大小，width: 1em; 和 height: 1em;，也可設置圖標的顏色，color: #444444;。

完整HTML

<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>

demo download

方法二：使用獨立SVG文件

我們可以把SVG代碼獨立成一個文件，然后在HTML代碼里引用。

svg文件

首先，創建一個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代碼

<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>