方式一

直接在html里使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>SVG使用</title>
  6. </head>
  7. <body>
  8. <?xml version="1.0" encoding="UTF-8"?>
  9. <svg style="position: absolute;width: 0;height: 0;overflow: hidden;" width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  10.     <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
  11.   <symbol id="icon-pre" viewBox="0 0 120 120">  
  12.     <title>上一首</title>
  13.     <desc>Created with Sketch.</desc>
  14.     <defs>
  15.         <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientTransform="translate(0.500000,0.500000),scale(1.000000,0.994186),translate(-0.500000,-0.500000)" id="radialGradient-1">
  16.             <stop stop-color="#AC2D73" offset="0%"></stop>
  17.             <stop stop-color="#120A82" offset="92%"></stop>
  18.             <stop stop-color="#07006B" offset="100%"></stop>
  19.         </radialGradient>
  20.         <linearGradient x1="90.5072268%" y1="20.6957496%" x2="9.4941375%" y2="79.3043243%" id="linearGradient-2">
  21.             <stop stop-color="#3B2EE8" stop-opacity="0.2" offset="0%"></stop>
  22.             <stop stop-color="#FC429F" offset="25%"></stop>
  23.             <stop stop-color="#B639E5" offset="87%"></stop>
  24.             <stop stop-color="#FCFCFC" offset="100%"></stop>
  25.         </linearGradient>
  26.         <linearGradient x1="126.40209%" y1="13.5040932%" x2="-24.1592819%" y2="87.2715353%" id="linearGradient-3">
  27.             <stop stop-color="#FC429F" offset="0%"></stop>
  28.             <stop stop-color="#3B2EE8" offset="100%"></stop>
  29.         </linearGradient>
  30.         <linearGradient x1="67.8867993%" y1="30.9688504%" x2="75.4688625%" y2="21.1618118%" id="linearGradient-4">
  31.             <stop stop-color="#FC57A9" offset="0%"></stop>
  32.             <stop stop-color="#FCFCFC" offset="100%"></stop>
  33.         </linearGradient>
  34.         <linearGradient x1="61.4131653%" y1="33.8941487%" x2="39.4202448%" y2="71.4869303%" id="linearGradient-5">
  35.             <stop stop-color="#B639E5" offset="0%"></stop>
  36.             <stop stop-color="#3B2EE8" offset="100%"></stop>
  37.         </linearGradient>
  38.         <linearGradient x1="92.2146132%" y1="-4.63859816%" x2="10.4535745%" y2="110.070945%" id="linearGradient-6">
  39.             <stop stop-color="#FC429F" offset="0%"></stop>
  40.             <stop stop-color="#B639E5" offset="100%"></stop>
  41.         </linearGradient>
  42.     </defs>
  43.     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  44.         <g id="iPhone-8" transform="translate(-177.000000, -29.000000)">
  45.             <g id="上一首" transform="translate(177.000000, 29.000000)">
  46.                 <g id="图-资源-12">
  47.                     <ellipse id="Oval" fill="url(#radialGradient-1)" cx="60" cy="60.3278689" rx="56.0655738" ry="56.3934426"></ellipse>
  48.                     <path d="M59.9548308,5.61469731 C86.7262364,5.59034291 109.53495,25.1646104 113.727249,51.7617846 C117.919548,78.3589588 102.24883,104.07023 76.7829298,112.377093 C51.3170297,120.683956 23.6283668,109.116322 11.5058441,85.1059517 C-0.616678668,61.0955812 6.4316347,31.7820844 28.1225135,15.9982575 C37.381525,9.2515634 48.5217809,5.61766153 59.9548308,5.61469731 Z M59.9548308,3.93450958 C33.9678996,3.96156583 11.4045662,21.9459534 5.43790156,47.387911 C-0.528763057,72.8298686 11.6648878,99.0619808 34.8998782,110.769246 C42.7110885,114.676325 51.3147233,116.713418 60.0383473,116.721311 C81.0928073,116.708669 100.365002,104.83052 109.936925,85.9670171 C119.508848,67.1035138 117.766372,44.4356389 105.425394,27.2765176 C94.8863331,12.5904686 77.9653263,3.9033857 59.9590067,3.93450958 L59.9548308,3.93450958 Z" id="Shape" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
  49.                     <path d="M3.10837279,78.6885246 C-5.35495222,53.4533715 3.8779541,25.6687872 25.7703616,10.4918033 L28.852459,14.9558468 C8.92145404,28.7385915 0.519285038,54.0210331 8.24380779,76.9680513 L3.10837279,78.6885246 Z" id="Path" fill="url(#linearGradient-3)"></path>
  50.                     <path d="M114.245163,65.6499501 C116.372688,46.0329572 107.677121,26.8058523 91.5234854,15.4091655 C75.3698494,4.01247878 54.2926478,2.23434907 36.4483634,10.7628794 L34.0983607,5.8762456 C53.7206607,-3.5030912 76.898549,-1.5488063 94.6627212,10.9828374 C112.426893,23.5144812 121.990192,44.6572978 119.651842,66.2295082 L114.245163,65.6499501 Z" id="Path" fill="url(#linearGradient-4)"></path>
  51.                     <path d="M54.6247073,120 C35.5244375,118.320115 18.3772721,107.417802 8.52459016,90.6891545 L13.1637002,87.8688525 C22.1211082,103.081395 37.7137233,112.995026 55.0819672,114.520073 L54.6247073,120 Z" id="Path" fill="url(#linearGradient-5)"></path>
  52.                     <path d="M64.6784245,119.344262 L64.2622951,113.931055 C86.6626643,112.2425 105.714136,96.9321406 112.196238,75.4098361 L117.377049,76.9630103 C110.258865,100.635232 89.3126319,117.480598 64.6784245,119.344262 Z" id="Path" fill="url(#linearGradient-6)"></path>
  53.                 </g>
  54.                 <g id="Group" transform="translate(62.295082, 61.639344) scale(-1, 1) translate(-62.295082, -61.639344) translate(40.655738, 40.655738)" fill="#FFFFFF">
  55.                     <path d="M30.013345,18.4824896 C31.9627648,19.8670855 31.9627648,22.0908305 30.013345,23.4754264 L3.51281591,41.3283223 C1.56339608,42.7129182 -3.77064001e-08,41.7688755 0,39.2514284 L0,2.70648765 C0,0.189040535 1.5826973,-0.734023408 3.51281591,0.629593776 L30.013345,18.4824896 Z" id="Path"></path>
  56.                     <rect id="Rectangle" fill-rule="nonzero" x="36.7213115" y="0" width="6.55737705" height="41.9672131" rx="3.27868852"></rect>
  57.                 </g>
  58.             </g>
  59.         </g>
  60.     </g>
  61.   </symbol>  
  62.   <symbol id="icon-next">
  63.     <title>下一首</title>
  64.     <desc>Created with Sketch.</desc>
  65.     <defs>
  66.         <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientTransform="translate(0.500000,0.500000),scale(1.000000,0.994186),translate(-0.500000,-0.500000)" id="radialGradient-1">
  67.             <stop stop-color="#AC2D73" offset="0%"></stop>
  68.             <stop stop-color="#120A82" offset="92%"></stop>
  69.             <stop stop-color="#07006B" offset="100%"></stop>
  70.         </radialGradient>
  71.         <linearGradient x1="90.5072268%" y1="20.6957496%" x2="9.4941375%" y2="79.3043243%" id="linearGradient-2">
  72.             <stop stop-color="#3B2EE8" stop-opacity="0.2" offset="0%"></stop>
  73.             <stop stop-color="#FC429F" offset="25%"></stop>
  74.             <stop stop-color="#B639E5" offset="87%"></stop>
  75.             <stop stop-color="#FCFCFC" offset="100%"></stop>
  76.         </linearGradient>
  77.         <linearGradient x1="126.40209%" y1="13.5040932%" x2="-24.1592819%" y2="87.2715353%" id="linearGradient-3">
  78.             <stop stop-color="#FC429F" offset="0%"></stop>
  79.             <stop stop-color="#3B2EE8" offset="100%"></stop>
  80.         </linearGradient>
  81.         <linearGradient x1="67.8867993%" y1="30.9688504%" x2="75.4688625%" y2="21.1618118%" id="linearGradient-4">
  82.             <stop stop-color="#FC57A9" offset="0%"></stop>
  83.             <stop stop-color="#FCFCFC" offset="100%"></stop>
  84.         </linearGradient>
  85.         <linearGradient x1="61.4131653%" y1="33.8941487%" x2="39.4202448%" y2="71.4869303%" id="linearGradient-5">
  86.             <stop stop-color="#B639E5" offset="0%"></stop>
  87.             <stop stop-color="#3B2EE8" offset="100%"></stop>
  88.         </linearGradient>
  89.         <linearGradient x1="92.2146132%" y1="-4.63859816%" x2="10.4535745%" y2="110.070945%" id="linearGradient-6">
  90.             <stop stop-color="#FC429F" offset="0%"></stop>
  91.             <stop stop-color="#B639E5" offset="100%"></stop>
  92.         </linearGradient>
  93.     </defs>
  94.     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  95.         <g id="iPhone-8" transform="translate(-17.000000, -29.000000)">
  96.             <g id="下一首" transform="translate(17.000000, 29.000000)">
  97.                 <g id="图-资源-12">
  98.                     <ellipse id="Oval" fill="url(#radialGradient-1)" cx="60" cy="60.3278689" rx="56.0655738" ry="56.3934426"></ellipse>
  99.                     <path d="M59.9548308,5.61469731 C86.7262364,5.59034291 109.53495,25.1646104 113.727249,51.7617846 C117.919548,78.3589588 102.24883,104.07023 76.7829298,112.377093 C51.3170297,120.683956 23.6283668,109.116322 11.5058441,85.1059517 C-0.616678668,61.0955812 6.4316347,31.7820844 28.1225135,15.9982575 C37.381525,9.2515634 48.5217809,5.61766153 59.9548308,5.61469731 Z M59.9548308,3.93450958 C33.9678996,3.96156583 11.4045662,21.9459534 5.43790156,47.387911 C-0.528763057,72.8298686 11.6648878,99.0619808 34.8998782,110.769246 C42.7110885,114.676325 51.3147233,116.713418 60.0383473,116.721311 C81.0928073,116.708669 100.365002,104.83052 109.936925,85.9670171 C119.508848,67.1035138 117.766372,44.4356389 105.425394,27.2765176 C94.8863331,12.5904686 77.9653263,3.9033857 59.9590067,3.93450958 L59.9548308,3.93450958 Z" id="Shape" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
  100.                     <path d="M3.10837279,78.6885246 C-5.35495222,53.4533715 3.8779541,25.6687872 25.7703616,10.4918033 L28.852459,14.9558468 C8.92145404,28.7385915 0.519285038,54.0210331 8.24380779,76.9680513 L3.10837279,78.6885246 Z" id="Path" fill="url(#linearGradient-3)"></path>
  101.                     <path d="M114.245163,65.6499501 C116.372688,46.0329572 107.677121,26.8058523 91.5234854,15.4091655 C75.3698494,4.01247878 54.2926478,2.23434907 36.4483634,10.7628794 L34.0983607,5.8762456 C53.7206607,-3.5030912 76.898549,-1.5488063 94.6627212,10.9828374 C112.426893,23.5144812 121.990192,44.6572978 119.651842,66.2295082 L114.245163,65.6499501 Z" id="Path" fill="url(#linearGradient-4)"></path>
  102.                     <path d="M54.6247073,120 C35.5244375,118.320115 18.3772721,107.417802 8.52459016,90.6891545 L13.1637002,87.8688525 C22.1211082,103.081395 37.7137233,112.995026 55.0819672,114.520073 L54.6247073,120 Z" id="Path" fill="url(#linearGradient-5)"></path>
  103.                     <path d="M64.6784245,119.344262 L64.2622951,113.931055 C86.6626643,112.2425 105.714136,96.9321406 112.196238,75.4098361 L117.377049,76.9630103 C110.258865,100.635232 89.3126319,117.480598 64.6784245,119.344262 Z" id="Path" fill="url(#linearGradient-6)"></path>
  104.                 </g>
  105.                 <path d="M70.6690827,59.1382273 C72.6185025,60.5228233 72.6185025,62.7465682 70.6690827,64.1311641 L44.1685536,81.98406 C42.2191338,83.3686559 40.6557377,82.4246132 40.6557377,79.9071661 L40.6557377,43.3622254 C40.6557377,40.8447782 42.238435,39.9217143 44.1685536,41.2853315 L70.6690827,59.1382273 Z" id="Path" fill="#FFFFFF"></path>
  106.                 <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" x="77.3770492" y="40.6557377" width="6.55737705" height="41.9672131" rx="3.27868852"></rect>
  107.             </g>
  108.         </g>
  109.     </g>
  110.   </symbol>
  111. </svg>
  113. <!-- 引用svg -->
  114. <p>
  115.   <svg>
  116.       <use xlink:href="#icon-pre"></use>
  117.   </svg>
  118.   <svg>
  119.     <use xlink:href="#icon-next"></use>
  120.   </svg>
  121. </p>
  123. </body>
  124. </html>

将所有的svg代码copy在一起放在html里面，里面每个svg图片代码用symbol包裹，最外面用svg包裹，好处是图片一起加载。之前每个svg图片代码的svg头部都是一样的，如下。

<?xml version="1.0" encoding="UTF-8"?>
<svg style="position: absolute;width: 0;height: 0;overflow: hidden;" width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->

特别注意，svg的symbol引用时，symbol 标签一定要有 viewBox属性，symbol上不要写宽高。svg标签上写上宽高，viewBox可写可不写。不然在CSS没法设置svg设置宽高。做到了两个细节，SVG整体才能任意自动缩放。

 <symbol id="icon-pre" viewBox="0 0 120 120">
     <!-- 省略代码 -->
 </symbol>

<svg style="position: absolute;width: 0;height: 0;overflow: hidden;" width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
  <symbol id="icon-pre" viewBox="0 0 120 120">
    <!-- 省略代码 -->
  </symbol>  
</svg>

在html里面引用svg图片方法如下

<svg>
      <use xlink:href="#icon-pre"></use>
</svg>

svg {
    width: 20px;
    height: 20px;
}

这种方法使用svg缺点是html代码混乱冗长。请看法2

方式二