{"id":4264,"date":"2014-07-10T18:03:31","date_gmt":"2014-07-10T10:03:31","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=4264"},"modified":"2019-11-04T14:27:13","modified_gmt":"2019-11-04T06:27:13","slug":"introduce-svg-sprite-technology","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2014\/07\/introduce-svg-sprite-technology\/","title":{"rendered":"\u672a\u6765\u5fc5\u70ed\uff1aSVG Sprites\u6280\u672f\u4ecb\u7ecd"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/?p=4264<\/a><\/p>\n

\u4e00\u3001Sprite\u6280\u672f<\/h3>\n

\u8fd9\u91cc\u6240\u8bf4\u7684Sprite\u6280\u672f\uff0c\u6ca1\u9519\uff0c\u7c7b\u4f3c\u4e8eCSS\u4e2d\u7684Sprite\u6280\u672f\u3002\u56fe\u6807\u56fe\u5f62\u6574\u5408\u5728\u4e00\u8d77\uff0c\u5b9e\u9645\u5448\u73b0\u7684\u65f6\u5019\u51c6\u786e\u663e\u793a\u7279\u5b9a\u56fe\u6807\u3002<\/p>\n

\u53e6\uff0c\u672c\u6587\u56fe\u7247\u751a\u591a\uff0c\u722a\u673a\u515a\u7ee7\u7eed\u6d4f\u89c8\u9700\u614e\u91cd\u3002<\/p>\n

\u4e8c\u3001SVG Sprites\u4e0esymbol\u5143\u7d20<\/h3>\n

\u76ee\u524d\uff0cSVG Sprite\u6700\u4f73\u5b9e\u8df5\u662f\u4f7f\u7528symbol<\/code>\u5143\u7d20\u3002symbol<\/code>\u5143\u7d20\u662f\u4ec0\u4e48\u5462\uff1f\u5355\u7eaf\u7ffb\u8bd1\u7684\u8bdd\uff0c\u662f\u201c\u7b26\u53f7\u201d\u7684\u610f\u601d\u3002\u7136\uff0c\u8fd9\u4e2a\u91ca\u4e49\u5e76\u4e0d\u7b26\u5408\u8fd9\u91cc\u7684\u573a\u666f\u3002\u4e0d\u77e5\u5927\u5bb6\u6709\u6ca1\u6709\u7528\u8fc7Flash\uff0csymbol<\/code>\u5b9e\u9645\u4e0a\u5c31\u7c7b\u4f3c\u4e8eFlash\u4e2d\u7684\u201c\u5f71\u7247\u526a\u8f91\u201d\u3001\u6216\u8005\u201c\u5143\u4ef6\u201d\u3002<\/p>\n

\u56e0\u6b64\uff0c\u6211\u4e2a\u4eba\u89c9\u5f97\uff0csymbol<\/code>\u5e94\u8be5\u89e3\u91ca\u4e3a\u201c\u5143\u4ef6\u201d\u6700\u4e3a\u6070\u5f53\uff01<\/p>\n

\u90a3\uff0csymbol<\/code>\u548cSVG Sprite\u53c8\u6709\u4ec0\u4e48\u5173\u7cfb\u5462\uff1f<\/p>\n

\u6211\u4eec\u53ef\u4ee5\u628aSVG\u5143\u7d20\u770b\u6210\u4e00\u4e2a\u821e\u53f0\uff0c\u800csymbol<\/code>\u5219\u662f\u821e\u53f0\u4e0a\u4e00\u4e2a\u4e00\u4e2a\u7ec4\u88c5\u597d\u7684\u5143\u4ef6\uff0c\u8fd9\u8fd9\u4e9b\u4e00\u4e2a\u4e00\u4e2a\u7684\u5143\u4ef6\u5c31\u662f\u6211\u4eec\u5373\u5c06\u4f7f\u7528\u7684\u4e00\u4e2a\u4e00\u4e2aSVG\u56fe\u6807\u3002<\/p>\n

\u4e8e\u662f\uff0c\u5bf9\u4e8e\u4e00\u4e2a\u96c6\u5408\u4e86\u4e09\u4e2aSVG\u56fe\u6807\u7684SVG\u5143\u7d20\u7684\u4ee3\u7801\u7ed3\u6784\u4f1a\u662f\u8fd9\u6837\uff1a<\/p>\n

\n
\r\n<svg>\r\n    <symbol>\r\n        <!-- \u7b2c1\u4e2a\u56fe\u6807\u8def\u5f84\u5f62\u72b6\u4e4b\u7c7b\u4ee3\u7801 --><\/span>\r\n    <\/symbol>\r\n    <symbol>\r\n        <!-- \u7b2c2\u4e2a\u56fe\u6807\u8def\u5f84\u5f62\u72b6\u4e4b\u7c7b\u4ee3\u7801 --><\/span>\r\n    <\/symbol>\r\n    <symbol>\r\n        <!-- \u7b2c3\u4e2a\u56fe\u6807\u8def\u5f84\u5f62\u72b6\u4e4b\u7c7b\u4ee3\u7801 --><\/span>\r\n    <\/symbol>\r\n<\/svg>\r\n<\/pre>\n<\/div>\n
\u6bcf\u4e00\u4e2asymbol<\/code>\u5c31\u662f\u4e00\u4e2a\u56fe\u6807\u5143\u4ef6\uff0c\u4f46\u662f\uff0c\u53ea\u6709\u4e0a\u9762\u7684\u4ee3\u7801\uff0c\u662f\u65e0\u6cd5\u5448\u73b0\u7c7b\u4f3c\u4e0b\u9762\u7684\u6548\u679c\u7684\uff1a
\n\"SVG<\/p>\n
\u4e3a\u4f55\uff1f<\/p>\n
\u56e0\u4e3a\uff0c\u821e\u53f0\u4e0a\u53ea\u662f\u653e\u7f6e\u4e86\u56fe\u6807\uff0c\u5982\u679c\u4f60\u4e0d\u4f7f\u7528(use)\uff0c\u662f\u770b\u4e0d\u89c1\u7684\u3002\u5c31\u597d\u6bd4\u4f60\u5973\u670b\u53cb\u4e70\u4e86\u51e0\u7bb1\u7684\u8863\u670d\u653e\u5bb6\u91cc\uff0c\u5982\u679c\u4e0d\u7a7f\u51fa\u53bb\uff0c\u8c01\u77e5\u9053\u5979\u8fd9\u4e48\u571f\u8c6a\u5462\uff1f<\/p>\n
\u56e0\u6b64\uff0c\u8fd8\u5dee\u4e00\u4e2a\u201c\u4f7f\u7528\u201d\uff0c\u4e5f\u5c31\u662fSVG\u4e2d\u7684<use><\/code>\u5143\u7d20\u3002<\/p>\n
\u4e09\u3001SVG\u4e2d\u7684use\u5143\u7d20<\/h3>\n
use\u5143\u7d20<\/a>\u662fSVG\u4e2d\u975e\u5e38\u5f3a\u5927\uff0c\u975e\u5e38\u91cd\u8981\u7684\u4e00\u4e2a\u5143\u7d20\uff0c\u5c24\u5176\u5728Web\u5f00\u53d1\u4e2d\uff0c\u4e3a\u4f55\uff1f<\/p>\n
\u4e24\u70b9\uff1a<\/p>\n
    \n
  1. \u53ef\u91cd\u590d\u8c03\u7528\uff1b<\/li>\n
  2. \u8de8SVG\u8c03\u7528\uff1b<\/li>\n<\/ol>\n
    1. \u53ef\u91cd\u590d\u8c03\u7528<\/strong>
    \n\u4f60\u597d\u4e0d\u5bb9\u6613\uff0c\u7528\u4e86\u51e0\u5341\u4e2a\u5750\u6807\u503c\uff0c\u597d\u4e0d\u5bb9\u6613\u7ed8\u5236\u4e86\u4e00\u4e2a\u56fe\u5f62\uff0c\u5982\u679c\u4f60\u60f3\u518d\u5f04\u4e00\u4e2a\u540c\u6837\u9020\u578b\uff0c\u4f46\u4f4d\u7f6e\u4e0d\u540c\u7684\u56fe\u5f62\u51fa\u6765\uff0c\u4f60\u4f1a\u600e\u4e48\u529e\uff1f\u2014\u2014\u518d\u590d\u5236\u4e00\u904d\u4ee3\u7801\uff1f\u522b\u8bf4\u7b11\u4e86\uff0c\uff08\u5982\u679c\u771f\u90a3\u6837\uff09SVG\u6587\u4ef6\u7684\u5c3a\u5bf8\u8d76\u5f97\u4e0a\u4e8c\u5e08\u5144\u7684\u8170\u56f4\u4e86\u3002<\/p>\n
    \u4f7f\u7528<use><\/code>\u5143\u7d20\u5c31\u53ef\u4ee5\uff0c\u770b\u4e0b\u9762\u7684\u677f\u6817\uff1a<\/p>\n
    \n
    <svg>\r\n  <defs>\r\n    <g id=\"shape\">\r\n        <rect x=\"0\" y=\"0\" width=\"50\" height=\"50\" \/>\r\n        <circle cx=\"0\" cy=\"0\" r=\"50\" \/>\r\n    <\/g>\r\n  <\/defs>\r\n\r\n  <use xlink:href=\"#shape\" x=\"50\" y=\"50\" \/>\r\n  <use xlink:href=\"#shape\" x=\"200\" y=\"50\" \/>\r\n<\/svg><\/pre>\n<\/div>\n
    \u7ed3\u679c\u662f\uff08IE9+\u6d4f\u89c8\u5668\u53ef\u89c1\uff09\uff1a
    \n      <\/g>  <\/defs>  <\/svg><\/p>\n
    \u9996\u5148\uff0c\u6ce8\u610f\u5230\u6ca1\u6709\uff0cuse<\/code>\u5143\u7d20\u662f\u901a\u8fc7xlink:href<\/code>\u5c5e\u6027\uff0c\u5bfb\u627e\u8981\u4f7f\u7528\u7684\u5143\u7d20\u7684\u3002#shape<\/code>\u5bf9\u5e94\u7684\u5c31\u662fid<\/code>\u4e3ashape<\/code>\u7684\u5143\u7d20\u3002use<\/code>\u5143\u7d20\u53ef\u4ee5\u6709\u81ea\u5df1\u7684\u5750\u6807\uff0c\u4ee5\u53ca\u652f\u6301transform<\/code>\u53d8\u6362\uff0c\u751a\u81f3\u53ef\u4ee5use\u5176\u4ed6use<\/code>\u5143\u7d20\u3002<\/p>\n
    \u8fd9\u91cc\uff0c\u4e24\u4e2ause<\/code>\u5143\u7d20\u4f7f\u7528\u7684\u662f\u540c\u4e00\u4e2ag<\/code>\u5143\u7d20\uff08\u7ec4\u5408\uff09\uff0c\u4ece\u800c\u5b9e\u73b0\u4e86\u56fe\u5f62\u7684\u91cd\u590d\u8c03\u7528\u529f\u80fd\u3002<\/p>\n
    2. \u8de8SVG\u8c03\u7528<\/strong>
    \nSVG\u4e2d\u7684use<\/code>\u5143\u7d20\u53ef\u4ee5\u8c03\u7528\u5176\u4ed6SVG\u6587\u4ef6\u7684\u5143\u7d20\uff0c\u53ea\u8981\u5728\u4e00\u4e2a\u6587\u6863\u4e2d\u3002<\/p>\n
    \u7d27\u63a5\u7740\u4e0a\u9762\u7684\u677f\u6817\uff1a<\/p>\n
    \n
    <svg width=\"500\" height=\"110\"><use xlink:href=\"#shape\" x=\"50\" y=\"50\" \/><\/svg><\/pre>\n<\/div>\n
    \u7ed3\u679c\u4ecd\u662f\u90a3\u4e2a\u56fe\u5f62\uff1a
    \n<\/svg><\/p>\n
    \u800c\u8fd9\u4e2a\u8de8SVG\u8c03\u7528<\/strong>\u5c31\u662f\u201cSVG Sprite\u6280\u672f\u201d\u7684\u6838\u5fc3\u6240\u5728\u3002<\/p>\n
    \u8bd5\u60f3\u4e0b\uff0c\u6211\u4eec\u53ea\u8981\u5728\u9875\u9762\u67d0\u5904\u8f7d\u5165\u4e00\u4e2a\u5145\u6ee1Sprite(symbol<\/code>)\u7684SVG\u6587\u4ef6\uff08\u6216\u76f4\u63a5include<\/code> SVG\u4ee3\u7801\uff09\uff0c\u4e8e\u662f\uff0c\u5728\u9875\u9762\u7684\u4efb\u4f55\u89d2\u843d\uff0c\u53ea\u8981\u60f3\u4f7f\u7528\u8fd9\u4e2a\u56fe\u6807\uff0c\u53ea\u8981\u7b80\u5355\u8fd9\u4e00\u70b9\u4ee3\u7801\u5c31\u53ef\u4ee5\u4e86\uff1a<\/p>\n
    \n
    <svg class=\"size\"><use xlink:href=\"#target\" \/><\/svg><\/pre>\n<\/div>\n
    \u56fe\u6807\u5c3a\u5bf8CSS\u63a7\u5236\uff0c\u91cc\u9762\u53ea\u6709\u4e00\u4e2a\u4ec5\u6709xlink:href<\/code>\u5c5e\u6027\u7684use<\/code>\u5143\u7d20\uff0cDone! \u5b8c\u6210\uff01<\/p>\n
    \u4e5f\u5373\u662f\u8bf4\uff0c\u5728HTML\u5c42\u9762\uff0c\u56fe\u6807\u4f7f\u7528\u7684\u4ee3\u7801\u6210\u672c\uff0c\u8ddf\u4f20\u7edf\u7684CSS Sprite\u6216\u8005\u6d41\u884c\u7684font-face<\/code>\u51e0\u4e4e\u65e0\u5f02\uff0c\u4ee3\u7801\u7b80\u6d01\uff0c\u800c\u4e14\u5f88\u597d\u7ef4\u62a4\u3002\u6240\u6709\u7684SVG\u56fe\u6807\u90fd\u5728\u4e00\u4e2aSVG\u6e90\u4e0a\u3002retina\u826f\u597d\uff0c\u5c3a\u5bf8\u53ef\u4efb\u610f\u62c9\u4f38\uff0c\u4e14\u989c\u8272\u53ef\u63a7\uff0c\u771f\u4e43Web\u56fe\u6807\u7684\u672a\u6765\u4e4b\u661f\u3002<\/p>\n
    \u5439\u7684\u5634\u5df4\u90fd\u5e72\u4e86\uff0c\u4e0a\u4e2a\u7b80\u5355\u7684demo\u7ed9\u5927\u5bb6\u7785\u7785, \u6211\u5148\u53bb\u7ed9\u6c34\u6392\u6c34~~<\/p>\n
    \u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aSVG Sprite\u4f7f\u7528\u793a\u610fdemo<\/a><\/p>\n
    \u4ee3\u7801\u5982\u4e0b\u622a\u56fe\uff1a
    \n\"SVG<\/p>\n
    \u6548\u679c\u4e3a\uff1a
    \n\"SVG\u4f7f\u7528\u7684\u56fe\u6807\u6548\u679c\"<\/p>\n
    \u603b\u7ed3\u4e0b\u5c31\u662f\uff1asymbol + use => SVG Sprite<\/strong><\/p>\n
    \u8bf8\u4f4d\u4f1a\u4e0d\u4f1a\u89c9\u5f97\u672c\u6587\u7684\u5185\u5bb9\u5feb\u8981\u7ed3\u675f\u4e86\u5462\uff1f<\/p>\n
    \u563b\u563b\u563b\u563b\uff0c\u9876\u591a\u624d1\/3<\/strong>\uff0c\u4e0b\u9762\u7684\u624d\u662f\u91cd\u70b9\uff0c\u6253\u8d77\u7cbe\u795e\uff0c\u8d70\u8d77~~<\/p>\n
    \u56db\u3001SVG Sprite\u5b9e\u9645\u5e94\u7528\u7684\u963b\u788d<\/h3>\n
    \u4e24\u5927\u95ee\u9898\uff1a<\/p>\n
      \n
    1. SVG\u56fe\u6807\u4ece\u4f55\u800c\u6765\uff1f<\/li>\n
    2. SVG\u56fe\u6807\u5982\u4f55\u53d8\u6210symbol\u5e76\u6574\u5408\u5728\u4e00\u8d77\uff1f<\/li>\n<\/ol>\n
      \u7b2c1<\/strong>\u4e2a\u95ee\u9898\uff0cSVG\u56fe\u6807\u4ece\u4f55\u800c\u6765\uff1f<\/strong>
      \n\u201c\u8fdc\u5728\u5929\u8fb9\u8fd1\u5728\u773c\u524d\u201d\uff0cCSS3 font-face<\/code>\u7684\u9010\u6e10\u5347\u6e29\uff0c\u8ba9\u5f88\u591afont-face<\/code>\u5de5\u5177\u8bde\u751f\u4e86\u3002\u4f8b\u5982\u4ee5\u524d\u6211\u4ecb\u7ecd\u8fc7\u7684\u56fd\u5916\u7684      icomoon.io<\/a>\uff0c\u6216\u8005\u56fd\u5185\u963f\u91cc\u7cfb\u7684iconfont.cn<\/a>, \u6216\u8005bootsrap 3\u7c89\u4eec\u7684font-awesome<\/a><\/p>\n
      \u8fd9\u4e9b\u56fe\u6807\u5b9e\u9645\u4e0a\u90fd\u662f\u4f7f\u7528SVG\u4f5c\u4e3a\u5a92\u4ecb\u7684\uff0c\u6240\u4ee5\uff0c\u6839\u672c\u5c31\u4e0d\u8981\u62c5\u5fc3\u201cSVG\u56fe\u6807\u4ece\u4f55\u800c\u6765\u201d\uff0c\u8fd9\u56fe\u6807\u591a\u7684\u5c31\u50cf\u725b\u9b54\u738b\u8eab\u4e0a\u7684\u8671\u5b50\u2014\u2014\u4e00\u6296\u4e00\u5927\u628a\u554a\uff01<\/p>\n
      OK\uff0c\u5982\u4f55\u83b7\u5f97\u5462\uff1f\u76f4\u63a5\u4e0b\u8f7d\u3002\u62fficonfont.cn<\/a>\u793a\u610f\uff0c\u70b9\u51fb\u67d0\u4e00\u56fe\u6807\u7684\u4e0b\u8f7d\u6309\u94ae\uff1a
      \n\"\u70b9\u51fb\u4e0b\u8f7d\u56fe\u6807\"<\/p>\n
      \u70b9\u51fb\u4e0b\u8f7dSVG:
      \n\"\u70b9\u51fb\u4e0b\u8f7dSVG\u6309\u94ae\"<\/p>\n
      \u4e8e\u662f\uff0c\u6211\u4eec\u5c31\u5f97\u5230\u4e86SVG\u56fe\u6807\u5566\uff01\u5982\u679c\u4f60\u8fd8\u9700\u8981\u5176\u4ed6\u56fe\u6807\uff0c\u4e5f\u6309\u7167\u8fd9\u4e2a\u6b65\u9aa4\u4e00\u4e2a\u4e00\u4e2a\u4e0b\u8f7d\u4e0b\u6765\uff0c\u5f88\u7b80\u5355\u5427~ \u7136\u540e\u628a\u5b83\u4eec\u653e\u5728\u4e00\u4e2a\u6587\u4ef6\u5939\u4e2d\uff0c\u4ee5\u5907\u540e\u7528\u3002<\/p>\n
      \u4e0b\u9762\u6700\u5173\u952e\u7684\u662f\u7b2c2<\/strong>\u4e2a\u95ee\u9898\uff0c\u5982\u4f55\u5408\u5e76\u8fd9\u4e9bSVG\u5230\u4e00\u4e2aSVG\u4e0a\uff1f<\/strong>\u540c\u65f6\u6ee1\u8db3\u4f7f\u7528\u7684\u662fsymbol<\/code>\u6807\u7b7e\uff0c\u5e76\u53ef\u4ee5\u4f7f\u7528\u88f8\u9732\u7684use<\/code>\u5143\u7d20\uff08\u9664\u4e86xlink:href<\/code>\u6ca1\u6709\u5176\u4ed6\u5c5e\u6027\uff09\u8c03\u7528\u5462\uff1f<\/p>\n
      \u5f88\u957f\u5f88funny, \u8981\u4e13\u95e8\u72ec\u7acb\u4e24\u6bb5\uff0c<\/p>\n
      \u4e94\u3001\u5173\u4e8e\u5408\u5e76\uff1a\u504f\u5f00\u53d1\u7684\u524d\u7aef\u770b\u8fd9\u91cc<\/h3>\n
      2018-08-19\u5f3a\u52bf\u63d2\u5165<\/strong>
      \n\u73b0\u5728\u662fgulp\u5929\u4e0b\u4e86\uff0c\u6240\u4ee5\u4e0b\u9762\u5185\u5bb9\u4ec5\u4f9b\u53c2\u8003\u3002\n<\/div>\n
      \u8fd9\u91cc\u7684\u65b9\u6cd5\u9002\u7528\u4e8e\u504f\u5f00\u53d1\u7684\u524d\u7aef\uff0c\u4e00\u4e9b\u5bf9\u6307\u4ee4\u65e0\u611f\u7684\u59b9\u5b50\u4eec\uff0c\u53ef\u4ee5\u770b\u4e0b\u9762\u504f\u8bbe\u8ba1\u7684\u65b9\u6cd5\u3002<\/p>\n
      Github\u4e0a\uff0c\u6709\u4e2a\u540d\u4e3asvgstore<\/code>\u7684grunt<\/code>\u63d2\u4ef6\uff0c\u5730\u5740\u6233\u8fd9\u91cc<\/a>\u3002\u5982\u679c\u60a8\u8fd8\u4e0d\u4e86\u89e3grunt<\/code>, \u53ef\u4ee5\u770b\u770b\u8fd9\u4e24\u7bc7\u6211\u89c9\u5f97\u4e0d\u9519\u7684\u6587\u7ae0\uff1a\u201c\u4f7f\u7528GruntJS\u6784\u5efaWeb\u7a0b\u5e8f (1)<\/a>\u201d\u548c\u201c\u4f7f\u7528GruntJS\u6784\u5efaWeb\u7a0b\u5e8f (2)<\/a>\u201d.<\/p>\n
      grunt<\/code>\u6539\u88c5\u7684\u88c5\u597d\u540e\uff0c\u6267\u884c\u4e0b\u9762\u7684\u6307\u4ee4\uff0c<\/p>\n
      \n
      npm install grunt-svgstore --save-dev<\/pre>\n<\/div>\n
      \"\u5b89\u88c5grunt-svgstore\"<\/p>\n
      \u70e7\u4e2a\u9999\u4fdd\u4f51\u5b89\u88c5\u6210\u529f\uff0c\u7136\u540e\u4f60\u5c31\u4f1a\u770b\u5230\u5728node_modules<\/code>\u6587\u4ef6\u5939\u4e2d\u4e00\u4e2a\u540d\u4e3agrunt-svgstore<\/code>\u7684\u5b50\u6587\u4ef6\u5939\uff08\u5982\u4e0b\uff09\uff1a
      \n\"grunt-svgstore\u6587\u4ef6\u5939\"<\/p>\n
      \u8fd9\u4e2a\u540d\u4e3agrunt-svgstore<\/code>\u7684\u6587\u4ef6\u5939\u4e2d\u6709\u4e2a\u540d\u4e3aGruntfile.js<\/code>\u7684\u6587\u4ef6\uff0c\u636e\u6211\u4e2a\u4eba\u7406\u89e3\uff0c\u8fd9\u4e2aJS\u662f\u6240\u6709grunt<\/code>\u63d2\u4ef6\u8981\u4f7f\u7528\u7684\u914d\u7f6e\u6587\u4ef6\u3002<\/p>\n
      \u6211\u5728\u91cc\u9762\u505a\u4e86\u4e00\u4ef6\u4e8b\u60c5\uff0c\u52a0\u4e86\u8fd9\u4e48\u4e00\u884c\u4ee3\u7801\uff1a
      \n\"\u52a0\u4e86\u4e00\u884c\u4ee3\u7801\u793a\u610f\"<\/p>\n
      \u4e3a\u4ec0\u4e48\u8981\u52a0\u8fd9\u4e48\u884c\u4ee3\u7801\u5462\uff1f\u56e0\u4e3agrunt-svgstore<\/a>\u9879\u76eeREADME.md\u8ba9\u52a0\u7684\uff0c\u6240\u4ee5\u6211\u5c31\u52a0\u4e86 \u3002<\/p>\n
      \u4f60\u4f1a\u770b\u5230<\/p>\n
      \n
      svgstore: {\r\n\r\n}<\/pre>\n<\/div>\n
      \u4e2d\u6709\u4e00\u5927\u5806\u7684\u914d\u7f6e\u4ec0\u4e48\u7684\uff0c\u8fd9\u4e9b\u90fd\u662f\u7528\u6765\u72ec\u7acb\u6d4b\u8bd5\u5404\u4e2aAPI\u7684\uff08options<\/code>\u5bf9\u8c61\u4e2d\u5404\u4e2a\u952e\u5c31\u662fAPI\u540d\u79f0\uff09\uff0c\u8ba9\u4f60\u77e5\u9053\u6b64\u63d2\u4ef6\u5404\u4e2aAPI\u90fd\u662f\u5e72\u561b\u7528\u7684\uff0c\u5177\u4f53\u91ca\u4e49\u53c2\u89c1\u8be5Github\u9879\u76ee\u3002\u5fcd\u4e0d\u4f4f\u63d0\u4e00\u4e0b\uff0c\u5982\u679c\u4f60\u5e0c\u671bSVG\u56fe\u6807\u989c\u8272\u53ef\u4ee5\u5728CSS\u4e2d\u901a\u8fc7fill<\/code>\u63a7\u5236\uff0ccleanup<\/code>\u8bbe\u7f6e\u4e3atrue<\/code>.<\/p>\n
      OK, \u51c6\u5907\u5de5\u4f5c\u5b8c\u6bd5\uff0c\u4e0b\u9762\u6765\u5b9e\u8df5\u4e0b\u3002\u6211\u628a\u4eceiconfont.cn\u4e0a\u4e0b\u8f7d\u4e0b\u6765\u76843\u4e2aSVG\u90fd\u653e\u5728\u4e86\u4e00\u4e2a\u540d\u4e3amytest<\/code>\u7684\u6587\u4ef6\u5939\u4e0b\uff0c\u6211\u5e0c\u671b\u8fd9\u4e2a\u6587\u4ef6\u5939\u4e0b\u7684SVG\u90fd\u6574\u5408\u5728\u4e00\u8d77\uff0c\u5e76\u53ef\u4ee5\u65b9\u4fbf\u8c03\u7528\uff0c\u600e\u4e48\u529e\uff1f<\/p>\n
      \u5728svgstore: {}<\/code>\u5185\u90e8\u641e\u4e2a\u81ea\u5b9a\u4e49\u7684\u914d\u7f6e\uff0c\u89c1\u4e0b\u56fe\uff1a
      \n\"\u81ea\u5b9a\u4e49\u7684\u914d\u7f6e\"<\/p>\n
      \u610f\u601d\u662f\uff1amytest<\/code>\u6587\u4ef6\u5939\u4e0b\u7684\u6240\u6709SVG\u5408\u5e76\u6210\u4e00\u4e2a\u540d\u4e3amytest.svg<\/code>\u7684\u5927SVG\u6587\u4ef6\uff0c\u5e76\u653e\u5728tmp<\/code>\u6587\u4ef6\u5939\u4e0b\u3002<\/p>\n
      \u6211\u4eeccd<\/code>\u5230grunt-svgstore<\/code>\u76ee\u5f55\uff0c\u7136\u540e\u5728\u547d\u4ee4\u884c\u5de5\u5177\u4e2d\u8f93\u5165\uff1a<\/p>\n
      \n
      grunt<\/pre>\n<\/div>\n
      \u7136\u540e\u8d70\u8d77\uff0c\u518d\u70e7\u7b2c2\u6839\u9999\uff0c\u4fdd\u4f51\u4e00\u5207\u6b63\u5e38\u2026\u2026
      \n\"mytest\u8d70\u8d77~\"<\/p>\n
      \u7136\u540e\uff0c\u5c31\u53ef\u4ee5\u5728tmp\u6587\u4ef6\u5939\u4e0b\u770b\u5230\u6211\u4eec\u7684\u5c0f\u7ed3\u6676\u2014\u2014mytest.svg<\/code>\uff0c\u4ee5\u53ca\u5982\u4f55\u4f7f\u7528\u793a\u610f\u7684HTML demo\u9875\u9762\u3002
      \n\"SVG\u5408\u5e76\u7684\u6587\u4ef6\uff0c\u4ee5\u53ca\u5bf9\u5e94\u7684demo~\"<\/p>\n
      \u6b64demo\u9875\u9762\u6e90\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
      \n
      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:0;height:0;visibility:hidden;\"><symbol viewBox=\"0 0 1024 1024\" id=\"iconfont-baobei\"><title>iconfont-baobei<\/title><path fill=\"#272636\" d=\"M...z\" transform=\"translate(0, 800) scale(1, -1)\"\/><\/symbol><symbol viewBox=\"0 0 1024 1024\" id=\"iconfont-bianji\"><title>iconfont-bianji<\/title><path fill=\"#272636\" d=\"M...z\" transform=\"translate(0, 800) scale(1, -1)\"\/><\/symbol><symbol viewBox=\"0 0 1024 1024\" id=\"iconfont-shangchuan\"><title>iconfont-shangchuan<\/title><path fill=\"#272636\" d=\"M...z\" transform=\"translate(0, 800) scale(1, -1)\"\/><\/symbol><\/svg>\r\n\r\n<svg>\r\n    <use xlink:href=\"#iconfont-baobei\"><\/use>\r\n<\/svg>\r\n<svg>\r\n    <use xlink:href=\"#iconfont-bianji\"><\/use>\r\n<\/svg>\r\n<svg>\r\n    <use xlink:href=\"#iconfont-shangchuan\"><\/use>\r\n<\/svg><\/pre>\n<\/div>\n
      \u6548\u679c\u5982\u4e0b\u622a\u56fe\uff1a
      \n\"\u7b2c\u4e00\u6b21\u6210\u578b\u7684SVG\u6548\u679c\u56fe\"<\/p>\n
      Oh, no! \u600e\u4e48\u6709\u6b8b\u7f3a\uff0c\u4e0d\u5b8c\u7f8e\uff0c\u611f\u89c9\u4e0d\u4f1a\u518d\u7231\u4e86\uff01<\/p>\n
      \u6de1\u5b9a\uff0c\u5c0f\u95ee\u9898\uff0c\u8c8c\u4f3c\u662f\u8fd9\u4e9bSVG\u5236\u4f5c\u7684\u65f6\u5019\uff0c\u672c\u8eab\u6709\u4e9b\u95ee\u9898\uff08\u4e3a\u4e86font-face\u505a\u7684\u8c03\u6574\uff1f\uff09\uff0c\u6211\u4eec\u5728illustrator\u4e2d\u6253\u5f00\u8fd9\u4e9bSVG, \u4e00\u4e0b\u5b50\u5c31\u53ef\u4ee5\u770b\u51fa\u75c7\u7ed3\u6240\u5728\uff0c\u4f8b\u5982\uff0c\u7ec6\u7ec6\u7684\u94c5\u7b14\u56fe\u6807\uff1a
      \n\"\u94c5\u7b14\u7684\u4e24\u4e2a\u89d2\u5728\u821e\u53f0\u4e4b\u5916\u4e86\"<\/p>\n
      \u94c5\u7b14\u7684\u4e24\u4e2a\u89d2\u5728\u767d\u8272\u7684\u821e\u53f0\u4e4b\u5916\u4e86\uff0c\u6b63\u597d\u8ddf\u4e0a\u9762\u622a\u56fe\u5c11\u6389\u7684\u4e24\u4e2a\u89d2\u4e00\u81f4\u3002\u8981\u4fee\u590d\uff0c\u8d85easy, \u7b49\u6bd4\u4f8b\u7f29\u653e\u5230\u767d\u8272\u821e\u53f0\u5185\u5c31OK\u4e86\uff0cctrl+S\u4fdd\u5b58\uff0c\u7136\u540e\u91cd\u65b0\u6267\u884c\u4e0bgrunt<\/code>\u547d\u4ee4\u5c31\u597d\u4e86\u3002<\/p>\n
      \u7136\u540e\uff0c\u6d4f\u89c8\u5668\u5237\u65b0\u4e0b\u521a\u521a\u7684demo\u9875\u9762\uff0c\u5f53\u5f53\u5f53\u5f53\uff0c\u6492\u82b1\u6492\u82b1~~<\/p>\n
      \"\u6ea2\u51fa\u8c03\u6574\u540e\u7684SVG\u6548\u679c\"<\/p>\n
      \u4ee5\u4e0a~<\/p>\n
      \u516d\u3001\u5173\u4e8e\u5408\u5e76\uff1a\u504f\u8bbe\u8ba1\u7684\u524d\u7aef\u770b\u8fd9\u91cc<\/h3>\n
      2018-08-19\u5f3a\u52bf\u63d2\u5165<\/strong><\/p>\n
      \u82b1\u4e86\u51e0\u5929\u65f6\u95f4\u505a\u4e86\u4e2aSVG\u5728\u7ebf\u538b\u7f29\u5408\u5e76\u5de5\u5177\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aSVG\u5728\u7ebf\u538b\u7f29\u5408\u5e76\u5de5\u5177<\/a><\/p>\n
      illustrator\u6216\u8005sketch\u5bfc\u51faSVG\uff0c\u6279\u91cf\u4e0a\u4f20\uff0c\u7136\u540e\u4e0b\u8f7d\u6216\u590d\u5236\u5373\u53ef\uff01<\/p>\n
      \u672c\u6bb5\u4e0b\u9762\u5185\u5bb9\u5df2\u7ecf\u5b8c\u5168\u8fc7\u65f6\uff0c\u5927\u5bb6\u53ef\u4ee5\u76f4\u63a5\u5ffd\u7565\uff0c\u4f7f\u7528\u4e0a\u9762\u5de5\u5177\u5373\u53ef\uff01\n<\/p><\/div>\n
      \u6ce8\u610f\uff1a\u8fd9\u91cc\u7684\u65b9\u6cd5\uff0c\u5c31\u7b97\u662fCSS\u5b8c\u5168\u4e0d\u61c2\u7684\u8bbe\u8ba1\u5e08\u4e5f\u53ef\u4ee5\u8f7b\u677e\u4e0a\u624b\uff01<\/strong><\/p>\n
      \u5bf9\u4e8e\u4e00\u4e9b\u59b9\u5b50\uff0c\u53ea\u4f1a\u5199\u4e9b\u9875\u9762\uff0c\u5bf9\u4e8e\u5f00\u53d1\u3001\u7f16\u7a0b\u7684\u611f\u89c9\u6bd4\u51cf\u80a5\u8fd8\u96be\uff0c\u663e\u7136\uff0c\u4e0a\u9762\u7684\u504f\u5f00\u53d1\u9700\u7f16\u8bd1\u7684\u5de5\u5177\u63d2\u4ef6\u5bf9\u5979\u4eec\u5c31\u5f88\u5403\u529b\u3002\u4e0d\u6025\u4e0d\u6025\uff0c\u8fd9\u91cc\u6709\u9762\u5411\u8bbe\u8ba1\u5e08\u7684\u65b9\u6cd5\u3002<\/p>\n
      \u4f60\u9700\u8981\u4e00\u4e2a\u7280\u5229\u7684\u8f6f\u4ef6\uff0c\u77e2\u91cf\u4e4b\u738b\uff0cillustrator!<\/p>\n
      \u4e00\u6b65\u4e00\u6b65\u8ddf\u6211\u6765\uff1a<\/p>\n
        \n
      1. \u6253\u5f00\u8f6f\u4ef6\uff0c\u65b0\u5efa\u4e00\u4e2a\u6587\u4ef6\uff0c\u7136\u540e\u53e6\u5b58\u4e3aSVG\u683c\u5f0f\uff1b<\/li>\n
      2. \u4ece\u6807\u5c3a\u4e2d\u62c9\u51fa\u4e00\u4e9b\u53c2\u8003\u7ebf\uff0c\u641e\u4e9b\u6b63\u65b9\u5f62\u683c\u5b50\uff0c\u6211\u81ea\u5df1\u7528\u7684\u5c3a\u5bf8\u662f160*160<\/code>, \u77e2\u91cf\u65e0\u5c3a\u5bf8\uff0c\u4f60\u968f\u610f\uff1b<\/li>\n
      3. \u628a\u4e0b\u8f7d\u7684SVG\u56fe\u5f62\u62d6\u5230\u8fd9\u4e9b\u683c\u5b50\u4e2d\uff0c\u7f29\u653e\u5230\u5408\u9002\u5927\u5c0f\u3002\u6211\u662f\u94fa\u6ee1\u7684\uff0c\u8fd9\u6837\u7531\u4e8e\u5bf9\u6bd4\u660e\u663e\uff0c\u5404\u4e2a\u56fe\u6807\u5c3a\u5bf8\u5c31\u90fd\u662f\u4e00\u81f4\u7684\uff0cCSS\u63a7\u5236\u65b9\u4fbf\uff1b
        \n\"illustrator\u53c2\u8003\u7ebf\u4e0e\u56fe\u5f62\u7f29\u653e\"\n<\/li>\n
      4. \u8fd9\u4e00\u6b65\u5f88\u5173\u952e\u3002\u6253\u5f00Symbols\u9762\u677f\uff0c\u5728Window\u83dc\u5355\u680f\u4e2d\uff0c\u6216Shift+Ctrl+F11\u542f\u7528\u3002\u7136\u540e\uff0c\u62d6\u52a8\u683c\u5b50\u4e2d\u7684SVG\u56fe\u5f62\u5230\u8fd9\u4e2a\u9762\u677f\u4e2d\uff0c\u5c31\u4f1a\u89e6\u53d1\u65b0\u5efa\u201c\u5143\u4ef6\u201d\u7684\u884c\u4e3a\uff0c\u4f1a\u6253\u5f00\u7c7b\u4f3c\u4e0b\u9762\u7684\u9762\u677f\uff1a
        \n\"illustrator\u4e2d\u65b0\u5efa\u5143\u4ef6\u7684\u9762\u677f\"<\/p>\n
        \u5176\u4e2d\uff0cname<\/code>\u5c31\u662fSVG\u4e2d\u5bf9\u5e94\u7684symbol<\/code>\u5143\u7d20\u7684id<\/code>\uff0c\u56e0\u6b64\uff0c\u6700\u597d\u4f7f\u7528\u82f1\u6587\uff0c\u6700\u597d\u6613\u8bc6\u522b\u3002\u4e0b\u9762\u7684type<\/code>\u4f60\u968f\u610f\uff0c\u8fd9\u4e2a\u53ea\u8981\u5728SVG\u5bfc\u5165\u5230Flash\u4e2d\u4f7f\u7528\u65f6\u5019\u624d\u6709\u7528\u7684\uff0c\u8fd9\u91cc\uff0c\u6211\u4eec\u4e0d\u548cFlash\u6253\u4ea4\u9053\u3002\u7136\u540e\uff0cOK, \u8fd9\u4e2a\u56fe\u6807\u5c31\u201c\u5143\u4ef6\u201d\u5316\u4e86\uff0c\u6309\u7167\u540c\u6837\u7684\u6b65\u9aa4\uff0c\u8ba93\u4e2a\u56fe\u6807\u90fd\u53d8\u6210\u5143\u4ef6\uff08\u4ee5\u540e\u53ef\u91cd\u590d\u4f7f\u7528\uff09\uff0cSymbols\u9762\u677f\u4f1a\u7c7b\u4f3c\u4e0b\u9762\u8fd9\u6837\uff1a
        \n\"Symbols\u9762\u677f\u622a\u56fe\"<\/li>\n
      5. Ctrl+S\u4fdd\u5b58\uff0c\u5408\u5e76\u597d\u7684SVG\u5373\u51fa\u7089\u3002\u6211\u4eec\u76f4\u63a5\u5728\u6d4f\u89c8\u5668\u4e2d\u6253\u5f00\u6b64SVG\uff0c\u6548\u679c\u4e0d\u9519\u54e6~
        \n\"SVG\n<\/li>\n<\/ol>\n
        \u662f\u4e0d\u662f\u5c31\u8fd9\u4e48\u7ed3\u675f\u4e86\uff0c\u592a\u5929\u771f\u4e86\u3002\u4eba\u751f\u4e0d\u5982\u610f\u4e8b\u5341\u4e4b\u516b\u4e5d\u3002\u6211\u4eec\u7785\u4e00\u7785SVG\u7684\u6e90\u4ee3\u7801\uff0c\u4f1a\u53d1\u73b0\uff0cuse<\/code>\u5143\u7d20\u5c45\u7136\u8ddf\u5c0f\u9f99\u5973\u4e00\u6837\uff0c\u4e0d\u5e72\u51c0\u7eaf\u6d01\u5566\u2014\u2014\u4e0a\u9762\u4e00\u5927\u63a8\u4e71\u4e03\u516b\u7cdf\u7684\u5c5e\u6027\uff01
        \n\"use\u5143\u7d20\u4e0a\u5927\u628a\u4e71\u4e03\u516b\u7cdf\u5c5e\u6027\"<\/p>\n
        \u96be\u9053\u6211\u4eec\u8981\u5728\u7f51\u9875\u4e2d\u4f7f\u7528\u5982\u6b64\u81c3\u80bf\u7684use<\/code>\u5143\u7d20\u5417\uff1f<\/p>\n
        \u6211\u4ee5\u5c0f\u65b0\u7684\u660e\u4e49\u544a\u8bc9\u4f60\uff0c\u7edd\u5bf9\u4e0d\u4f1a\uff01<\/p>\n
        \"\u5c0f\u65b0\u7684\u540d\u4e49\"<\/p>\n
        \u56e0\u4e3a\u6211\u6628\u665a\u5728\u5bb6\u6298\u817e\u51fa\u4e86\u4e2a\u5de5\u5177\uff0c\u53ef\u4ee5\u5c06illustrator\u751f\u6210SVG\u8f6c\u6362\u6210web\u53ef\u7528SVG Sprite. <\/p>\n
        \u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aillustrator\u751f\u6210SVG\u8f6c\u6362\u6210web\u53ef\u7528SVG Sprite\u5de5\u5177demo<\/a><\/p>\n
        \u4e0a\u5de5\u5177\u5b8c\u6574\u5730\u5740\u662f\uff1ahttp:\/\/www.zhangxinxu.com\/sp\/svg.html  \u5f88\u597d\u8bb0\u5fc6\uff0c\u6211\u7ad9\u70b9\u57df\u540d+sp+svg.html<\/code>, sp<\/code>\u662fspecial<\/code>\u7684\u7f29\u5199\uff0c\u4e13\u95e8\u653e\u5de5\u5177\u7528\u7684\u3002<\/p>\n
        \u4f7f\u7528\u5f88\u7b80\u5355\uff1a<\/p>\n
          \n
        1. \u628aillustrator\u751f\u6210SVG\u6240\u6709\u4ee3\u7801\u62f7\u8d1d\u5230\u7b2c\u4e00\u4e2a\u6846\u6846\u91cc\uff1b<\/li>\n
        2. \u70b9\u51fb\u201c\u8f6c\u6362\u840c\u840c\u54d2\u201d\u6309\u94ae\uff0c\u9002\u7528\u4e8eSVG Sprite\u6280\u672f\u7684\u65b0\u4ee3\u7801\u5c31\u51fa\u6765\u4e86\uff08\u5de6\u4e0b\u7684\u6846\u6846\uff09\uff1b\u540c\u65f6\uff0c\u53f3\u4fa7\u663e\u793a\u4e86\u5982\u4f55\u4f7f\u7528\u8be5SVG Sprite\u5728web\u4e2d\u771f\u5b9e\u5b9e\u8df5\uff1b<\/li>\n
        3. \u5de6\u4e0b\u89d2\u8fd8\u6709\u4e2a\u7ea2\u8272\u7684\u201c\u5bfc\u51fa\u8be5SVG\u201d\uff0c\u5c31\u662f\u5b57\u9762\u610f\u601d\uff0c\u53ef\u4ee5\u81ea\u5b9a\u4e49\u540d\u79f0\uff0c\u4e5f\u53ef\u4f7f\u7528\u968f\u673a\u540d\u79f0\uff0c\u4e3a\u7a7a\u5373\u53ef\uff1b<\/li>\n<\/ol>\n
          \u4e00\u5f00\u59cb\u7684SVG Sprite\u4f7f\u7528\u793a\u610fdemo<\/a>\u5c31\u662f\u4f7f\u7528\u8fd9\u4e2a\u5de5\u5177\u751f\u6210\u7684\u54e6~ \u89c1\u4e0b\u7f29\u7565\u56fe\uff1a
          \n\"illustrator\u751f\u6210SVG\u8f6c\u6362\u5de5\u5177\u4f7f\u7528\u622a\u56fe\"<\/p>\n
          \u6ce8\u610f\uff1a<\/strong>\u6b64\u5de5\u5177\u503c\u9002\u7528\u4e8eillustrator\u751f\u6210\u7684SVG, \u6c34\u5e73\u6709\u9650\uff0c\u5176\u4ed6SVG\u8f6c\u6362\u5341\u6709\u516b\u4e5d\u4f1a\u8ddb\u6389\u3002\u6ca1\u600e\u4e48\u6d4b\u8bd5\uff0c\u5982\u679c\u53d1\u73b0\u6b64\u5de5\u5177\u8f6c\u6362\u51fa\u4e86\u95ee\u9898\uff0c\u6b22\u8fce\u63d0\u9192\uff0c\u5b9a\u4f1a\u53ca\u65f6\u4fee\u590d\u3002\u53e6\u5916\uff0c\u751f\u6210\u7684SVG\u6587\u4ef6\u4f1a\u4e0d\u5b9a\u671f\u6e05\u7406\uff0c\u8bf7\u52ff\u5916\u94fe\u3002<\/p>\n
          \u6211\u60f3\u60f3\uff0c\u8fd8\u6709\u6ca1\u6709\u4ec0\u4e48\u95ee\u9898\u2026\u2026\u54e6\uff0c\u4e3a\u4ec0\u4e48\u8bf4\u6b64\u65b9\u6cd5\u4e0eCSS Sprite\u8fd8\u8981\u7b80\u5355\u3002<\/p>\n
          \u56e0\u4e3a\uff0cCSS Sprite\u8fd8\u9700\u8981\u5728CSS\u4e2d\u4f7f\u7528background-position<\/code>\u4e00\u4e2a\u4e00\u4e2a\u5730\u5b9a\u4f4d\uff0c\u54e6\uff0c\u5929\u54ea~ \u5982\u679c\u6ca1\u6709\u5de5\u5177\u7684\u8bdd\uff0c\u5c31\u7eaf\u7cb9\u642c\u7816\u7684\u82e6\u529b\u6d3b\u554a~<\/p>\n
          \u4f46\u662f\uff0c\u8fd9\u91cc\u7684SVG Sprite\u7684\u5b9a\u4f4d\uff0c\u4f60\u53ea\u8981\u5728illustrator\u4e2d\u628a\u4f4d\u7f6e\u653e\u597d\uff0cillustrator\u8fd9\u4e2a\u8f6f\u4ef6\u5c31\u81ea\u52a8\u5e2e\u4f60\u5b9a\u4f4d\u597d\u4e86\u3002\u4f60\u53ea\u8981\u5728\u6211\u7684\u5de5\u5177\u4e2d\u8f6c\u6362\u4e0b\uff0c\u751f\u6210\u4e0b\uff0c\u7136\u540e\u5728\u9700\u8981\u4f7f\u7528\u7684\u5730\u65b9\u4f7f\u7528\uff1a<\/p>\n
          \n
          <svg><use xlink:href=\"#target\" \/><\/svg><\/pre>\n<\/div>\n
          \u5c31\u597d\u4e86\uff0c\u7528\u5230CSS\u4e86\u5417\uff1f\u51e0\u4e4e\u6ca1\u6709\uff0c\u9664\u4e86\u5bf9SVG\u505a\u5c3a\u5bf8\u9650\u5236\u4ee5\u53ca\u6539\u53d8\u56fe\u6807\u7684\u989c\u8272\u3002OK\uff0c\u8fd9\u70b9\u7a0b\u5ea6\u7684\u4e1c\u897f\uff0c\u5c0f\u767d\u8bbe\u8ba1\u5e08\u4e5f\u53ef\u4ee5\u8f7b\u677e\u4e0a\u624b\u3002<\/p>\n
          \u4ece\u8fd9\u4e00\u70b9\u6765\u770b\uff0cSVG\u53c8\u4e00\u6b21\u6210\u4e3a\u4e86\u660e\u65e5\u4e4b\u661f\uff01\u8bbe\u8ba1\u5e08\u53ea\u8981\u5728illustrator\u4e2d\u505a\u597d\u56fe\u5c31\u53ef\u4ee5\u4e86\uff0c\u5b8c\u5168\u6ca1\u6709\u4ece\u524d\u90a3\u79cd\u5e2e\u91cd\u6784\u5207\u56fe\u7684\u82e6\u903c\u7ecf\u5386\u4e86\uff0c\u662f\u4e0d\u662f\u8981\u5564\u9152\u70b8\u9e21\u5e86\u795d\u4e0b\uff01 <\/p>\n
          \u8865\u5145\u4e8e2014\u5e747\u670814\u65e5<\/strong>
          \nIcoMoon\u76ee\u524d\u53ef\u4ee5\u76f4\u63a5\u8f6c\u6362\u6210SVG Sprite.<\/p>\n
            \n
          1. \u8fdb\u5165 http:\/\/icomoon.io\/app\/<\/a><\/li>\n
          2. \u70b9\u51fb”import icons”\u6309\u94ae\uff1a
            \n\"\u6dfb\u52a0\u56fe\u6807\u6309\u94ae\"<\/li>\n
          3. \u9009\u62e9\u9700\u8981\u7684\u56fe\u6807\uff1a
            \n\"\u9009\u62e9\u9700\u8981\u7684\u56fe\u6807\"<\/li>\n
          4. \u70b9\u51fb\u9875\u9762\u4e0b\u9762\u56fa\u5b9a\u7684SVG\u6309\u94ae\uff1a
            \n\"SVG\u6309\u94ae\"<\/li>\n
          5. \u70b9\u51fb\u6253\u5f00\u7684\u5f39\u6846\u7684download\u6309\u94ae\u5373\u53ef\uff1a
            \n\"\u4e0b\u8f7dSVG<\/li>\n
          6. \u4e0b\u8f7d\u7684\u6e90\u6587\u4ef6\u4e2d\uff0c\u6709\u4e24\u4e2a\u6587\u4ef6\u5939\uff0c\u5176\u4e2dsprites\u6587\u4ef6\u5939\u4e2d\uff0c\u6709\u5408\u5e76\u597d\u7684SVG, png\u56fe\u6807\u4ee5\u53ca\u5bf9\u5e94\u7684demo, \u8fd9\u4e2a\u7edd\u4e0d\u4f1a\u8ff7\u8def\u7684\uff0c\u5c31\u4e0d\u622a\u56fe\u5c55\u793a\u4e86\u3002<\/li>\n<\/ol>\n
            \u561b\uff0c\u5c31\u6b64\u770b\u6765\uff0c\u8fd9\u91cc\u624d\u662f\u8001\u5c11\u7686\u5b9c\uff0cSVG Sprites\u6574\u5408\u6700\u5bb9\u6613\u7684\u5730\u65b9\u3002\u4e0d\u8fc7\uff1a<\/p>\n
              \n
            1. \u5143\u7d20\u8fd8\u662f\u4f7f\u7528\u7684g<\/code>\u6574\u5408\uff0csvgstore\u4ee5\u524d\u4e5f\u662f\uff0c\u540e\u6765\u6539\u6210\u4e86symbol<\/code>, \u8fd9\u91cc\u4e5f\u53ef\u80fd\u5728\u4e00\u6bb5\u65f6\u65e5\u540e\u4e5f\u4f1a\u4fee\u6539\uff0c\u4f46\u5e76\u4e0d\u786e\u5b9a\uff1b<\/li>\n
            2. \u540d\u4e3asprites.html<\/code>\u7684demo\u9875\u9762\u7684SVG\u8fd8\u4f7f\u7528\u4e86viewbox<\/code>\u505a\u9650\u5236\uff0c\u6211\u6d4b\u8bd5\u4e86\uff0c\u5220\u6389\u4f3c\u4e4e\u4e5f\u6ca1\u95ee\u9898\uff1b<\/li>\n<\/ol>\n
              \u8865\u5145\u4e8e2014\u5e7412\u670821\u65e5<\/strong>
              \n\u6ce8\u610f\u6ce8\u610f\uff1a<\/strong>SVG Sprite\u6280\u672f\u662f\u652f\u6301\u5916\u94feSVG\u6587\u4ef6<\/strong>\u7684\uff0c\u4f8b\u5982\uff1a<\/p>\n
              \n
              <svg viewBox=\"0 0 100 100\"> <use xlink:href=\"defs.svg#icon-1\"><\/use> <\/svg><\/pre>\n<\/div>\n
              \u6240\u4ee5\uff0c\u5f88\u591a\u4e0d\u559c\u6b22\u5185\u8054SVG\u7684\u5c0f\u4f19\u4f34\u5927\u53ef\u653e\u5fc3\u4f7f\u7528\u8be5\u6280\u672f\u3002\u4f46\u662f\uff0c\u7f8e\u4e2d\u4e0d\u8db3\u7684\u662f\uff0c\u76ee\u524d\uff0c\u6240\u6709\u7684IE\u6d4f\u89c8\u5668(\u5305\u62ecIE11)\u8fd8\u4e0d\u652f\u6301\u83b7\u5f97\u5916\u94feSVG\u6587\u4ef6\u67d0\u4e2a\u5143\u4ef6\u3002Chrome\/FireFox\/Safari\/Opera\u7b49\u6d4f\u89c8\u5668\u90fd\u662fOK\u7684\u3002<\/p>\n
              \u8865\u5145\u4e8e2015\u5e743\u670818\u65e5<\/strong>
              \nSVG Sprite\u6280\u672f\u662f\u652f\u6301\u76f4\u63a5Ajax\u8bf7\u6c42SVG\u6587\u4ef6\u5b57\u7b26\u4e32\u7684\u3002\u56e0\u6b64\uff0c\u5bf9\u4e8e\u4e0d\u652f\u6301\u5916\u94fe\u7684IE9+\u6d4f\u89c8\u5668\uff0c\u53ef\u4ee5\u76f4\u63a5\uff1a<\/p>\n
              \n
              var ajax = new XMLHttpRequest();\r\najax.open(\"GET\", \"..\/201407\/mytest.svg\", true);\r\najax.onload = function(e) {\r\n    document.body.insertAdjacentHTML(\"afterBegin\", '<div style=\"display:none;\">' + ajax.responseText + '<\/div>');\r\n}\r\najax.send();<\/pre>\n<\/div>\n
              \u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aAjax\u8bf7\u6c42SVG\u6587\u4ef6\u5b9e\u73b0Sprites\u6548\u679cDemo<\/a><\/p>\n
              \u4f8b\u5982\uff0cIE9\u6d4f\u89c8\u5668\u4e0b\uff1a
              \n\"IE9\u6d4f\u89c8\u5668\u4e0bSVG<\/p>\n
              \u56e0\u6b64\uff0c\u5927\u5bb6\u5927\u53ef\u4e0d\u5fc5\u62c5\u5fc3SVG\u8d44\u6e90\u7ba1\u7406\u4e4b\u7c7b\u7684\u95ee\u9898\u3002IE9\u7b49\u6d4f\u89c8\u5668\uff0c\u4e00\u6b21Ajax\u6210\u529f\u540e\uff0c\u53ef\u4ee5\u76f4\u63a5\u672c\u5730\u5b58\u50a8\uff0c\u60f3\u60f3\u5c31\u5f88\u68d2\uff01<\/p>\n
              \u8865\u5145\u4e8e2016\u5e7410\u670827\u65e5<\/strong>
              \n\u90e8\u5206\u534e\u4e3aAndroid\u624b\u673a\uff0c\u8fd9\u79cd\u540e\u7f6e\u7684ajax\u8bf7\u6c42SVG\u5199\u5165\u65b9\u5f0f\u65e0\u6cd5\u5448\u73b0\u5c0f\u56fe\u6807\uff0c\u5982\u679c\u5728\u9875\u9762\u5934\u90e8\u4e00\u5f00\u59cb\u5c31\u6709SVG\u6587\u4ef6\u4ee3\u7801\u8d44\u6e90\uff0c\u5219\u6ca1\u6709\u6b64\u95ee\u9898\uff0c\u56fe\u6807\u4e0d\u4f1a\u663e\u793a\u4e0d\u51fa\u6765\u3002<\/p>\n
              \u8981\u4fee\u590d\u6b64\u65b9\u6cd5\uff0c\u53ef\u4ee5\u628aSVG\u8d44\u6e90\u4f5c\u4e3a\u4e00\u4e2aJS\u8d44\u6e90\u8f7d\u5165\uff0c\u4f8b\u5982\uff0c\u547d\u540d\u4e00\u4e2a\u540d\u53ebsprite.js<\/code>\uff0c\u91cc\u9762\u4ee3\u7801\u5927\u81f4\u5982\u4e0b\uff1a<\/p>\n
              var SVG = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><symbol id=\"icon-arrow-l\" viewBox=\"0 0 8 16\"><path d=\"M.146 7.646a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7v.708l7-7a.5.5 0 0 0-.708-.708l-7 7z\"\/><\/symbol><symbol id=\"icon-arrow-r\" viewBox=\"0 0 7 12\"><path d=\"M6.146 6.354v-.708l-5.5 5.5a.5.5 0 0 0 .708.708l5.5-5.5a.5.5 0 0 0 0-.708l-5.5-5.5a.5.5 0 1 0-.708.708l5.5 5.5z\"\/><\/symbol><symbol ....<\/symbol><\/svg>';\r\ndocument.body.insertAdjacentHTML(\"afterBegin\", '