一、svg 在網頁中的一般用法
svg 使用 XML 格式定義圖像，基本使用如下：
<body> <svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" style="fill:red;stroke-width:1;stroke:rgba(0,0,0,1)"/> </svg> </body>
二、在 Vue 中使用 svg
可以通過上述的一般用法在 Vue 中直接使用 svg，但既然已經是用 Vue來組件化開發項目了，那么在組件中穿插着一大段的 svg 也顯得過於雜亂；
這里可以通過 svg 的 use 標簽，將 svg 的一大段繪制代碼封裝在 symbol 中，然后通過 use 調用。
例如，將所有繪制 svg 的代碼放到 svg-icon.vue 文件中，所有圖標的繪制代碼使用 symbol 標簽分隔開並單獨命名，然后將這個文件當做組件導出，在主頁面中引入此組件，接着在需要使用 svg 圖標的地方通過 use 標簽將其引入，
svg-icon.vue 代碼示例如下：
<template> <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{position:'absolute',width:0,height:0}}> <defs> <symbol viewBox="0 0 26 31" id="location"> <path xmlns="http://www.w3.org/2000/svg" d="M512.571517 65.907059c-204.736964 0-370.715183 165.979242-370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865c-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/> </symbol> </defs> </svg> </template>
這里將整個 vue 組件導出一個大的 svg，此 svg 中包含了許多小圖標，類似於精靈圖，每個圖標使用 symbol 分隔，並單獨命名以方便調用。
在 index.vue 中使用示例：
... <svg class="location-icon"> <use xlink:href="#location"></use> </svg> ...
不過還有個問題，如果當一個頁面需要用到的 svg 圖標很多，勢必就造成 svg-icon.vue 這個文件非常大，當另一個頁面只需要用到其中一個 svg 圖標時，就需要把包含幾百個圖標的 svg 組件加載進去，明顯不太友好；
最好是能夠實現按需加載，當前頁面需要哪些圖標就加載哪些。
三、通過 vue-svg-icon 插件實現按需加載
1、安裝
npm install vue-svg-icon --save-dev
2、在項目的 main.js 入口引入 vue-svg-icon 以便全局調用：
import Icon from 'vue-svg-icon/Icon.vue'; Vue.component('icon', Icon);
3、將 svg 圖標文件放入 src/svg/
圖標文件可以到 iconfont 上下載
4、在組件中按需加載需要的圖標
例如 pen.svg 放到了 /src/svg 目錄中，在 vue 組件按需加載：
<template> <icon name="pen" scale="1"></icon> </template>
這里可以通過修改 scale 屬性值或在使用的頁面中修改 svg 樣式來調整圖標大小