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 元素和文档本身。
原文地址：https://www.cnblogs.com/the-wang/p/10320888.html
时间： 2024-10-09 17:24:43