如何将SVG图像使用在HTML网站中

2018-10-22 11:39:51 浏览数 (1)

最近在更改主题文件的时候发现了一个有趣的图像文件,其中使用的HTML代码如下

代码语言:txt复制
<g id="SVG图" sketch:type="MSArtboardGroup" fill-opacity="0.8" fill="#000000">
            <g id="luolei" sketch:type="MSLayerGroup" transform="translate(1.000000, 0.000000)">
                <g id="图层_1" sketch:type="MSShapeGroup">
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* <path d="M59.2176426,208.109485 C57.4572475,208.734015 55.7948091,208.88874 54.225618,208.578351 C52.6536012,208.265148 51.2115654,207.640619 49.8929174,206.702886 C48.5742694,205.765154 47.3790092,204.668945 46.31373,203.420823 C45.2446832,202.169889 44.2707675,200.857063 43.3938665,199.482348 C42.7637412,198.732162 42.8899546,198.043866 43.7706231,197.419337 C47.0352188,195.045936 50.3318388,192.449356 53.6604832,189.636159 C56.9863018,186.822962 59.9711558,183.915992 62.6084518,180.915248 C62.9852083,180.417312 63.4853527,180.229766 64.1154781,180.352609 C64.7427778,180.478265 65.1185924,180.853358 65.2457478,181.47695 C65.7458921,183.479008 66.1876392,185.855222 66.5643958,188.604653 C66.9411524,191.356897 67.0023753,194.0435 66.7527741,196.669151 C66.4994053,199.294801 65.8108826,201.668202 64.6806129,203.796854 C63.5512851,205.920818 61.7287252,207.360237 59.2176426,208.109485 L59.2176426,208.109485 Z M57.1006249,140.212272 C56.093743,140.586427 55.3402299,140.337928 54.8400855,139.461148 L48.4352238,121.644235 C48.181855,121.146299 48.2468455,120.706502 48.623602,120.331409 C49.0003586,119.833473 49.4713043,119.613106 50.0364392,119.674997 C50.6015741,119.738762 51.1959075,119.800653 51.8260329,119.862543 C52.4533326,119.927247 53.0504918,119.988199 53.6156266,120.05009 C54.1807615,120.114793 54.6517072,119.894426 55.0284638,119.393677 C57.7891476,115.642748 60.3030558,111.924639 62.5635953,108.234663 C64.8241347,104.548437 66.8962958,100.516188 68.7800787,96.1379159 C68.9034665,95.6399801 68.8422435,95.1382933 68.5917004,94.6375442 C68.2149439,94.2624513 67.5235955,94.1396084 66.5195393,94.2624513 C65.5126573,94.3881075 64.4775186,94.4818807 63.4112975,94.543771 C62.3431927,94.6084745 61.4013012,94.5765916 60.5856232,94.4499978 C59.7671196,94.3271549 59.3611644,93.8254681 59.3611644,92.9496261 L59.3611644,45.5003717 C59.3611644,45.1252788 59.5495427,44.7501858 59.9262992,44.3750929 C60.3030558,44 61.1187338,43.9062268 62.375217,44.0937732 C63.6288745,44.2813197 64.9804887,44.5626394 66.4253501,44.9377323 C67.8673859,45.3128252 69.2510244,45.719801 70.5696724,46.1567843 C71.8883204,46.5965807 72.7360227,46.8779004 73.1127793,47.0007434 C73.6129237,47.2529934 74.6810285,47.7509292 76.3142683,48.501115 C77.9456242,49.2513009 78.9525062,49.6263938 79.3292628,49.6263938 L175.212869,49.6263938 C175.463412,49.6263938 176.467468,49.4097776 178.227863,48.9699812 C179.984491,48.5339357 181.90124,48.0322489 183.973401,47.4696095 C186.04462,46.9069701 188.024476,46.3443308 189.908259,45.7816914 C191.792042,45.219052 193.044757,44.8148894 193.675825,44.5626394 C194.175969,44.4397964 194.646915,44.500749 195.088662,44.7501858 C195.526641,45.0024358 195.747044,45.4384813 195.747044,46.0630111 L195.747044,94.6375442 C195.747044,95.3877301 195.243132,95.8884791 194.240018,96.1379159 C191.350295,96.3901659 188.241111,96.1697988 184.915292,95.4815033 C181.585706,94.796021 178.665843,93.576969 176.15476,91.8243473 C175.779887,91.5749105 175.558543,91.138865 175.496378,90.5115221 C175.432329,89.8869924 175.402189,89.2624627 175.402189,88.6360575 C175.402189,88.0115278 175.33814,87.4817091 175.212869,87.0419126 C175.087597,86.6058671 174.647734,86.3855 173.896105,86.3855 L80.8372309,86.3855 C79.8312909,86.3855 79.3302047,86.886249 79.3302047,87.8858717 C79.3302047,88.7626514 79.2972385,89.4509469 79.2360155,89.9488827 C79.1700831,90.4496318 78.7650698,90.886615 78.0106148,91.261708 L94.587904,98.5760199 C95.7191156,99.2024251 95.906552,99.9535487 95.1530388,100.826577 C94.4004676,101.829013 93.6149301,102.514496 92.7983103,102.889588 C91.9816904,103.264681 91.1650705,103.516931 90.3493925,103.639774 C89.5308889,103.76543 88.8094,103.859204 88.1839841,103.921094 C87.5529169,103.985798 87.1149373,104.140523 86.8653361,104.38996 C84.350486,107.015611 81.5577779,109.518418 78.4825024,111.891819 C75.4025174,114.26897 72.2952175,116.519527 69.1577772,118.643491 C68.5276518,119.018584 68.3392735,119.552154 68.5926423,120.237636 C68.8431854,120.925932 69.281165,121.333845 69.9112903,121.456688 L85.1699315,122.581967 C85.6700759,122.581967 86.111823,122.39442 86.4885795,122.019327 C88.6229055,119.269896 90.6630424,116.486707 92.6108739,113.67351 C94.5568216,110.860313 96.2842504,108.018046 97.7912767,105.140146 C98.2914211,104.26618 98.9837113,104.079571 99.862496,104.577507 L119.267343,116.955573 C120.143302,117.45726 120.269516,118.206508 119.642216,119.206131 C118.889645,120.081972 118.071141,120.738385 117.193298,121.175368 C116.313572,121.615165 115.432903,121.925554 114.556944,122.113101 C113.675334,122.300647 112.923705,122.426303 112.296405,122.488194 C111.665338,122.551959 111.227358,122.707623 110.977757,122.95706 C108.839663,125.207617 106.204251,127.616652 103.065869,130.177598 C99.9256027,132.741359 96.6619489,135.306056 93.2701979,137.867003 C89.8793887,140.430763 86.4895214,142.90075 83.0987123,145.274151 C79.7079031,147.650364 76.6929086,149.775266 74.0565545,151.65073 C73.4254873,152.025823 73.2380509,152.588463 73.4895359,153.339586 C73.740079,154.089772 74.2439909,154.402975 74.998446,154.277319 L92.8943832,153.713741 C94.1470988,153.590899 94.6510107,152.902603 94.4014095,151.65073 C93.8974976,150.150359 93.459518,148.682808 93.0827615,147.244326 C92.7060049,145.808658 92.2642578,144.40206 91.7641135,143.024531 C91.5116866,142.400001 91.6058757,141.870183 92.0476228,141.430386 C92.4856023,140.993403 93.0187128,140.900567 93.6478963,141.149066 C95.655067,141.899252 97.72817,142.713204 99.8643798,143.58717 C102.248307,144.712449 104.038843,145.743955 105.234103,146.681687 C106.426537,147.619419 107.334521,147.525646 107.965588,146.400367 C112.609113,137.398137 117.007746,128.241181 121.152068,118.924811 C125.294507,109.612191 128.621267,100.076392 131.136117,90.3239757 C131.38666,88.9501978 132.078009,88.5741672 133.207337,89.1986969 L155.812731,98.5760199 C156.943943,99.3262057 157.131379,100.076392 156.377866,100.826577 C155.875838,101.452983 155.310703,101.889966 154.683403,102.139403 C154.052336,102.391653 153.393954,102.608269 152.705431,102.795815 C152.014083,102.983362 151.415982,103.141838 150.915837,103.264681 C150.411925,103.390338 150.097334,103.639774 149.973946,104.014867 C148.968006,106.015988 147.930042,107.85957 146.864762,109.547488 C145.795716,111.235406 144.760577,112.894254 143.757462,114.517469 C143.503152,114.769719 143.409905,115.111991 143.473953,115.548975 C143.536118,115.988771 143.568142,116.392934 143.568142,116.768027 L206.487432,116.768027 C207.365275,116.768027 207.867303,117.081229 207.994458,117.705759 C208.117846,118.332164 207.994458,118.956694 207.617702,119.581223 L184.070416,119.581223 C183.064476,119.581223 182.563389,120.081972 182.563389,121.081595 L182.563389,141.149066 C182.563389,142.150564 183.063534,142.649438 184.070416,142.649438 L205.923239,142.649438 C206.925411,142.649438 207.430265,143.18207 207.430265,144.243583 C207.430265,145.306971 206.926353,145.837728 205.923239,145.837728 L184.070416,145.837728 C183.064476,145.837728 182.563389,146.338477 182.563389,147.3381 L182.563389,167.96821 C182.563389,168.969708 183.063534,169.468582 184.070416,169.468582 L204.039456,169.468582 C204.915415,169.468582 205.386361,169.782722 205.452293,170.406314 C205.512574,171.033657 205.419327,171.597234 205.168784,172.09517 L184.070416,172.09517 C183.064476,172.09517 182.563389,172.595919 182.563389,173.595542 L182.563389,194.788292 C182.563389,195.790728 183.063534,196.289601 184.070416,196.289601 L211.574588,196.289601 C212.450547,196.289601 212.921492,196.599991 212.987425,197.227333 C213.047706,197.850925 212.891352,198.475455 212.516479,199.102798 L145.075169,199.102798 C144.195442,199.102798 143.69153,199.539781 143.568142,200.414686 C143.440987,201.288652 143.409905,202.258267 143.473953,203.322593 C143.536118,204.383169 143.568142,205.414674 143.568142,206.41711 C143.568142,207.415795 143.253551,208.040325 142.626251,208.292575 C140.742468,209.291259 138.671249,210.074266 136.409767,210.636905 C134.148286,211.199545 131.950853,211.668411 129.816527,212.043504 C128.432889,212.292941 126.925863,212.51237 125.294507,212.699916 C123.661267,212.887463 122.845589,212.353893 122.845589,211.105771 L122.845589,142.088674 C122.845589,141.464144 122.563963,140.995278 121.997887,140.682076 C121.432752,140.370749 120.897757,140.46546 120.397613,140.963395 C118.890587,142.340924 117.384502,143.652812 115.875592,144.901871 C114.368566,146.152806 112.797491,147.465631 111.166135,148.839409 C110.413564,149.341096 110.349515,150.091282 110.978699,151.089966 C113.362626,153.340524 114.902618,155.591082 115.593967,157.841639 C116.281547,160.091259 116.281547,162.219911 115.593967,164.218219 C114.902618,166.220277 113.550062,167.940078 111.542892,169.375746 C109.531953,170.814228 107.022755,171.783843 104.00776,172.282716 C102.247365,172.657809 100.99465,172.878176 100.240194,172.939129 C99.4876232,173.003833 98.9507451,172.689692 98.6399209,172.001397 C98.3253292,171.315914 98.0747861,170.157815 97.8854659,168.531787 C97.6980295,166.90951 97.2873648,164.594249 96.6619489,161.593506 C96.4076382,160.594821 95.7803385,160.21879 94.778166,160.468227 L61.811024,170.970829 C61.1818405,171.223079 60.8041421,171.659125 60.6807543,172.282716 C60.6807543,172.784403 60.4603517,173.378926 60.0214303,174.064408 C59.5796832,174.752703 59.0795388,175.348163 58.514404,175.846099 C57.9492691,176.346848 57.3841343,176.628168 56.8189994,176.689121 C56.2538645,176.753824 55.8441418,176.407801 55.5945405,175.657615 L49.0013005,157.090515 C48.6245439,156.216549 48.8129222,155.654847 49.5664354,155.40166 C50.3199485,155.152223 51.2618399,155.027504 52.3921097,155.027504 L55.6887297,155.027504 C56.7540089,155.027504 57.4783234,154.839958 57.85508,154.463927 C61.1187338,151.214685 64.44832,147.713192 67.8391292,143.962263 C71.2299383,140.211334 74.494534,136.460405 77.6348001,132.709476 C78.1349444,132.21154 78.1679106,131.647963 77.7289892,131.02062 C77.2872421,130.397028 76.6929086,130.209481 75.9412793,130.45798 L61.0584527,134.771549 C60.3049396,135.024737 59.8631925,135.742102 59.7398047,136.929271 C59.6117075,138.119253 58.7319809,139.211711 57.1006249,140.212272 L57.1006249,140.212272 Z M90.7980762,195.729669 C90.0455049,197.728915 88.9764581,199.416833 87.5956453,200.793424 C86.843074,201.417016 85.837134,201.980593 84.5825346,202.481342 C83.3260514,202.979278 82.1336169,203.355309 81.0024052,203.606621 C79.8730774,203.856058 78.8661955,203.88794 77.9892946,203.700394 C77.109568,203.512848 76.6706465,203.043981 76.6706465,202.293796 C76.4182196,198.41721 75.9472739,194.354954 75.2578094,190.103276 C74.5664611,185.854411 73.7178169,181.851231 72.7147025,178.100302 C72.4613337,177.475772 72.5884891,176.945954 73.0914591,176.506157 C73.5916035,176.069174 74.1576802,175.976339 74.7868637,176.224838 C76.5434912,176.975023 78.4903808,178.006529 80.6275325,179.319354 C82.7618584,180.632179 84.6767237,182.164434 86.3730702,183.914242 C88.0675329,185.665926 89.3861809,187.541391 90.3280723,189.540636 C91.2690219,191.541757 91.4253758,193.605706 90.7980762,195.729669 L90.7980762,195.729669 Z M81.492027,52.4537145 C80.486087,52.4537145 79.9850008,52.9544635 79.9850008,53.9540861 L79.9850008,82.0860552 C79.9850008,83.088491 80.4851451,83.5864268 81.492027,83.5864268 L98.6335092,83.5864268 C99.6375655,83.5864268 100.142419,83.088491 100.142419,82.0860552 L100.142419,53.9540861 C100.142419,52.9554012 99.6385074,52.4537145 98.6335092,52.4537145 L81.492027,52.4537145 L81.492027,52.4537145 Z M111.63082,185.590271 C111.63082,187.839891 111.065685,189.715355 109.934474,191.216665 C109.432445,191.96685 108.710957,192.78174 107.769065,193.654769 C106.827174,194.531548 105.852316,195.248913 104.849202,195.811553 C103.841378,196.37513 102.899487,196.685519 102.023527,196.749285 C101.141917,196.811175 100.577724,196.467965 100.327181,195.71778 C98.9435425,192.093444 97.3432689,188.403468 95.5235347,184.652538 C93.7000329,180.901609 91.7851676,177.40293 89.7779969,174.149937 C89.4012404,173.525407 89.4012404,172.962768 89.7779969,172.462019 C90.1528697,171.964083 90.653956,171.776536 91.2850232,171.898441 C93.1688061,172.151629 95.269224,172.586737 97.5947539,173.211267 C99.9184001,173.83861 102.116775,174.711638 104.187994,175.836917 C106.261097,176.962196 108.017725,178.307842 109.462586,179.869166 C110.905564,181.434241 111.63082,183.338776 111.63082,185.590271 L111.63082,185.590271 Z M120.590456,52.4537145 C119.584516,52.4537145 119.08343,52.9544635 119.08343,53.9540861 L119.08343,82.0860552 C119.08343,83.088491 119.583574,83.5864268 120.590456,83.5864268 L136.038418,83.5864268 C137.04059,83.5864268 137.545444,83.088491 137.545444,82.0860552 L137.545444,53.9540861 C137.545444,52.9554012 137.041532,52.4537145 136.038418,52.4537145 L120.590456,52.4537145 L120.590456,52.4537145 Z M145.9516,120.08343 C144.94566,120.08343 144.444573,120.584179 144.444573,121.583802 L144.444573,141.651273 C144.444573,142.652771 144.944718,143.151645 145.9516,143.151645 L163.282402,143.151645 C164.286458,143.151645 164.789428,142.653709 164.789428,141.651273 L164.789428,121.583802 C164.789428,120.584179 164.2874,120.08343 163.282402,120.08343 L145.9516,120.08343 L145.9516,120.08343 Z M145.9516,146.501288 C144.94566,146.501288 144.444573,147.002037 144.444573,148.001659 L144.444573,168.63177 C144.444573,169.633268 144.944718,170.132142 145.9516,170.132142 L163.282402,170.132142 C164.286458,170.132142 164.789428,169.634206 164.789428,168.63177 L164.789428,148.001659 C164.789428,147.002975 164.2874,146.501288 163.282402,146.501288 L145.9516,146.501288 L145.9516,146.501288 Z M145.9516,171.862431 C144.94566,171.862431 144.444573,172.36318 144.444573,173.362803 L144.444573,194.555553 C144.444573,195.557989 144.944718,196.056862 145.9516,196.056862 L163.282402,196.056862 C164.286458,196.056862 164.789428,195.558926 164.789428,194.555553 L164.789428,173.362803 C164.789428,172.364118 164.2874,171.862431 163.282402,171.862431 L145.9516,171.862431 L145.9516,171.862431 Z M157.575457,52.4537145 C156.569517,52.4537145 156.068431,52.9544635 156.068431,53.9540861 L156.068431,82.0860552 C156.068431,83.088491 156.568575,83.5864268 157.575457,83.5864268 L174.342067,83.5864268 C175.344239,83.5864268 175.849093,83.088491 175.849093,82.0860552 L175.849093,53.9540861 C175.849093,52.9554012 175.345181,52.4537145 174.342067,52.4537145 L157.575457,52.4537145 L157.575457,52.4537145 Z M166.420413,116.229912 C166.043657,116.482162 165.634876,116.482162 165.195012,116.229912 C164.753265,115.980475 164.47164,115.605382 164.34731,115.104633 C163.594739,111.47936 162.747037,107.696548 161.805145,103.758072 C160.863254,99.8195966 159.70096,96.1005503 158.321089,92.5990579 C158.066778,91.9745282 158.160967,91.4447095 158.602714,91.004913 C159.042578,90.5688675 159.573804,90.4132039 160.204872,90.5360469 C161.834344,90.9111398 163.655962,91.4447095 165.6669,92.1301918 C167.674071,92.8184873 169.557854,93.695267 171.318249,94.7558422 C173.074876,95.8201684 174.55082,97.0711033 175.74608,98.5067714 C176.938515,99.9461905 177.53379,101.601288 177.53379,103.476753 C177.659062,106.852589 176.560816,109.542943 174.23717,111.54125 C171.91164,113.542371 169.306369,115.104633 166.420413,116.229912 L166.420413,116.229912 Z M0,0 L256,0 L256,256 L0,256 L0,0 Z" id="Shape"></path>
*/
                   

使用PS生成SVG图像用编辑器打开发现是data:img/png;base64而非/path

继续百度了很多篇文章都没有提及到如何转HTML中的path路径,最后才看到了这个工具,https://www.sketchapp.com/get/

因为对SVG第一次接触,所以暂时看到了这一个考虑方向。

0 人点赞