Menu
How to convert png image to inline svg, by inline svg I mean the html tags paths, polygons, rects, circle etc I dont want the svg file as I want to apply css to these elements. Thanks
976
You can convert a PNG image to SVG by uploading the PNG image to the website below;
**1)**https://convertio.co/png-svg/
But these websites will only give svg paths without any coloring. You have to use fill property of CSS to color the paths of SVG. To explain this I will discuss the following example with you;
I used first website to get following save path and fill it with red color;
<!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>
**output1:**https://jsfiddle.net/defenderkhan/0bsLdqfp/
If you are not getting some SVG paths from one website then you can use both websites to get different SVG paths and then you can color them as follow;
<!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/
Note: The color filling CSS code will become more difficult as you will convert more color full image.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
