什么是SVG格式，优势及示例代码

什么是SVG

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

SVG从1999年由一组加入W3C的公司启动开发，与之前1998年提交给W3C的标准（PGML、VML）构成竞争。SVG从这两个格式吸取了经验。

SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML名字空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。
SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

SVG格式具有以下优点：

图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件）
与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象
SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索
SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。
SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。

SVG格式具有以下缺点：

如何和已经占有重要市场份额的矢量图形格式Adobe Animate竞争的问题。事实上，Adobe Animate在Flash CC 2014版及以后的版本就都支持直接导出SVG文件了。
SVG的本地运行环境下的厂家支持程度。
由于原始的SVG档是遵从XML语法，导致数据采用未压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。Adobe因此使用gzip压缩开发出压缩的SVG档格式，附档名为 .svgz， 但此种文件格式除了Adobe旗下的软件以外，未被广泛支持使用。
旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。

SVG与canvas的区别

SVG - 实际开发中，多用SVG

  不依赖分辨率
  支持事件处理器
  不适合游戏
  大型渲染区域的程序

Canvas

 依赖分辨率
 不支持事件绑定
 最适合网页游戏
 可以用图片格式保存图像

不管是SVG还是Canvas，在一个页面中都可以同时定义多个

示例效果图

示例源代码

                            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1499 1640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(4.16667,0,0,4.16667,-61.4292,-40.3391)">
        <path d="M123.717,371.772L216.981,371.788C225.655,371.789 232.688,378.82 232.686,387.494L123.714,387.478L123.717,371.772Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/>
        <path d="M123.714,387.478L232.686,387.494C232.683,396.171 225.648,403.203 216.974,403.201L123.711,403.185L123.714,387.478Z" style="fill:rgb(163,163,163);fill-rule:nonzero;"/>
        <path d="M123.711,403.185L30.447,403.169C21.773,403.168 14.74,396.136 14.743,387.459L123.714,387.478L123.711,403.185Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/>
        <path d="M123.714,387.478L14.743,387.459C14.745,378.785 21.78,371.753 30.454,371.755L123.717,371.772L123.714,387.478Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M54.475,333.942C54.479,295.694 85.491,264.696 123.734,264.701L123.723,333.952L54.475,333.942Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/>
        <path d="M123.734,264.701C161.98,264.708 192.977,295.716 192.973,333.963L123.723,333.952L123.734,264.701Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M289.438,239.75L295.104,242.165L349.724,113.97L314.939,79.991L310.632,84.398L342.405,115.432L289.438,239.75Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/>
        <path d="M303.612,86.449L299.954,82.875L269.243,114.315L272.901,117.89L303.612,86.449Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M223.966,160.67L302.977,237.843C308.693,243.425 308.798,252.584 303.217,258.297L213.86,171.017L223.966,160.67Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M213.86,171.017L303.217,258.297C297.635,264.013 288.478,264.122 282.762,258.54L203.753,181.364L213.86,171.017Z" style="fill:rgb(127,45,45);fill-rule:nonzero;"/>
        <path d="M318.723,63.659C325.601,70.378 325.731,81.399 319.014,88.281C312.295,95.159 301.271,95.287 294.393,88.568L318.723,63.659Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M180.156,284.552C158.846,306.37 123.882,306.782 102.065,285.471L140.653,245.965L180.156,284.552Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/>
        <path d="M278.892,104.439C289.8,115.096 290.005,132.577 279.351,143.486L259.597,124.192L278.892,104.439Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/>
        <path d="M202.759,261.415L163.252,222.829L203.753,181.364L282.762,258.54L202.759,261.415Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/>
        <path d="M269.665,153.402L249.912,134.108L223.966,160.67L268.647,204.311L269.665,153.402Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/>
        <path d="M151.952,234.395L191.458,272.983L202.759,261.415L163.252,222.829L151.952,234.395Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M140.653,245.965L180.156,284.552L191.458,272.983L151.952,234.395L140.653,245.965Z" style="fill:rgb(127,45,45);fill-rule:nonzero;"/>
        <path d="M259.597,124.192L279.351,143.486L269.665,153.402L249.912,134.108L259.597,124.192Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M143.37,97.074L140.822,91.466L267.699,33.851L302.484,67.83L298.179,72.233L266.405,41.2L143.37,97.074Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M296.296,79.301L299.954,82.875L269.243,114.315L265.585,110.741L296.296,79.301Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/>
        <path d="M223.966,160.67L144.957,83.495C139.241,77.913 130.084,78.022 124.503,83.735L213.86,171.017L223.966,160.67Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/>
        <path d="M213.86,171.017L124.503,83.735C118.922,89.451 119.028,98.607 124.742,104.192L203.753,181.364L213.86,171.017Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M318.723,63.659C311.845,56.94 300.821,57.068 294.102,63.947C287.384,70.825 287.515,81.85 294.393,88.568L318.723,63.659Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/>
        <path d="M101.149,207.38C79.836,229.197 80.246,264.163 102.065,285.471L140.653,245.965L101.149,207.38Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M278.892,104.439C267.983,93.785 250.501,93.99 239.845,104.898L259.597,124.192L278.892,104.439Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M123.746,184.241L163.252,222.829L203.753,181.364L124.742,104.192L123.746,184.241Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M230.159,114.814L249.912,134.108L223.966,160.67L179.289,117.031L230.159,114.814Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M151.952,234.395L112.447,195.811L123.746,184.241L163.252,222.829L151.952,234.395Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/>
        <path d="M140.653,245.965L101.149,207.38L112.447,195.811L151.952,234.395L140.653,245.965Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M259.597,124.192L239.845,104.898L230.159,114.814L249.912,134.108L259.597,124.192Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/>
        <path d="M123.717,371.772L192.965,371.781L192.973,333.963L123.723,333.952L123.717,371.772Z" style="fill:rgb(127,45,45);fill-rule:nonzero;"/>
        <path d="M54.467,371.761L123.717,371.772L123.723,333.952L54.475,333.942L54.467,371.761Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/>
        <path d="M173.315,360.432C173.316,363.664 175.936,366.285 179.167,366.284C182.4,366.284 185.019,363.667 185.023,360.433C185.022,357.201 182.402,354.581 179.17,354.581C175.938,354.582 173.318,357.201 173.315,360.432Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M152.49,360.429C152.491,363.661 155.11,366.281 158.343,366.281C161.573,366.283 164.194,363.663 164.194,360.431C164.196,357.2 161.577,354.577 158.345,354.577C155.11,354.577 152.49,357.197 152.49,360.429Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M131.665,360.425C131.666,363.657 134.283,366.276 137.513,366.279C140.748,366.279 143.369,363.659 143.369,360.427C143.368,357.195 140.748,354.575 137.517,354.572C134.285,354.573 131.665,357.193 131.665,360.425Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M104.069,360.419C104.068,363.654 106.688,366.275 109.92,366.274C113.152,366.274 115.773,363.654 115.772,360.422C115.775,357.191 113.152,354.569 109.92,354.57C106.689,354.567 104.067,357.19 104.069,360.419Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M83.243,360.418C83.24,363.649 85.86,366.27 89.095,366.27C92.326,366.273 94.948,363.65 94.947,360.418C94.947,357.186 92.327,354.566 89.095,354.566C85.863,354.567 83.242,357.186 83.243,360.418Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M62.415,360.414C62.415,363.646 65.035,366.266 68.267,366.266C71.498,366.268 74.119,363.648 74.121,360.417C74.121,357.185 71.502,354.562 68.27,354.562C65.038,354.563 62.417,357.183 62.415,360.414Z" style="fill:white;fill-rule:nonzero;"/>
        <path d="M299.62,70.847C299.62,75.123 303.087,78.59 307.363,78.591C311.638,78.592 315.105,75.124 315.106,70.849C315.107,66.573 311.64,63.106 307.364,63.105C303.088,63.104 299.622,66.569 299.62,70.847Z" style="fill:white;fill-rule:nonzero;"/>
        <clipPath id="_clip1">
            <path d="M347.738,85.874C348.337,86.086 349.004,86.186 349.736,86.15C352.36,86.021 355.229,83.459 354.757,80.614C350.987,57.967 335.667,40.158 315.05,32.865C309.785,31.003 304.172,29.826 298.322,29.431C295.443,29.239 293.172,32.343 293.301,34.968C293.419,37.343 294.895,38.896 296.857,39.59C297.479,39.81 298.147,39.943 298.837,39.989C303.266,40.289 307.567,41.2 311.645,42.643C328.287,48.529 341.223,63.247 344.197,81.128C344.561,83.302 345.782,85.182 347.738,85.874Z"/>
        </clipPath>
        <g clip-path="url(#_clip1)">
            <path d="M366.666,51.122L295.44,25.93L282.411,62.768L353.637,87.961L366.666,51.122Z" style="fill:rgb(50,52,77);fill-rule:nonzero;"/>
        </g>
        <path d="M367.369,83.706C367.971,83.918 368.637,84.021 369.363,83.983C372.02,83.856 374.816,81.301 374.384,78.447C371.599,60.043 362.987,42.744 349,30.259C341.018,23.136 331.921,17.798 322.111,14.328C314.619,11.678 306.708,10.116 298.57,9.687C295.688,9.533 293.419,12.565 293.549,15.224C293.662,17.574 295.139,19.163 297.104,19.858C297.725,20.078 298.395,20.209 299.085,20.245C305.674,20.593 312.06,21.9 318.094,24.034C341.725,32.393 359.959,53.413 363.827,78.962C364.157,81.141 365.41,83.013 367.369,83.706Z" style="fill:rgb(50,52,77);fill-rule:nonzero;"/>
    </g>
</svg>