SVG 是使用XML来描述二维图形和绘图程序的语言。

  • SVG指可伸缩的矢量图形(Scalable Vector Graphics)
  • SVG使用XML格式定义图形
  • SVG图形在放大或改变尺寸的情况下，图形质量不会有损失
  • SVG可以在任何分辨率下被高质量打印
  • SVG可以直接被当做记事本文档来打开，修改，由于其内部数据可以直接被搜索修改，很适合制作地图
  • SVG与JPEG和GIF图像比起来，尺寸更小，可压缩性更强
  • SVG可以与java技术一起运行
  • SVG可以直接内嵌于html
  • 可以直接网上搜索SVG与png等相互转化的工具。

先来看一个网上使用的例子：

样式：

源码（源码可以直接粘贴到html文件，用浏览器打开）：

<html>

 <head></head>

 <body>

  <div class="icon-twrap" p-id="477">

   <svg class="icon" style="width: 5.3037109375em; height: 5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewbox="0 0 1335 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="479">

    <path d="M965.012086 538.399898m21.403457-18.448908l255.565133-220.28674q21.403457-18.448909 39.852366 2.954548l4.739169 5.498136q18.448909 21.403457-2.954548 39.852366l-255.565133 220.28674q-21.403457 18.448909-39.852366-2.954549l-4.739169-5.498135q-18.448909-21.403457 2.954548-39.852366Z" fill="#FFFBB6" p-id="480"></path>

    <path d="M862.53148 348.215665m13.84352-11.932551l270.685007-233.319455q13.84352-11.932551 25.776071 1.91097l3.046609 3.534515q11.932551 13.84352-1.91097 25.776072l-270.685006 233.319455q-13.84352 11.932551-25.776072-1.910969l-3.046608-3.534516q-11.932551-13.84352 1.910969-25.776072Z" fill="#FFFBB6" p-id="481"></path>

    <path d="M1184.438829 70.26075m13.843521-11.932551l26.705231-23.018822q13.84352-11.932551 25.776071 1.910969l3.046609 3.534516q11.932551 13.84352-1.91097 25.776072l-26.705231 23.018821q-13.84352 11.932551-25.776071-1.910969l-3.046609-3.534516q-11.932551-13.84352 1.91097-25.776071Z" fill="#FFFBB6" p-id="482"></path>

    <path d="M979.662637 348.125094m34.166986-29.450551l230.038074-198.283454q34.166987-29.450551 63.617539 4.716435l7.616521 8.83629q29.450551 34.166987-4.716435 63.617538l-230.038074 198.283454q-34.166987 29.450551-63.617538-4.716435l-7.616522-8.83629q-29.450551-34.166987 4.716435-63.617538Z" fill="#FFFBB6" p-id="483"></path>

    <path d="M337.236502 271.94157m-21.403457 18.448909l-255.565134 220.28674q-21.403457 18.448909-39.852365-2.954549l-4.73917-5.498136q-18.448909-21.403457 2.954549-39.852365l255.565133-220.28674q21.403457-18.448909 39.852366 2.954548l4.739169 5.498136q18.448909 21.403457-2.954548 39.852366Z" fill="#FFFBB6" p-id="484"></path>

    <path d="M439.730559 462.082283m-13.843521 11.932551l-270.685006 233.319455q-13.84352 11.932551-25.776072-1.910969l-3.046609-3.534516q-11.932551-13.84352 1.91097-25.776071l270.685006-233.319456q13.84352-11.932551 25.776072 1.91097l3.046609 3.534516q11.932551 13.84352-1.91097 25.776071Z" fill="#FFFBB6" p-id="485"></path>

    <path d="M117.788515 740.121197m-13.84352 11.932551l-26.705231 23.018822q-13.84352 11.932551-25.776072-1.910969l-3.046608-3.534516q-11.932551-13.84352 1.910969-25.776072l26.705231-23.018822q13.84352-11.932551 25.776072 1.91097l3.046608 3.534516q11.932551 13.84352-1.910969 25.776071Z" fill="#FFFBB6" p-id="486"></path>

    <path d="M322.584388 462.082599m-34.166987 29.450552l-206.376453 177.888101q-34.166987 29.450551-63.617539-4.716435l-7.616522-8.83629q-29.450551-34.166987 4.716436-63.617538l206.376454-177.888101q34.166987-29.450551 63.617538 4.716435l7.616522 8.836289q29.450551 34.166987-4.716436 63.617539Z" fill="#FFFBB6" p-id="487"></path>

    <path d="M685.95038 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFFBB6" p-id="488"></path>

    <path d="M914.341266 920.303797H579.272911a9.721519 9.721519 0 1 1 0-19.443038h335.068355a9.721519 9.721519 0 0 1 0 19.443038zM1087.513924 920.303797H953.486582a9.721519 9.721519 0 0 1 0-19.443038H1087.513924a9.721519 9.721519 0 1 1 0 19.443038zM1165.674937 920.303797h-55.736709a9.721519 9.721519 0 1 1 0-19.443038h55.866329a9.721519 9.721519 0 0 1 0 19.443038zM886.472911 968.911392H551.274937a9.721519 9.721519 0 0 1 0-19.443038h335.197974a9.721519 9.721519 0 0 1 0 19.443038zM512.259241 968.911392H378.231899a9.721519 9.721519 0 0 1 0-19.443038h134.027342a9.721519 9.721519 0 0 1 0 19.443038zM355.807595 968.911392h-55.866329a9.721519 9.721519 0 0 1 0-19.443038h55.866329a9.721519 9.721519 0 0 1 0 19.443038z" fill="#351800" p-id="489"></path>

    <path d="M53.922025 351.530127m-16.202531 0a16.202532 16.202532 0 1 0 32.405063 0 16.202532 16.202532 0 1 0-32.405063 0Z" fill="#EFE6B9" p-id="490"></path>

    <path d="M1249.28 551.404557m-16.202532 0a16.202532 16.202532 0 1 0 32.405064 0 16.202532 16.202532 0 1 0-32.405064 0Z" fill="#FEE88D" p-id="491"></path>

    <path d="M1170.470886 32.145823m-16.202532 0a16.202532 16.202532 0 1 0 32.405064 0 16.202532 16.202532 0 1 0-32.405064 0Z" fill="#FEE88D" p-id="492"></path>

    <path d="M59.495696 238.760506m-32.405063 0a32.405063 32.405063 0 1 0 64.810126 0 32.405063 32.405063 0 1 0-64.810126 0Z" fill="#FFF9D7" p-id="493"></path>

    <path d="M162.154937 229.427848m-19.961519 0a19.961519 19.961519 0 1 0 39.923038 0 19.961519 19.961519 0 1 0-39.923038 0Z" fill="#FEE88D" p-id="494"></path>

    <path d="M1302.683544 433.968608m-32.405063 0a32.405063 32.405063 0 1 0 64.810127 0 32.405063 32.405063 0 1 0-64.810127 0Z" fill="#FFC969" p-id="495"></path>

    <path d="M202.337215 88.660253m4.018228 0l2.073924 0q4.018228 0 4.018228 4.018228l0 73.105823q0 4.018228-4.018228 4.018228l-2.073924 0q-4.018228 0-4.018228-4.018228l0-73.105823q0-4.018228 4.018228-4.018228Z" fill="#EFCB7B" p-id="496"></path>

    <path d="M175.176849 104.205683m2.841316-2.841317l1.466486-1.466485q2.841316-2.841316 5.682632 0l51.693623 51.693623q2.841316 2.841316 0 5.682632l-1.466486 1.466486q-2.841316 2.841316-5.682632 0l-51.693623-51.693623q-2.841316-2.841316 0-5.682633Z" fill="#EFCB7B" p-id="497"></path>

    <path d="M178.563377 158.251623m-2.466678-3.172012l-1.273124-1.637167q-2.466677-3.172012 0.705335-5.638689l57.710147-44.877614q3.172012-2.466677 5.638689 0.705334l1.273124 1.637168q2.466677 3.172012-0.705335 5.638689l-57.710147 44.877614q-3.172012 2.466677-5.638689-0.705335Z" fill="#EFCB7B" p-id="498"></path>

    <path d="M248.093165 124.176203m0 4.018227l0 2.073924q0 4.018228-4.018228 4.018228l-73.105823 0q-4.018228 0-4.018228-4.018228l0-2.073924q0-4.018228 4.018228-4.018227l73.105823 0q4.018228 0 4.018228 4.018227Z" fill="#EFCB7B" p-id="499"></path>

    <path d="M1051.997975 38.886076m4.018228 0l2.073924 0q4.018228 0 4.018227 4.018228l0 77.383291q0 4.018228-4.018227 4.018228l-2.073924 0q-4.018228 0-4.018228-4.018228l0-77.383291q0-4.018228 4.018228-4.018228Z" fill="#FEE88D" p-id="500"></path>

    <path d="M1086.476962 111.084557l-1.425823 1.555443a3.888608 3.888608 0 0 1-5.703291 0l-51.848101-54.310886a4.407089 4.407089 0 0 1 0-6.092152l1.425823-1.555443a3.888608 3.888608 0 0 1 5.703291 0l51.848101 54.310886a4.407089 4.407089 0 0 1 0 6.092152z" fill="#FEE88D" p-id="501"></path>

    <path d="M1088.810127 54.570127l1.296202 1.685063a4.407089 4.407089 0 0 1-1.296202 5.962532l-57.421773 47.181772a3.888608 3.888608 0 0 1-5.703291-0.777722L1024 106.936709a4.407089 4.407089 0 0 1 0.648101-5.962532l57.681013-47.181772a3.888608 3.888608 0 0 1 6.481013 0.777722z" fill="#FEE88D" p-id="502"></path>

    <path d="M1097.494684 76.216709m0 4.018228l0 2.592405q0 4.018228-4.018228 4.018228l-73.105823 0q-4.018228 0-4.018228-4.018228l0-2.592405q0-4.018228 4.018228-4.018228l73.105823 0q4.018228 0 4.018228 4.018228Z" fill="#FEE88D" p-id="503"></path>

    <path d="M866.252152 422.691646s-29.553418 433.190886 116.658228 362.288607c169.543291-82.04962-104.862785-517.832911-116.658228-362.288607z" fill="#FFFFFF" p-id="504"></path>

    <path d="M948.042532 804.423291a56.12557 56.12557 0 0 1-32.016203-9.980759c-84.512405-57.032911-64.810127-357.751899-64.810126-370.584304 2.462785-32.793924 16.332152-40.96 27.479493-42.126582 45.755949-4.407089 122.75038 117.56557 150.877975 217.113924s11.017722 168.506329-47.441013 196.763544a79.716456 79.716456 0 0 1-34.090126 8.814177z m-76.86481-379.13924c-5.703291 83.993924-6.869873 311.088608 55.607088 353.085569a44.718987 44.718987 0 0 0 47.311393 0c66.106329-32.016203 51.848101-122.75038 37.330632-173.950379-30.59038-108.362532-103.696203-206.096203-129.620253-202.985317-5.703291 0.388861-9.462278 9.203038-10.62886 23.850127z" fill="#351800" p-id="505"></path>

    <path d="M873.251646 448.745316s-20.35038 362.936709 108.232911 324.050633c148.67443-43.811646-100.066835-454.059747-108.232911-324.050633z" fill="#341701" p-id="506"></path>

    <path d="M872.214684 428.783797c19.443038-51.07038 203.244557 334.679494 91.900759 357.881519a67.921013 67.921013 0 0 0 7.517975-1.944303c141.156456-45.88557-70.902278-439.412658-99.418734-355.937216z" fill="#281000" p-id="507"></path>

    <path d="M960.097215 787.183797a6.481013 6.481013 0 0 1-5.05519-2.333164c-25.924051-31.497722-49.903797-106.547848-71.161519-223.206076a6.481013 6.481013 0 1 1 12.962026-2.333165c20.60962 112.76962 44.330127 187.949367 68.439493 217.243545a6.481013 6.481013 0 0 1-5.05519 10.62886zM887.769114 546.478987a6.481013 6.481013 0 0 1-6.351392-5.31443c-10.888101-62.088101-11.925063-75.827848-11.925064-76.475949a6.481013 6.481013 0 0 1 12.962026-0.907342s1.166582 14.258228 11.795443 75.179747a6.481013 6.481013 0 0 1-5.314431 7.517974zM1001.057215 764.759494h-0.777721a6.481013 6.481013 0 0 1-5.573671-7.258735C1008.964051 648.101266 882.584304 431.635443 881.417722 429.431899a6.481013 6.481013 0 1 1 11.147341-6.610633c5.31443 9.073418 129.620253 222.039494 115.102785 337.012658a6.481013 6.481013 0 0 1-6.610633 4.92557z" fill="#FFFFFF" p-id="508"></path>

    <path d="M698.134684 202.985316S272.202532 726.91038 557.367089 840.846582C887.121013 972.151899 865.34481 18.146835 698.134684 202.985316z" fill="#FFFFFF" p-id="509"></path>

    <path d="M617.770127 863.270886a171.617215 171.617215 0 0 1-63.773165-12.962025 153.211139 153.211139 0 0 1-98.252152-106.288608c-21.128101-81.92 12.184304-199.61519 99.029874-348.28962a1758.557975 1758.557975 0 0 1 135.842025-198.837468C724.836456 159.044051 751.797468 168.506329 764.759494 177.838987c79.586835 56.51443 89.567595 409.47038-5.703291 584.328102-37.201013 67.402532-85.030886 101.103797-141.286076 101.103797z m87.752911-653.934177C697.616203 219.187848 427.746835 557.367089 474.669367 738.835443c11.406582 43.811646 39.663797 74.272405 86.715949 93.067342 74.661266 29.942278 135.193924 3.240506 180.042532-79.068355 41.608101-76.346329 66.235949-198.318987 65.847089-326.124557 0-116.658228-22.165063-210.244051-54.181266-233.316455-5.18481-3.240506-20.35038-13.998987-47.570633 15.943291z" fill="#351800" p-id="510"></path>

    <path d="M663.266835 340.642025s62.865823-123.916962 67.661773-90.086076c16.072911 32.145823 36.941772 98.252152 27.220253 111.084557s115.750886 86.97519-59.884557 387.823798c-17.757975 36.941772-65.976709 20.868861-80.494177 0s-109.529114 38.886076-67.402532-151.396456 112.899241-257.425823 112.89924-257.425823z" fill="#F7E9C9" p-id="511"></path>

    <path d="M758.148861 361.640506c9.721519-12.962025-11.147342-78.938734-27.220253-111.084557-2.073924-14.647089-15.16557 0-29.164557 22.035443 12.962025 33.830886 25.924051 78.679494 17.628354 89.049114-9.721519 12.962025 115.750886 86.97519-59.884557 387.823798a37.589873 37.589873 0 0 1-16.980253 17.887595c19.702278 7.647595 44.200506 6.221772 55.866329-17.887595 175.505823-300.848608 50.033418-374.991392 59.754937-387.823798z" fill="#EFD9AB" p-id="512"></path>

    <path d="M663.266835 781.221266a68.569114 68.569114 0 0 1-53.533164-25.924051 50.163038 50.163038 0 0 0-14.387848-1.555443A60.921519 60.921519 0 0 1 544.405063 733.521013c-18.146835-23.202025-19.183797-66.884051-3.629367-137.267848 39.663797-179.13519 103.696203-250.68557 114.454684-261.05519 52.496203-103.696203 67.272911-100.714937 73.753924-99.677975a13.998987 13.998987 0 0 1 11.276962 12.962025c10.36962 21.387342 37.978734 91.771139 27.738734 116.658228 0.907342 1.814684 2.592405 4.407089 3.888608 6.610633 81.660759 132.471899-25.016709 315.106835-64.810127 383.80557a46.01519 46.01519 0 0 1-38.886076 26.701772z m60.662279-522.888101a560.218734 560.218734 0 0 0-51.848101 86.586329l-1.944304 2.592405c-0.648101 0.648101-69.476456 68.439494-110.177215 252.500253-13.869367 62.865823-13.998987 103.696203 0 121.583797 8.814177 11.276962 22.813165 11.795443 36.293671 12.184304 11.536203 0 23.461266 0.777722 29.812658 9.98076a49.644557 49.644557 0 0 0 40.311899 17.887595 27.090633 27.090633 0 0 0 23.461265-16.461773c141.415696-242.130633 84.512405-334.290633 65.847089-364.492151-5.703291-9.332658-10.628861-17.239494-4.92557-24.887089s-9.203038-60.403038-26.831392-97.34481z m41.996962 109.010632z" fill="#351800" p-id="513"></path>

    <path d="M692.042532 377.583797a6.481013 6.481013 0 0 1-6.221773-4.536708c-2.203544-6.740253-4.018228-7.906835-4.018227-7.906836a30.201519 30.201519 0 0 0-5.18481 7.129114 6.481013 6.481013 0 0 1-11.536203-5.832911c1.296203-2.462785 8.166076-14.906329 18.146835-14.128608s13.739747 12.962025 15.03595 16.721013a6.481013 6.481013 0 0 1-4.147848 8.166076zM745.057215 381.602025a6.481013 6.481013 0 0 1-6.221772-4.536709c-2.203544-6.740253-4.018228-7.906835-4.018228-7.906835a30.331139 30.331139 0 0 0-5.18481 7.129114 6.481013 6.481013 0 1 1-11.536202-5.832911c1.296203-2.462785 8.166076-14.906329 18.146835-14.128608s13.739747 12.962025 15.035949 16.721013a6.481013 6.481013 0 0 1-4.147848 8.166076zM708.245063 436.690633a31.108861 31.108861 0 0 0 33.182785-21.128101 4.277468 4.277468 0 0 0-4.147848-5.18481l-53.792405-4.147849a4.277468 4.277468 0 0 0-4.795949 4.536709 31.108861 31.108861 0 0 0 29.553417 25.924051z" fill="#351800" p-id="514"></path>

    <path d="M710.474991 408.313972m4.135734 0.316776l2.326351 0.178186q4.135734 0.316775 3.818959 4.452509l-0.455365 5.945118q-0.316775 4.135734-4.452509 3.818959l-2.326351-0.178186q-4.135734-0.316775-3.818959-4.45251l0.455365-5.945117q0.316775-4.135734 4.452509-3.818959Z" fill="#FFFFFF" p-id="515"></path>

    <path d="M699.946848 407.384707m4.135734 0.316775l2.326351 0.178186q4.135734 0.316775 3.818959 4.452509l-0.277179 3.618768q-0.316775 4.135734-4.452509 3.818959l-2.326351-0.178186q-4.135734-0.316775-3.818959-4.45251l0.277179-3.618767q0.316775-4.135734 4.452509-3.818959Z" fill="#FFFFFF" p-id="516"></path>

    <path d="M487.501772 265.073418s-205.188861 617.251646 102.4 597.290126c356.326076-23.072405-26.183291-818.163038-102.4-597.290126z" fill="#FFFFFF" p-id="517"></path>

    <path d="M566.051646 872.603544a141.674937 141.674937 0 0 1-118.732152-54.051645c-113.028861-146.470886 15.813671-539.868354 21.387341-556.459747 15.684051-45.626329 43.163544-47.311392 58.199494-44.330127C616.214684 235.64962 751.019747 511.740759 738.835443 698.134684c-7.258734 107.58481-61.699241 167.728608-157.488608 173.950379q-8.036456 0.518481-15.295189 0.518481z m-78.938735-604.41924c-2.203544 6.481013-130.786835 400.656203-24.498227 538.442531 25.924051 34.349367 64.810127 49.514937 116.658227 46.144811 85.808608-5.573671 132.731139-58.069873 139.341773-155.544304 12.962025-182.375696-123.787342-445.50481-195.985823-460.151899-5.444051-1.555443-23.072405-5.05519-35.51595 31.108861z" fill="#351800" p-id="518"></path>

    <path d="M493.723544 293.719494S311.088608 842.531646 574.606582 856.530633c304.607595 16.072911-13.221266-759.056203-80.883038-562.811139z" fill="#341701" p-id="519"></path>

    <path d="M508.241013 277.387342c55.347848-63.513924 276.091139 606.882025 52.755443 576.680506 4.92557 0.648101 9.980759 1.296203 15.29519 1.555443 288.534684 14.517468 16.202532-683.746835-68.050633-578.235949z" fill="#281000" p-id="520"></path>

    <path d="M546.997468 849.401519a6.351392 6.351392 0 0 1-4.018227-1.425823C444.597468 770.851646 440.708861 604.678481 454.707848 479.594937a6.610633 6.610633 0 0 1 7.129114-5.703291 6.481013 6.481013 0 0 1 5.703291 7.129113C453.670886 602.863797 457.300253 764.759494 551.015696 837.865316a6.481013 6.481013 0 0 1-4.018228 11.536203zM469.614177 455.096709h-0.907342a6.481013 6.481013 0 0 1-5.57367-7.258734c12.962025-97.08557 21.387342-117.95443 21.776202-118.861772a6.481013 6.481013 0 0 1 11.925063 5.055189c0 1.036962-8.425316 21.905823-20.86886 115.491646a6.481013 6.481013 0 0 1-6.351393 5.573671zM572.532658 850.697722a6.481013 6.481013 0 0 1-6.092152-4.407089c-45.755949-137.397468-55.736709-537.53519-56.125569-554.385823a6.481013 6.481013 0 0 1 6.351392-6.610633 6.610633 6.610633 0 0 1 6.610633 6.351393c0 4.147848 10.24 414.78481 55.477468 550.626835a6.481013 6.481013 0 0 1-4.147848 8.166076z" fill="#FFFFFF" p-id="521"></path>

    <path d="M633.713418 840.716962a6.481013 6.481013 0 0 1-5.962532-9.073418c65.587848-153.6-105.510886-543.108861-107.32557-547.127088a6.481013 6.481013 0 0 1 11.795443-5.314431c7.129114 16.202532 175.246582 398.711899 107.32557 557.367089a6.481013 6.481013 0 0 1-5.832911 4.147848z" fill="#FFFFFF" p-id="522"></path>

    <path d="M890.361519 560.866835S403.637468 756.852658 539.479494 882.973165C696.579241 1028.795949 1065.478481 492.556962 890.361519 560.866835z" fill="#FFFFFF" p-id="523"></path>

    <path d="M600.141772 913.433924a101.492658 101.492658 0 0 1-71.161519-27.609114 73.105823 73.105823 0 0 1-25.92405-69.476456C526.128608 692.561013 868.455696 553.478481 882.843544 547.64557c34.608608-13.610127 49.126076-4.018228 55.088608 6.351392 27.738734 48.089114-87.752911 211.540253-191.060253 293.978734-54.440506 43.422785-104.473924 65.458228-146.730127 65.458228z m289.830886-347.771139A1808.591392 1808.591392 0 0 0 712.911392 650.952911c-115.880506 64.810127-181.468354 122.75038-190.152911 168.50633a54.051646 54.051646 0 0 0 19.961519 51.848101c57.810633 53.662785 145.433924-1.296203 192.615696-38.886076 113.676962-90.734177 202.985316-240.186329 186.393924-268.962025-3.629367-4.92557-15.16557-4.277468-31.756962 2.203544z" fill="#351800" p-id="524"></path>

    <path d="M864.567089 582.513418S458.726076 751.797468 551.663797 874.807089C659.248608 1017.518987 1011.037975 523.276962 864.567089 582.513418z" fill="#341701" p-id="525"></path>

    <path d="M886.084051 570.329114c63.643544-5.31443-286.331139 403.896709-356.066836 291.77519a72.976203 72.976203 0 0 0 5.18481 7.388354c106.158987 134.027342 453.670886-310.829367 350.882026-299.163544z" fill="#281000" p-id="526"></path>

    <path d="M535.072405 861.456203a6.351392 6.351392 0 0 1-3.629367-0.777722 6.481013 6.481013 0 0 1-2.722025-8.814177c24.109367-45.237468 96.696709-111.343797 215.817721-196.504304a6.481013 6.481013 0 0 1 7.517975 10.499241c-115.232405 82.956962-188.467848 149.322532-211.281013 192.226835a6.481013 6.481013 0 0 1-5.703291 3.370127zM770.203544 653.545316a6.481013 6.481013 0 0 1-3.758987-11.795443c63.643544-44.848608 77.772152-53.273924 78.938734-53.662784a6.481013 6.481013 0 0 1 6.481013 11.276962s-15.16557 8.814177-77.772152 53.014683a6.481013 6.481013 0 0 1-3.888608 1.166582zM575.384304 895.546329a6.481013 6.481013 0 0 1-2.073924-12.962025c127.027848-42.385823 314.199494-298.126582 316.143797-300.978228a6.481013 6.481013 0 1 1 10.499241 7.647595c-7.777215 10.628861-191.449114 261.962532-322.49519 305.644557z" fill="#FFFFFF" p-id="527"></path>

   </svg>

  </div>

  <span class="icon-name" title="瓜子_1" p-id="528"><span p-id="529">瓜子_1</span></span>

  <div class="icon-cover" p-id="530">

   <span mx-click="car({id:7466856,index:1})" data-spm-click="gostr=/alimama.30;locaid=ddbafce52" title="添加入库" class="cover-item iconfont cover-item-line icon-gouwuche1" p-id="531"></span>

   <span data-login="" mx-click="toggleFavor({id:7466856,index:1})" data-spm-click="gostr=/alimama.30;locaid=dc1455f4f" title="收藏" class="cover-item iconfont cover-item-line icon-shoucang1" p-id="532"></span>

   <span data-login="true" mx-click="downloadIcon({id:7466856,index:1})" data-spm-click="gostr=/alimama.30;locaid=dd962f461" title="下载图标" class="cover-item iconfont cover-item-line icon-xiazai" p-id="533"></span>

  </div>

 </body>

</html>

接下来看简单的示例：

样式 源码

<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>

　　第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

　　第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

　　SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

　　SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

　　stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

　　fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

　　关闭标签的作用是关闭 SVG 元素和文档本身。

我们可以选择新建.svg文件然后向html文件内部加载：

（1）使用 <embed> 标签

<embed> 标签被所有主流的浏览器支持，并允许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

语法：

<embed src="rect.svg" width="300" height="100"

type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

注释：pluginspage 属性指向下载插件的 URL。

（2）使用 <object> 标签

<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

语法：

<object data="rect.svg" width="300" height="100"

type="image/svg+xml"

codebase="http://www.adobe.com/svg/viewer/install/" />

注释：codebase 属性指向下载插件的 URL。

（3）使用 <iframe> 标签

<iframe> 标签可工作在大部分的浏览器中。

语法：

<iframe src="rect.svg" width="300" height="100">

</iframe>

或者直接在html文件编写svg代码：

 <html xmlns:svg="http://www.w3.org/2000/svg">

 <body>

 <p>This is an HTML paragraph</p>

 <svg class="icon" style="width: 5.3037109375em; height: 5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewbox="0 0 1335 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="479">

 <circle cx="100" cy="50" r="40" stroke="black"

 stroke-width="2" fill="red"/>

 </svg>

 </body>

 </html>

SVG形状：

　　<rect>标签（矩形）

<?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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect 　　 x="20"  　　　　左侧位置
　　　　　　y="20" 　　　　　顶端位置
　　　　　　width="250" 　　宽
　　　　　　height="250"　　高

　　　　　　style="
　　　　　　　　　　fill:blue;
　　　　　　　　　　stroke:pink;
　　　　　　　　　　stroke-width:5;

　　　　　　　　　　fill-opacity:0.1;
　　　　　　　　　　stroke-opacity:0.9
"/>

</svg>
 

x="20"  　　　　左侧位置
y="20" 　　　　　顶端位置
rx="20" ry="20"  圆角
width="250" 　　宽
height="250"　　高

style="
　　　　　fill:blue;  填充颜色
　　　　　stroke:pink; 边框颜色
　　　　　stroke-width:5; 边框宽度

　　　　　fill-opacity:0.1; 填充透明度
　　　　　stroke-opacity:0.9 边框透明度
　　　　　opacity:0.9 整体透明度
　　　　　　　　　　
　　　　　　"
   

　　<circle> 标签（圆）

<?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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red"/>

</svg>
 

cx="100"  　　圆心x
cy="50"   　　圆心y
r="40"    　　半径
stroke="black"　　边框颜色

stroke-width="2" 　　边框宽度
fill="red"　　填充颜色
   

　　<ellipse> 标签 （椭圆）

<?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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"

style="fill:rgb(200,100,50);

stroke:rgb(0,0,100);stroke-width:2"/>

</svg>
 
cx="300"  中心x
cy="150"  中心y
rx="200"  x半径
ry="80"   y半径
style="
　　　　fill:rgb(200,100,50); 填充颜色

　　　　stroke:rgb(0,0,100); 边框颜色
　　　　stroke-width:2 边框宽度
　　　　"
   

　　<line> 标签 （线条）

<?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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"

style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg> 
x1="0" 
y1="0" 
x2="300" 
y2="300"

style="
　　　　stroke:rgb(99,99,99);
　　　　stroke-width:2
　　"　　
   

　　<polygon> 标签（多边形，默认封口）

<?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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250 123,234"

style="fill:#cccccc;

stroke:#000000;stroke-width:1"/>

</svg>
 
构造一个四边形：

points="
　　　　220,100  x,y
　　　　300,210  x,y
　　　　170,250  x,y
　　　　123,234  x,y
　　　　"
注：每个点的xy用 “,” 隔开，两个点之间用空格隔开

style="
　　　　fill:#cccccc;

　　　　stroke:#000000;
　　　　stroke-width:1
　　"
   

　　<polyline> 标签（折线，不默认封口）

<?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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>

</svg>
 
构成折线：

points="
　　　　　　0,0 
　　　　　　0,20 
　　　　　　20,20 
　　　　　　20,40 
　　　　　　40,40 
　　　　　　40,60
　　　　"

注：每个点的xy用 “,” 隔开，两个点之间用空格隔开

style="
　　　　fill:white;
　　　　stroke:red;
　　　　stroke-width:2
　　　　"
   

　　　　

　　<path> 标签（定义路径）

 <?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 width="100%" height="100%" version="1.1"

 xmlns="http://www.w3.org/2000/svg">

 <path d="M250 150 L150 350 L350 350 Z" />

 </svg>
 
path d="
　　　　M250 150 
　　　　L150 350 
　　　　L350 350 
　　　　Z
　　　　"
  • M = moveto  移动画笔到
  • L = lineto  画直线到
  • H = horizontal lineto 画水平线
  • V = vertical lineto　　画垂直线
  • C = curveto  画曲线
  • S = smooth curveto  画平滑曲线
  • Q = quadratic Belzier curve  画二次贝塞尔曲线
  • T = smooth quadratic Belzier curveto  画光滑的二次贝塞尔曲线
  • A = elliptical Arc  画椭圆弧
  • Z = closepath  闭合路径








 
 






SVG 滤镜：


　　








在 SVG 中，可用的滤镜有：


  • feBlend
    • 

  • feColorMatrix
    • 

  • feComponentTransfer
    • 

  • feComposite
    • 

  • feConvolveMatrix
    • 

  • feDiffuseLighting
    • 

  • feDisplacementMap
    • 

  • feFlood
    • 

  • feGaussianBlur
    • 

  • feImage
    • 

  • feMerge
    • 

  • feMorphology
    • 

  • feOffset
    • 

  • feSpecularLighting
    • 

  • feTile
    • 

  • feTurbulence
    • 

  • feDistantLight
    • 

  • fePointLight
    • 

  • feSpotLight


注释：可以在每个 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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="Gaussian_Blur">

<feGaussianBlur in="SourceGraphic" stdDeviation="3" />

</filter>

</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"

style="fill:#ff0000;stroke:#000000;

stroke-width:2;filter:url(#Gaussian_Blur)"/>

</svg>









<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？

<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。




  • <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
    • 

  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
    • 

  • 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
    • 

  • <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
    • 

  • in="SourceGraphic" 这个部分定义了由整个图像创建效果








 
 






SVG线性渐变：










<!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%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">

<stop offset="0%" style="stop-color:rgb(255,255,0);

stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(255,0,0);

stop-opacity:1"/>

</linearGradient>

</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"

style="fill:url(#orange_red)"/>

</svg>








<linearGradient> 可用来定义 SVG 的线性渐变。

<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变

当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变

当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变



  • <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
    • 

  • fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
    • 

  • <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
    • 

  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。


 








 
 






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 width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"

fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(200,200,200);

stop-opacity:0"/>

<stop offset="100%" style="stop-color:rgb(0,0,255);

stop-opacity:1"/>

</radialGradient>

</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"

style="fill:url(#grey_blue)"/>

</svg>








<radialGradient> 用来定义放射性渐变。

<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

：

<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。








 
 









												


											
有关svg的一些理解的更多相关文章
	

    
						
  1. SVG:textPath深入理解
		
    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...
    
		
    2. 
								
  2. 理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio
		
    SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我 ...
    
		
    3. 
						
  3. SVG 学习<二>进阶 SVG世界，视野，视窗   stroke属性  svg分组
		
    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
    
		
    4. 
						
  4. svg描边路径动画
		
    svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
    
		
    5. 
						
  5. SVG开发包, 20 个有用的 SVG 工具，提供更好的图像处理
		
    20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web  ...
    
		
    6. 
						
  6. 【SVG】SVG的夺命利器——path
		
    [SVG]SVG的夺命利器--path 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 昨天一发布,突然看到有朋友留言,希 ...
    
		
    7. 
						
  7. 理解SVG坐标系统和变换： 建立新视窗
		
    在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系.在这篇文章中,我们将看一下我们如何这样做,以及这样 ...
    
		
    8. 
						
  8. 理解SVG坐标系统和变换： transform属性
		
    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...
    
		
    9. 
						
  9. SVG 入门——理解viewport,viewbox,preserveAspectRatio
		
    工欲善其事必先利其器,没有真正搞懂SVG里的viewport,viewbox, preserveAspectRatio这三个属性,就很容易遇到坑,最近写项目用到svg这三个属性被我一眼就略过 ,后来发 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SFTP &amp; FTP Upload
			
    简述 >> FTP: 1. Install FTP service on Linux(Red Hat) as root user    [root]# yum install ftp 2. ...
    
			
    2. 
						
  2. Struts2学习记录-Value Stack(值栈)和OGNL表达式
			
    仅仅是学习记录.把我知道的都说出来 一.值栈的作用 记录处理当前请求的action的数据. 二,小样例 有两个action:Action1和Action2 Action1有两个属性:name和pass ...
    
			
    3. 
						
  3. GCC编译笔记
			
    需要移植一个vs2008的项目到linux上,代码比较复杂,重新写比较困难,于是开始折腾 首先移植到codeblocks上,sprints_s这类的vs函数都要改,windows调用要改 编译通过 c ...
    
			
    4. 
						
  4. 我是如何通过一个 XSS 探测搜狐内网扫描内网并且蠕动前台到最后被发现的
			
    我是如何通过一个 XSS 探测搜狐内网扫描内网并且蠕动前台到最后被发现的!(附带各种 POC) | WooYun-2014-76685 | WooYun.orghttp://wooyun.org/bu ...
    
			
    5. 
						
  5. Locust压力测试Odoo
			
    Table of Contents 编写测试任务集 TaskSet 运行 Locust 分布式 运行 master 运行 slave.     Locust 是个伸缩性很好的压力测试框架,OdooLo ...
    
			
    6. 
						
  6. java GC(Garbage Collector) | System.gc()
			
    http://win.sy.blog.163.com/blog/static/94197186201151093543556/     Java垃圾回收调优
    
			
    7. 
						
  7. css hover对其包括的元素进行样式设置
			
    <ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...
    
			
    8. 
						
  8. 网络通信数据处理 Xbytestring类
			
    PS_Xbytestring a byte string for store low level data type 文件夹[TOC] PS_Xbytestring 文件夹TOC base info  ...
    
			
    9. 
						
  9. MySQL系列：innodb源代码分析之线程并发同步机制
			
    innodb是一个多线程并发的存储引擎,内部的读写都是用多线程来实现的,所以innodb内部实现了一个比較高效的并发同步机制. innodb并没有直接使用系统提供的锁(latch)同步结构,而是对其进 ...
    
			
    10. 
						
  10. OpenCV实现图像颜色特征提取
			
    https://github.com/ictlyh/ImageFeature 链接:http://pan.baidu.com/s/1mhUoPxI 密码:3cnn
    
			
    11.