Question

如何通过在线svg将png图像转换为在线svg，我的意思是html标记路径，多边形，矩形，圆形等我不想要svg文件，因为我想将CSS应用于这些元素。谢谢

Answer 1

您可以通过将png图像上传到以下网站来将png图像转换为svg；

2） https://www.online-convert.com/result/aa4618de-3d0b-4374-9768-b7c41fca86f2

但是这些网站只会提供svg路径，而不会带有任何颜色。您必须使用 css 的 fill 属性为svg的路径着色。为了解释这一点，我将与您讨论以下示例；

我使用第一个网站来获取sav路径并用红色填充它；

    <!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路径，然后可以按如下所示对其进行着色；

<!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>

输出2： https://jsfiddle.net/defenderkhan/t1279pv8/

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

如何将png图像转换为嵌入式svg

1 个答案: