logo标签列表

如何将PNG图像转换为内联SVG

htmlsvgpng
7
如何将PNG图像转换为内联SVG，所谓的内联SVG是指HTML标记路径、多边形、矩形、圆等。我不需要SVG文件，因为我想对这些元素应用CSS样式。 谢谢。
1
PNG文件是光栅图像，而SVG文件是矢量图像——没有一种干净的方法可以自动将光栅转换为矢量。您需要在Adobe Illustrator或其他矢量图形编辑软件中重新绘制图像，或者雇用设计师为您完成。 - Sean
但是你可以使用一些软件或网站获取SVG路径，并在其上应用CSS！ - Zeeshan Ahmad Khalil
3个回答
12

您可以上传PNG图像到以下网站将其转换为SVG格式：

**1)**https://convertio.co/png-svg/

但这些网站只会提供不带任何颜色的 SVG 路径。您需要使用 CSS 的 fill 属性来为 SVG 的路径上色。为了说明这一点，我将与您讨论以下示例；

我们将要转换的 PNG 图像

我使用第一个网站获取了以下保存路径，并用红色填充它；

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
path {
        fill:red;
      }

        </style>
    </head>
    <body>
        <h1>
            <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
     preserveAspectRatio="xMidYMid meet">
    <metadata>
    Created by potrace 1.15, written by Peter Selinger 2001-2017
    </metadata>
    <g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
    fill="#000000" stroke="none">
    <path d="M671 1970 c-92 -31 -193 -85 -271 -143 -66 -49 -190 -166 -190 -180
    0 -5 8 -3 17 4 15 11 14 9 -1 -9 -11 -12 -21 -20 -24 -17 -7 6 -32 -15 -32
    -27 0 -5 6 -6 13 -2 7 4 9 3 4 -2 -5 -5 -14 -9 -19 -9 -6 0 -13 -6 -16 -14 -3
    -9 0 -11 8 -6 9 5 11 4 6 -4 -4 -6 -11 -9 -16 -6 -12 8 -33 -33 -24 -47 4 -7
    3 -8 -4 -4 -14 8 -63 -86 -96 -186 -23 -69 -24 -86 -24 -313 0 -227 1 -244 24
    -313 30 -92 92 -215 104 -207 5 3 12 0 16 -6 5 -8 3 -9 -6 -4 -8 5 -11 3 -8
    -6 3 -8 10 -14 16 -14 5 0 14 -4 19 -9 5 -5 2 -6 -6 -1 -9 5 -12 3 -9 -6 3 -8
    10 -14 16 -14 5 0 14 -4 19 -9 5 -5 3 -6 -4 -2 -7 4 -13 3 -13 -2 0 -12 25
    -33 32 -27 3 3 13 -5 24 -17 15 -18 16 -20 2 -9 -10 7 -18 9 -18 4 0 -15 127
    -134 200 -187 79 -59 175 -108 272 -140 69 -23 86 -24 318 -24 273 0 308 6
    458 82 78 39 224 144 218 155 -3 4 13 25 36 47 22 21 38 33 34 27 -12 -21 4
    -15 25 9 23 29 24 45 2 27 -10 -7 -7 -1 6 14 27 30 41 37 20 9 -11 -14 -10
    -13 9 2 23 20 31 42 10 30 -8 -4 -10 -3 -5 2 5 5 14 9 19 9 6 0 13 6 16 14 3
    9 0 11 -9 6 -8 -5 -11 -4 -6 1 5 5 14 9 19 9 6 0 13 6 16 14 3 9 0 11 -8 6 -9
    -5 -11 -4 -6 4 4 6 11 9 16 6 12 -8 74 115 104 207 23 69 24 86 24 313 0 227
    -1 244 -24 313 -30 92 -92 215 -104 207 -5 -3 -12 0 -16 6 -5 8 -3 9 6 4 8 -5
    11 -3 8 6 -3 8 -10 14 -16 14 -5 0 -14 4 -19 9 -5 5 -2 6 6 1 9 -5 12 -3 9 6
    -3 8 -10 14 -16 14 -5 0 -14 4 -19 9 -5 5 -3 6 5 2 21 -12 13 10 -10 30 -22
    19 -23 19 -8 -1 11 -15 7 -14 -13 4 -28 25 -38 43 -12 21 8 -7 15 -8 15 -3 0
    19 -168 170 -242 218 -50 31 -30 9 26 -29 29 -20 62 -46 72 -58 11 -11 -12 3
    -51 32 -81 62 -219 130 -320 159 -38 11 -62 20 -52 20 27 1 159 -45 227 -79
    33 -17 60 -28 60 -25 0 9 -120 65 -192 89 -69 23 -86 24 -321 24 -243 0 -249
    -1 -326 -28z m798 -664 c55 -53 66 -107 66 -321 0 -268 -24 -336 -127 -356
    -55 -10 -707 -10 -772 0 -102 17 -131 94 -130 351 0 238 27 325 107 349 18 6
    202 9 429 8 l397 -2 30 -29z"/>
    <path d="M920 982 l0 -191 145 92 c79 51 144 94 145 97 0 3 -53 39 -117 80
    -64 41 -129 83 -145 93 l-28 19 0 -190z"/>
    </g>
    </svg>
        </h1>
    
    </body>
    </html>

**输出1：**https://jsfiddle.net/defenderkhan/0bsLdqfp/

如果您无法从一个网站获取某些SVG路径，则可以使用两个网站来获取不同的SVG路径，然后按如下方式对它们进行着色：

我们将要转换的PNG图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .p1
{
    fill:white;
}
.p2
{
    fill: green;
}
.p3
{
    fill: black;
}
    </style>
</head>
<body>
    <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path class="p1" d="M0 1000 l0 -1000 1000 0 1000 0 0 1000 0 1000 -1000 0 -1000 0 0
-1000z m1245 841 c449 -132 709 -580 595 -1026 -66 -260 -249 -472 -495 -574
-208 -87 -467 -84 -670 8 l-67 30 -229 -73 c-211 -68 -229 -72 -224 -52 4 11
36 112 73 222 l66 202 -31 68 c-118 260 -119 510 -3 750 113 233 325 397 595
460 87 20 298 12 390 -15z m390 -184 c1 -7 6 -11 11 -10 6 1 11 -5 11 -13 0
-10 -9 -6 -28 12 -16 15 -26 31 -23 36 7 11 29 -7 29 -25z m-1195 18 c0 0 -17
-18 -39 -39 -29 -28 -41 -34 -46 -24 -5 7 -5 10 0 6 11 -10 37 11 29 23 -3 5
0 8 7 7 7 -2 14 3 15 10 1 6 2 14 3 15 1 3 31 5 31 2z m-100 -111 c0 -8 -19
-13 -24 -6 -3 5 1 9 9 9 8 0 15 -2 15 -3z m1427 -63 c0 -11 -5 -18 -9 -15 -4
3 -5 11 -1 19 7 21 12 19 10 -4z m-1620 -463 c-3 -8 -6 -5 -6 6 -1 11 2 17 5
13 3 -3 4 -12 1 -19z m1750 -80 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12
1 -19z m-148 -455 c-6 -7 -15 -10 -20 -7 -13 8 -3 21 15 21 12 0 13 -4 5 -14z
m-49 -37 c0 -2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21 13z"/>
<path class="p2" d="M848 1715 c-231 -56 -423 -234 -504 -465 -35 -100 -44 -272 -20 -374
18 -76 55 -167 96 -234 l26 -43 -36 -107 c-21 -59 -40 -117 -44 -129 -7 -20
-1 -19 128 22 121 38 137 41 156 28 39 -27 163 -73 243 -89 158 -32 343 -1
487 83 36 21 101 74 145 118 137 136 204 301 205 501 0 270 -152 514 -395 634
-44 22 -109 46 -145 55 -81 18 -264 18 -342 0z m9 -405 c23 -52 42 -104 42
-114 1 -10 -15 -39 -36 -64 l-36 -44 19 -37 c44 -83 226 -231 285 -231 8 0 37
26 66 57 l51 58 107 -53 107 -53 -5 -46 c-8 -78 -66 -132 -162 -154 -47 -10
-64 -10 -122 6 -38 10 -108 39 -158 63 -75 38 -106 61 -186 141 -154 155 -214
260 -213 371 1 124 62 203 154 198 l45 -3 42 -95z"/>

<path class="p3" d="M877 1884 c-43 -8 -119 -29 -169 -48 -50 -19 -98 -32 -107 -29 -13 4
-13 3 -2 -5 11 -8 10 -12 -7 -21 -27 -14 -35 -14 -26 1 4 7 3 8 -5 4 -6 -4 -9
-11 -6 -16 3 -4 -6 -15 -20 -24 -34 -22 -45 -19 -16 4 44 38 9 20 -41 -20 -28
-22 -45 -40 -37 -40 7 0 -7 -20 -31 -45 -24 -24 -46 -42 -50 -40 -4 3 -16 -5
-26 -18 -16 -18 -16 -19 -1 -8 9 7 17 9 17 4 0 -16 -22 -32 -36 -26 -8 3 -14
0 -14 -7 0 -6 5 -8 10 -5 15 9 12 -11 -3 -24 -8 -6 -17 -8 -21 -4 -4 4 -4 1
-1 -8 3 -8 -2 -23 -10 -34 -16 -19 -16 -19 -9 5 7 29 2 26 -16 -9 -8 -15 -8
-21 -1 -17 16 10 15 7 -24 -77 -109 -236 -100 -512 25 -756 17 -33 17 -43 6
-80 -6 -23 -14 -39 -17 -36 -3 3 -5 -3 -5 -13 2 -31 -98 -322 -110 -322 -12 0
-38 -59 -30 -67 2 -2 9 10 15 28 6 18 13 30 16 27 3 -3 1 -17 -4 -32 -8 -18
-7 -26 0 -26 6 0 116 34 243 75 233 75 260 82 270 66 3 -4 40 -20 82 -35 276
-98 554 -65 791 96 45 30 58 35 47 16 -5 -9 -3 -9 9 1 9 7 15 17 12 21 -7 11
32 43 43 36 5 -3 16 2 23 12 13 15 12 16 -3 3 -23 -17 -24 2 -1 20 9 8 38 40
64 71 29 35 50 53 53 45 3 -7 3 -2 1 10 -3 12 -1 24 5 28 5 3 10 1 10 -6 0 -6
10 0 21 15 12 15 19 29 16 32 -3 3 -11 -4 -17 -16 -6 -12 -14 -20 -16 -17 -3
2 11 35 30 73 54 106 77 202 83 340 6 124 -10 245 -43 322 -10 25 -11 38 -4
47 8 10 7 15 -1 21 -8 4 -9 3 -5 -4 4 -7 3 -12 -1 -12 -11 0 -56 90 -49 97 2
3 12 -12 21 -32 10 -19 19 -34 22 -32 2 2 -6 23 -19 46 -13 25 -25 37 -29 30
-9 -16 -32 27 -23 44 4 6 4 9 -1 5 -4 -4 -14 -3 -22 3 -15 13 -18 33 -3 24 6
-3 10 -1 10 5 0 7 -6 10 -14 7 -7 -3 -19 0 -25 6 -15 15 -14 30 2 21 6 -4 1 5
-12 19 -13 15 -27 24 -31 22 -4 -2 -18 7 -30 20 -13 14 -20 25 -15 25 4 0 0 9
-9 19 -10 11 -23 17 -30 15 -7 -3 -19 2 -26 11 -7 8 -9 15 -5 15 4 0 2 7 -6
16 -15 18 -74 50 -65 35 10 -15 0 -14 -35 4 -16 9 -27 20 -24 25 3 5 0 12 -6
16 -8 4 -9 3 -5 -4 10 -16 11 -16 -81 17 -93 35 -234 61 -313 60 -30 0 -90 -7
-133 -15z m393 -49 c135 -44 237 -103 339 -199 101 -96 198 -260 235 -401 24
-87 31 -249 17 -340 -65 -398 -373 -681 -786 -720 -118 -11 -322 28 -435 85
l-35 17 -225 -73 c-123 -40 -226 -71 -228 -69 -3 2 28 103 67 223 l71 219 -31
69 c-65 146 -83 225 -83 379 0 150 11 212 61 330 88 209 280 392 489 466 117
41 173 49 319 45 119 -3 152 -7 225 -31z"/>
</g>
</svg>

</body>
</html>

**output2:**https://jsfiddle.net/defenderkhan/t1279pv8/

注意：随着您将更多彩色图像转换，颜色填充CSS代码将变得更加困难。

你实际上不需要XML声明和!DOCTYPE svg...。 - SK-the-Learner
谢谢指出！如果它仍然解决了您的问题，请考虑点赞 :) - Zeeshan Ahmad Khalil
0

您可以获取给定的网站，该网站允许您对两种不同的预设进行SVG路径矢量化：高彩色和黑白。

https://theonlineconverter.com/convert-png-to-svg

这里是png图片

我将展示使用高色彩预设进行SVG路径矢量化的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="512" height="512" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.6" ><path fill="rgb(80,171,241)" stroke="rgb(80,171,241)" stroke-width="1" opacity="1" d="M 0 0 L 512 0 L 512 512 L 0 512 L 0 0 Z M 320 108 L 298 114 L 280 125 Q 269 134 262 146 L 254 164 L 252 173 L 252 181 L 251 182 L 252 198 L 253 199 L 253 203 L 252 202 L 243 202 L 216 197 L 193 190 L 171 181 L 141 164 L 121 149 L 108 136 L 106 136 L 97 125 L 95 123 L 88 135 L 83 155 L 83 167 L 87 185 Q 93 201 104 213 L 116 225 L 97 221 L 83 215 L 83 226 L 86 241 Q 90 255 99 266 Q 115 285 143 292 L 136 294 L 116 294 L 115 293 L 110 294 Q 115 309 124 320 Q 143 343 181 348 Q 163 363 139 372 L 114 379 L 98 380 L 97 381 L 79 381 L 78 380 L 69 381 Q 93 396 123 405 L 155 412 L 178 413 L 179 414 L 196 414 L 197 413 L 217 412 L 242 407 L 264 400 Q 303 385 332 359 Q 368 327 389 280 L 397 258 L 404 228 L 405 211 L 406 210 L 406 185 L 418 175 L 438 155 L 443 147 L 444 145 L 431 150 L 405 156 L 401 156 L 412 148 Q 427 136 434 116 L 434 113 L 416 122 L 388 132 L 385 132 Q 374 120 358 113 L 339 108 L 320 108 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 319.5 108 L 325 108.5 L 319.5 109 L 319.5 108 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 333.5 108 L 339 108.5 L 333.5 109 L 333.5 108 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 342.5 109 L 345 109.5 L 342.5 110 L 342.5 109 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 433.5 113 L 434 115.5 L 433 115.5 L 433.5 113 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 369.5 119 L 370.5 121 L 369.5 119 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 286.5 120 L 285.5 122 L 286.5 120 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 372.5 121 L 373.5 123 L 372.5 121 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 283.5 122 L 281.5 125 L 283.5 122 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 95.5 123 L 96.5 125 L 95.5 123 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 376.5 124 L 378.5 127 L 376.5 124 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 279.5 125 L 269.5 136 L 279.5 125 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 428.5 127 L 427.5 129 L 428.5 127 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 100.5 129 L 105.5 135 L 100.5 129 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 426.5 130 L 425.5 132 L 426.5 130 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 424.5 133 L 422.5 136 L 424.5 133 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 107.5 136 L 117.5 147 L 107.5 136 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 267.5 138 L 266.5 140 L 267.5 138 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 419.5 139 L 411.5 148 L 419.5 139 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 84.5 147 L 85 149.5 L 84 149.5 L 84.5 147 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 121.5 149 L 122.5 151 L 121.5 149 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 408.5 149 L 405.5 153 L 408.5 149 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 440.5 150 L 439.5 152 L 440.5 150 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 126.5 153 L 128.5 156 L 126.5 153 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 403.5 153 L 402.5 155 L 403.5 153 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 83.5 154 L 84 166.5 L 83 166.5 L 83.5 154 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 437.5 154 L 432.5 160 L 437.5 154 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 405.5 155 L 408 155.5 L 405.5 156 L 405.5 155 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 131.5 157 L 132.5 159 L 131.5 157 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 134.5 159 L 135.5 161 L 134.5 159 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 137.5 161 L 138.5 163 L 137.5 161 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 422.5 169 L 417.5 175 L 422.5 169 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 151.5 170 L 152.5 172 L 151.5 170 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 84.5 171 L 85 173.5 L 84 173.5 L 84.5 171 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 252.5 172 L 253 174.5 L 252 174.5 L 252.5 172 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 156.5 173 L 157.5 175 L 156.5 173 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 85.5 176 L 86 178.5 L 85 178.5 L 85.5 176 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 413.5 177 L 410.5 181 L 413.5 177 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 251.5 181 L 252 188.5 L 251 188.5 L 251.5 181 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 407.5 182 L 406.5 184 L 407.5 182 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 252.5 195 L 253 197.5 L 252 197.5 L 252.5 195 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 227.5 199 L 230 199.5 L 227.5 200 L 227.5 199 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 95.5 200 L 96.5 202 L 95.5 200 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 232.5 200 L 235 200.5 L 232.5 201 L 232.5 200 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 405.5 200 L 406 209.5 L 405 209.5 L 405.5 200 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 239.5 201 L 242 201.5 L 239.5 202 L 239.5 201 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 246.5 202 L 252 202.5 L 246.5 203 L 246.5 202 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 97.5 203 L 98.5 205 L 97.5 203 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 100.5 207 L 102.5 210 L 100.5 207 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 104.5 212 L 116.5 225 L 104.5 212 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 83 215 L 85 215.5 L 84 216.5 L 83.5 226 L 83 215 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 404.5 216 L 405 219.5 L 404 219.5 L 404.5 216 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 105.5 223 L 108 223.5 L 105.5 224 L 105.5 223 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 111.5 224 L 114 224.5 L 111.5 225 L 111.5 224 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 403.5 224 L 404 227.5 L 403 227.5 L 403.5 224 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 84.5 229 L 85 231.5 L 84 231.5 L 84.5 229 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 402.5 230 L 403 232.5 L 402 232.5 L 402.5 230 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 401.5 236 L 402 238.5 L 401 238.5 L 401.5 236 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 94.5 258 L 95.5 260 L 94.5 258 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 96.5 261 L 97.5 263 L 96.5 261 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 99.5 265 L 108.5 275 L 99.5 265 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 111.5 276 L 112.5 278 L 111.5 276 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 117.5 280 L 118.5 282 L 117.5 280 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 143.5 291 L 142.5 293 L 141 292.5 L 143.5 291 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 110.5 293 L 115 293.5 L 110.5 294 L 110.5 293 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 120.5 294 L 128 294.5 L 120.5 295 L 120.5 294 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 381.5 294 L 381 295.5 L 379.5 298 L 380 296.5 L 381.5 294 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 376.5 303 L 375.5 305 L 376.5 303 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 373.5 308 L 372.5 310 L 373.5 308 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 117.5 309 L 118.5 311 L 117.5 309 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 119.5 312 L 120.5 314 L 119.5 312 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 124.5 319 L 133.5 329 L 124.5 319 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 365.5 320 L 364.5 322 L 365.5 320 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 363.5 323 L 362.5 325 L 363.5 323 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 360.5 327 L 358.5 330 L 360.5 327 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 136.5 330 L 138.5 333 L 136.5 330 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 356.5 332 L 353.5 336 L 356.5 332 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 350.5 339 L 343.5 347 L 350.5 339 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 169.5 345 L 172 345.5 L 169.5 346 L 169.5 345 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 176.5 346 L 180 346.5 L 176.5 347 L 176.5 346 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 179.5 348 L 177.5 351 L 179.5 348 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 339.5 350 L 331.5 359 L 339.5 350 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 175.5 351 L 173.5 354 L 175.5 351 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 171.5 354 L 170.5 356 L 171.5 354 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 168.5 356 L 167.5 358 L 168.5 356 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 327.5 361 L 325.5 364 L 327.5 361 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 322.5 365 L 320.5 368 L 322.5 365 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 317.5 369 L 316.5 371 L 317.5 369 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 313.5 372 L 312.5 374 L 313.5 372 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 310.5 374 L 309.5 376 L 310.5 374 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 307.5 376 L 306.5 378 L 307.5 376 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 118.5 377 L 121 377.5 L 118.5 378 L 118.5 377 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 304.5 378 L 303.5 380 L 304.5 378 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 107.5 379 L 111 379.5 L 107.5 380 L 107.5 379 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 73.5 380 L 78 380.5 L 73.5 381 L 73.5 380 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 97.5 380 L 104 380.5 L 97.5 381 L 97.5 380 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 73.5 382 L 74.5 384 L 73.5 382 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 294.5 384 L 293.5 386 L 294.5 384 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 78.5 385 L 79.5 387 L 78.5 385 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 231.5 408 L 234 408.5 L 231.5 409 L 231.5 408 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 143.5 409 L 146 409.5 L 143.5 410 L 143.5 409 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 226.5 409 L 229 409.5 L 226.5 410 L 226.5 409 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 148.5 410 L 151 410.5 L 148.5 411 L 148.5 410 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 154.5 411 L 159 411.5 L 154.5 412 L 154.5 411 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 213.5 411 L 217 411.5 L 213.5 412 L 213.5 411 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 163.5 412 L 168 412.5 L 163.5 413 L 163.5 412 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 203.5 412 L 209 412.5 L 203.5 413 L 203.5 412 Z " /><path fill="rgb(217,236,251)" stroke="rgb(217,236,251)" stroke-width="1" opacity="1" d="M 178.5 413 L 196 413.5 L 178.5 414 L 178.5 413 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 330.5 108 L 333 108.5 L 330.5 109 L 330.5 108 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 374.5 123 L 375.5 125 L 374.5 123 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 97.5 126 L 99.5 129 L 97.5 126 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 379.5 127 L 384.5 133 L 379.5 127 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 421.5 136 L 420.5 138 L 421.5 136 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 118.5 147 L 119.5 149 L 118.5 147 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 410.5 147 L 409.5 149 L 410.5 147 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 123.5 151 L 124.5 153 L 123.5 151 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 400.5 155 L 401.5 157 Q 398.7 157.7 400.5 155 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 431.5 160 L 423.5 169 L 431.5 160 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 416.5 174 L 414.5 177 L 416.5 174 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 409.5 180 L 408.5 182 L 409.5 180 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 405.5 184 L 406 189.5 L 405 189.5 L 405.5 184 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 405.5 196 L 406 199.5 L 405 199.5 L 405.5 196 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 103.5 210 L 104.5 212 L 103.5 210 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 98.5 263 L 99.5 265 L 98.5 263 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 109.5 274 L 110.5 276 L 109.5 274 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 144.5 291 L 143.5 293 L 144.5 291 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 117.5 294 L 120 294.5 L 117.5 295 L 117.5 294 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 123.5 317 L 124.5 319 L 123.5 317 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 366.5 318 L 365.5 320 L 366.5 318 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 361.5 325 L 360.5 327 L 361.5 325 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 134.5 328 L 135.5 330 L 134.5 328 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 357.5 330 L 356.5 332 L 357.5 330 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 352.5 336 L 350.5 339 L 352.5 336 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 180.5 346 Q 183.5 347.5 180.5 349 L 180.5 346 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 342.5 347 L 340.5 350 L 342.5 347 Z " /><path fill="rgb(254,255,255)" stroke="rgb(254,255,255)" stroke-width="1" opacity="1" d="M 330.5 358 L 328.5 361 L 330.5 358 Z " /><path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" opacity="1" d="M 327.5 108 L 345.5 110 L 360.5 115 Q 374.8 121.7 384.5 133 L 386.5 133 Q 411.7 125.4 433 115 L 427 129.5 L 411.5 147 L 400 155 Q 398.9 157.7 401.5 157 L 429.5 151 L 441.5 146 L 442 147.5 L 438 153.5 L 417.5 174 L 405 184.5 L 406 195.5 L 405 196.5 L 404 222.5 L 401 239.5 Q 395.8 262.8 387 282.5 Q 366.3 327.3 331.5 358 Q 302 384.5 261.5 400 L 242.5 406 L 219.5 411 L 202.5 412 L 201.5 413 L 169.5 413 L 168.5 412 L 152.5 411 L 125.5 405 Q 94.7 396.3 71 380.5 L 72.5 381 L 104.5 381 L 128.5 376 Q 159.9 366.4 182 347.5 L 180.5 346 L 168.5 345 L 152.5 340 Q 135.9 332.6 125 319.5 Q 116.2 308.8 111 294.5 L 116.5 294 L 117.5 295 L 129.5 295 L 130.5 294 L 143.5 293 L 145 291.5 Q 128.8 287.7 116.5 280 L 100 265.5 Q 90.5 254.5 86 238.5 L 84 227.5 L 84 216.5 L 85.5 217 L 104.5 224 L 116.5 225 L 105 212.5 Q 94.5 201 88 185.5 L 84 169.5 L 84 151.5 Q 86.8 135.3 94.5 124 L 97 125.5 L 106 137 L 133.5 160 Q 152.6 173.9 175.5 184 Q 194.9 192.6 217.5 198 L 245.5 203 L 254 203 L 252 193.5 L 252 176.5 Q 257.6 143.1 279.5 126 Q 290.2 117.2 304.5 112 L 327.5 108 Z " /></svg>
</body>
</html>

0

在我所工作的许多涉及CMS的网站上，文件管理器并不能很好地处理SVG。如果我想将SVG图标或元素存储在文件管理器中，它会被视为图像，并且通常使用img标签输出，限制了我想要添加的任何样式，例如填充和描边颜色或动画。因此，我创建了一个JavaScript函数，可以运行通过页面并将那些img标签转换为内联svg：

更多信息：supportingainain

const convertImages = (query, callback) => {
  const images = document.querySelectorAll(query);

  images.forEach(image => {
    fetch(image.src)
      .then(res => res.text())
      .then(data => {
        const parser = new DOMParser();
        const svg = parser.parseFromString(data, 'image/svg+xml').querySelector('svg');

        if (image.id) svg.id = image.id;
        if (image.className) svg.classList = image.classList;

        image.parentNode.replaceChild(svg, image);
      })
      .then(callback)
      .catch(error => console.error(error))
  });
}

这是一个非常简单的函数，它接受查询和回调作为参数。您只需要使用要转换的图像的查询调用该函数，它将循环遍历每个图像，获取SVG并使用DOMParser从文件中提取SVG数据。之后，它将id和class属性从图像复制到SVG变量，并用SVG数据替换图像。

注意：您可以在此处查看其操作，您会注意到HTML仅具有图像标记，但如果您检查页面，则已用内联SVG替换了它。现在，您可以随心所欲地处理图形！

请随意根据您的需求进行编辑，可以复制更多内容而不仅仅是id和class属性，并且最好在获取数据之前测试和检查元素以确保它们是img标记。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接