// svg在html里的使用示例01
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</svg>
</div>

//示例02

import iconShop from '../assets/menuIcon/shop.svg?inline'
import iconCustomer from '../assets/menuIcon/customer.svg?inline'
import iconCustomerService from '../assets/menuIcon/customerService.svg?inline'
import iconNuCoin from '../assets/menuIcon/nuCoin.svg?inline'
import iconBanner from '../assets/menuIcon/banner.svg?inline'
import iconAccount from '../assets/menuIcon/account.svg?inline'
import iconDataReport from '../assets/menuIcon/dataReport.svg?inline'
import iconVera from '../assets/menuIcon/banner_01.svg?inline'

<!-- 繪制右箭頭 -->
<svg viewBox="0 0 1024 1024" height="1em" width="1em" fill="currentColor">
  <path d="M665.6 512L419.84 768l-61.44-64 184.32-192L358.4 320l61.44-64 184.32 192 61.44 64z" />
</svg>

<!-- 繪制邊框 -->
<svg viewBox="0 0 20 2" preserveAspectRatio="none" width="100%" height="2px">
  <path d="M0 1L20 1" stroke="#000" stoke-width="2px"></path>
</svg>

注意： 新版chrome不支持 # , 需要改成%23 ；stroke="%23000"

 icon: https://www.baidu.com+ '/icons/icon_01.svg' 
<image  class="headIcon" src="data:image/svg+xml,{{icon}}"></image>
**特別注意 需要把img標(biāo)簽換成image標(biāo)簽**

將上面的代碼插入html文檔即可以很簡(jiǎn)單地繪制出一些圖標(biāo)。 正常情況下會(huì)將svg保存在本地，具體的頁(yè)面中導(dǎo)入，參考示例02 作為組件使用；目的是可復(fù)用 一般來(lái)說(shuō)，使用inline svg作為圖標(biāo)使用時(shí)，想要保留svg的縱橫比，可以只指定width屬性，但是一般為了清晰都同時(shí)指定height屬性。但如果是像上面繪制邊框這種不需要保留縱橫比的情形，可將preserveAspectRatio設(shè)置為none。

優(yōu)勢(shì)與使用方式

從示例01可以看到，將svg直接作為普通html元素插入文檔中，其本質(zhì)和渲染出一個(gè)div、span等元素?zé)o異，天生具有渲染快、不會(huì)造成額外的http請(qǐng)求等優(yōu)勢(shì)，除此之外還有以下優(yōu)勢(shì)之處：

樣式控制更加方便; inline svg頂層的元素會(huì)設(shè)置以下幾個(gè)屬性：

height=“1em” width=“1em” 可以方便地通過(guò)設(shè)置父元素的font-size屬性控制尺寸

fill=“currentColor” 可以方便地根據(jù)父元素或自身的color屬性控制顏色

但是我們也可以為其內(nèi)部的子元素單獨(dú)設(shè)置樣式 參考

注意事項(xiàng)

如需對(duì)svg中各部分分別應(yīng)用樣式，則在設(shè)計(jì)svg時(shí)最好不要將各部分都編于一組，可以將應(yīng)用相同樣式的部分進(jìn)行分別編組，其他不需要設(shè)置樣式的部分編為一組，這樣我們?cè)趹?yīng)用樣式時(shí)，只需為對(duì)應(yīng)的標(biāo)簽設(shè)置class屬性即可。

一般在拿到svg文件后，推薦使用svgo優(yōu)化svg代碼，節(jié)省體積，但是如果我們需要針對(duì)性設(shè)置樣式時(shí)則需要謹(jǐn)慎使用，因?yàn)閮?yōu)化代碼會(huì)進(jìn)行路徑合并等操作，可能我們想要設(shè)置的子元素已經(jīng)不是獨(dú)立的了。

inline svg的復(fù)用及組件化

同一個(gè)inline svg必須能夠進(jìn)行復(fù)用，將需要復(fù)用inline svg封裝成組件

// 使用inline svg組件
import AnySvgIcon from './inline-svg-component'
<AnySvgIcon width="16px" height="16px" />