svg制作小图标

什么是svg

svg(scalable vector graphics)可缩略矢量图形。视网膜屏下分辨率解决方案之一。比如在iphone设备下devicePixelRatio大于1的情况下，防止图片模糊就可以使用svg的图片。svg是基于xml的标记语言。编辑起来类似于html构建页面一样。学习曲线平滑。实际应用于背景图片，小图标的场景较多。

如果获取svg

既然svg常作为图标使用，那么如何复用现有的轮子。还是在https://www.iconfont.cn上下载的时候选择“svg下载即可”。

如何使用svg

直接当作图片使用

和使用png，jpg图片相同的方式

<img src="paiqiu.svg">
<div style="background: url(paiqiu.svg); width: 100px;height: 100px;"></div>
复制代码

如果我们发现下载的svg图片过大或者过小怎么办？ 和修改图片没什么两样，直接编辑svg图片

<?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="1550061994320" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1292" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="100">
    <defs>
        <style type="text/css">
        </style>
    </defs>
    <path d="M836.077037 115.579259a513.327407 513.327407 0 0 0-94.814815-61.345185 512 512 0 0 1-632.414815 773.404445 512 512 0 1 0 727.22963-712.05926z"
    fill="#BDDDFA" p-id="1293"></path>
    <path d="M512 75.851852A436.148148 436.148148 0 1 1 75.851852 512 436.622222 436.622222 0 0 1 512 75.851852m0-75.851852a512 512 0 1 0 512 512A512 512 0 0 0 512 0z"
    fill="#0788FF" p-id="1294"></path>
    <path d