vue中svg圖標使用

在前端開發中，經常會用到svg圖標，在vue開發的中，經常會借助一些第三方插件，經常用的有vue-svg-icon,基本使用步驟為：

1、安裝插件（會提示沒有安裝xml-loader,只需要安裝下xml-loader，重啟下項目就可以解決報錯）

npm install vue-svg-icon xml-loader -D

2、引入組件

import Icon from 'vue-svg-icon/Icon'

Vue.component('Icon', Icon);

3、在項目src目錄下創建svg文件夾（必須）

4、使用svg圖形

<Icon name="close" scale="2"></Icon>

但是有時候存在用的svg圖形不標准（不是svg圖標，圖片轉svg圖形），vue-svg-icon解析不了，可以將svg當做一個普通的圖片引入

類似於:

<img src="xxx.svg">

在普通瀏覽器上是可以正常顯示的，但是在IE下，可能就解析不了，需要采用以下兼容的寫法，才能正常顯示：

<svg width="250" height="48">
    <image xlink:href="../svg/logo.svg" src="svg.png" width="250" height="48"/>
</svg>