传统引用图片的方式，无非<img src="...">,
或者css｛background-image:url("");｝例如阿里云邮箱的某个图标：
但现在的项目，一般都包含大量的图标和图片，使用传统方式无疑会产生大量的http请求，是前段加载变得缓慢；
解决方法有：
1：处理图片以及内容，现在一般都是懒加载，内容出现在视窗，才开始加载，这个方式应用广泛，原理也不难，此处不赘述；
2：图标一般是要做成矢量的，若公司UI实力强劲，可以维护一个iconfont库（Iconfont-阿里巴巴矢量图标库），
将图标作为字体使用，但一旦库很大，加载速度也是个问题；
3：iconfont，将多个图片放在一张图里，通过background-position来调整位置，显示不同图标，原理是将多个图片http请求，减小为1个；
4：SVG矢量图形的应用，目前大多是在前端中使用<svg>...</svg>标签绘制
例如：用ai制作一个svg图形，用sbulime打开后
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1484279292035" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5077" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M832 832a42.666667 42.666667 0 0 1-42.666667 42.666667H234.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V426.666667h640v405.333333z" fill="#FF3D00" p-id="5078"></path><path d="M469.333333 469.333333h85.333334v405.333334h-85.333334zM672 341.333333H420.202667L469.333333 298.666667c9.706667-14.570667 81.749333-149.333333 181.333334-149.333334 96.256 0 117.333333 69.290667 117.333333 96 0 38.592-25.557333 96-96 96z m-125.077333-64H672c28.885333 0 32-22.378667 32-32-0.469333-9.130667-6.634667-32-53.333333-32-34.496 0-74.026667 32.384-103.744 64z" fill="#4CAF50" p-id="5079"></path><path d="M603.797333 341.333333H352c-70.442667 0-96-57.408-96-96 0-26.709333 21.077333-96 117.333333-96 99.584 0 171.626667 134.762667 181.333334 149.333334l49.130666 42.666666zM373.333333 213.333333c-51.84 0-53.333333 28.736-53.333333 32 0.384 14.4 6.229333 32 32 32h124.970667c-29.781333-31.637333-69.290667-64-103.637334-64z" fill="#4CAF50" p-id="5080"></path><path d="M512 298.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#2E7D32" p-id="5081"></path><path d="M874.666667 469.333333H149.333333v-85.333333a42.666667 42.666667 0 0 1 42.666667-42.666667h640a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333z" fill="#DD2C00" p-id="5082"></path><path d="M512 661.333333m-149.333333 0a149.333333 149.333333 0 1 0 298.666666 0 149.333333 149.333333 0 1 0-298.666666 0Z" fill="#DD2C00" p-id="5083"></path><path d="M469.333333 341.333333h85.333334v128h-85.333334z" fill="#388E3C" p-id="5084"></path></svg>复制<svg>...</svg>到html页面就会出现
可以给svg设置css样式，调整大小，颜色等，这样是没有http请求的；
还有强大的SVG.js来处理更为复杂度svg绘图与动画；
还有一种方式，实在css｛background-image: url("")｝中使用svg绘图，但这里直接在url中使用<svg...
标签是不支持的，需要经过base64编码，但结果很长，失去了可读性，所以我写了个简单的编码工具
地址：www.xiyoulive.com/encodeSVG
github：https://github.com/ tfzh/encodeSVG
用的舒服，还求个star
粘贴<svg>...</svg>进去，直接输出css，复制css，到你需要的css类即可，然后通过background-repeat:no-repeat;来禁止重复；background-position来调整位置；大小和颜色在输出的css中就可以看到，直接调整即可。