這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
使用背景：
1.因為svg圖示在任何設備下都可以高清顯示，不會模糊，而icon會在顯卡比較低的電腦上有顯示模糊的情況
2.svg圖示在頁面render時 速度會比icon稍微快一點 3.實作小程式換膚功能 ；方案見：www.yuque.com/lufeilizhix…
// svg在html里的使用示例01 <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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>
SVG基礎可參考：www.yuque.com/lufeilizhix…
Svg-inline的使用
//示例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'
inline svg是目前前端圖示解決方案的最優解（當然不僅限于圖示），而且使用方式也及其簡單，只要將svg圖示代碼當成普通的html元素來使用即可，如：
<!-- 繪制右箭頭 --> <svg viewBox="0 0 1024 1024" height="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" height="2px"> <path d="M0 1L20 1" stroke="#000" stoke-></path> </svg> 注意： 新版chrome不支持 # , 需要改成%23 ；stroke="%23000"
作為圖片或背景使用時
icon: https://www.baidu.com+ '/icons/icon_01.svg'
<image src="data:image/svg+xml,{{icon}}"></image>
**特別注意 需要把img標簽換成image標簽**
將上面的代碼插入html檔案即可以很簡單地繪制出一些圖示， 正常情況下會將svg保存在本地，具體的頁面中匯入，參考示例02 作為組件使用；目的是可復用 一般來說，使用inline svg作為圖示使用時，想要保留svg的縱橫比，可以只指定width屬性，但是一般為了清晰都同時指定height屬性，但如果是像上面繪制邊框這種不需要保留縱橫比的情形，可將preserveAspectRatio設定為none，
優勢與使用方式
從示例01可以看到，將svg直接作為普通html元素插入檔案中，其本質和渲染出一個div、span等元素無異，天生具有渲染快、不會造成額外的http請求等優勢，除此之外還有以下優勢之處：
樣式控制更加方便; inline svg頂層的元素會設定以下幾個屬性：
height=“1em” width=“1em” 可以方便地通過設定父元素的font-size屬性控制尺寸
fill=“currentColor” 可以方便地根據父元素或自身的color屬性控制顏色
但是我們也可以為其內部的子元素單獨設定樣式 參考
注意事項
如需對svg中各部分分別應用樣式，則在設計svg時最好不要將各部分都編于一組，可以將應用相同樣式的部分進行分別編組，其他不需要設定樣式的部分編為一組，這樣我們在應用樣式時，只需為對應的標簽設定class屬性即可，
一般在拿到svg檔案后，推薦使用svgo優化svg代碼，節省體積，但是如果我們需要針對性設定樣式時則需要謹慎使用，因為優化代碼會進行路徑合并等操作，可能我們想要設定的子元素已經不是獨立的了，
inline svg的復用及組件化
同一個inline svg必須能夠進行復用，將需要復用inline svg封裝成組件
// 使用inline svg組件 import AnySvgIcon from './inline-svg-component' <AnySvgIcon height="16px" />
本文轉載于:
https://juejin.cn/post/7243680440690638904
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555117.html
標籤：其他
下一篇：返回列表