Cara Konversi Gambar Biasa (JPG / PNG) Menjadi Format SVG

By Posted on

Cara convert dan mengubah gambar ekstensi JPG, JPEG, dan PNG ke dalam format SVG secara gratis dan mudah. Disertai cara mengatur tampilan ikon SVG.

Cara Ganti Gambar Biasa JPG PNG Jadi SVG

Sejak blog Igniel menggunakan ikon SVG (Scalable Vector Graphics) sebagai logo blog, mulai bermunculan pertanyaan dari pembaca tentang bagaimana cara convert gambar JPG atau PNG menjadi icon SVG. Saya paham sih kenapa banyak yang ingin coba pakai ikon SVG menjadi logo. Ini karena gambar berformat SVG memiliki kelebihan tersendiri.

Kelebihan Gambar Format SVG

Beberapa kelebihan menggunakan ikon atau gambar berformat SVG untuk blog antara lain:

  1. Lebih ringan.
  2. Lebih mudah di-styling melalui CSS, baik dari segi ukuran maupun warna.
  3. Ekstensi .svg tidak terbaca sebagai aset gambar oleh situs pengecek performa blog seperti GTMetrix, PageSpeed Insight, Tools Pingdom, dan lainnya. Ikon bisa langsung dimuat dan tidak mengurangi kecepatan loading halaman meskipun tanpa script lazy load gambar. Ini menjadikan skor blog sedikit lebih baik saat dicek menggunakan situs-situs tersebut. Meski sebenarnya nilai yang mereka berikan tidak perlu diagungkan berlebihan selama kecepatan loading halaman masih di bawah 2,5 detik. [1]

Hal yang Perlu Diperhatikan Sebelum Konversi Gambar ke Format SVG

Gambar yang akan dikonversi bukanlah gambar kompleks seperti foto pemandangan, potret diri sendiri, atau sebagainya. Gambar haruslah sederhana dan sebisa mungkin terdiri dari maksimal 3 warna saja, bahkan 1 warna lebih baik. Semakin kompleks gambarnya, semakin panjang pula kode SVG yang dihasilkan. Belum lagi styling pun akan lebih sulit.

Header blog menjadi tempat yang cocok untuk meletakkan gambar atau ikon berformat SVG karena biasanya di sanalah logo blog ditempatkan, dan logo blog biasanya hanya berupa vektor sederhana.

Jadi, siapkanlah sebuah gambar yang sesuai dengan penjelasan barusan.

Cara Ubah Gambar JPG / PNG ke Format SVG

Cara untuk mengubah gambar biasa menjadi ikon SVG sangatlah mudah. Kita hanya perlu memanfaatkan alat konversi gratis yang banyak tersedia di internet. Yang saya sering pakai adalah situs Convertio yang beralamat di:

https://convertio.co/

1. Langkah-langkah Konversi Gambar ke SVG

  1. Buka situs Convertio yang alamatnya sudah disebutkan di atas.
  2. Klik Choose Files lalu pilih gambar yang akan dikonversi. Pada kotak di sampingnya, plih SVG. Setelah itu klik tombol Convert.
    3. Cara Convert Gambar Biasa Ke SVG
  3. Setelah menunggu beberapa detik, proses konversi pun selesai. Klik tombol Download untuk mendapatkan gambar hasil konversi yang terlah berubah menjadi format SVG.
    Cara Ganti Gambar JPG PNG Jadi SVG

2. Cara Membuka Gambar SVG Untuk Melihat Kodenya

SVG adalah grafik atau vektor yang dibentuk dari sekumpulan kode XML yang dirender oleh browser untuk ditampilkan menjadi gambar, jadi kita bisa melihat kode sumber (source code) aslinya.

Gambar yang telah berhasil dikonversi masih perlu diedit sedikit untuk menghilangkan bagian yang kurang perlu agar kodenya lebih pendek lagi.

  1. Pada folder di komputer, klik kanan pada file hasil download lalu buka menggunakan aplikasi text editor seperti Notepad, Visual Studio Code (VS Code), Sublime Text, atau sejenisnya.
    Cara Membuat Ikon SVG Dari Gambar Biasa
  2. PENTING! Pada beberapa kasus, hasil download dapat berupa file kompres .zip atau .rar. Lakukan ekstrak dan di dalamnya akan terdapat beberapa buah file SVG yang memiliki kualitas berbeda. Biasanya file paling akhir yang memiliki kualitas paling baik dan jernih.
  3. Inilah contoh kode dari gambar SVG yang berhasil dikonversi. HAPUS bagian yang ditandai. Jika kode tersebut memang tidak ada, berarti lewati saja. 
    <?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="3551.000000pt" height="3833.000000pt" viewBox="0 0 3551.000000 3833.000000" preserveAspectRatio="xMidYMid meet">  
  <g transform="translate(0.000000,3833.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <path d="M18343 37823 c-1109 -1382 -993 -1243 -1022 -1228 -103 52 -282 73 -401 46 -175 -41 -334 -167 -409 -324 -50 -105 -62 -158 -62 -271 1 -343 264 -606 606 -606 169 0 304 57 426 179 132 132 184 267 176 456 -5 121 -30 206 -88 297 l-31 48 363 453 c200 248 500 622 666 830 l304 377 636 0 c507 0 634 -3 626 -12 -58 -75 -1840 -2318 -1853 -2331 -17 -18 -19 -18 -67 6 -87 44 -160 61 -268 61 -171 0 -310 -58 -430 -178 -120 -121 -177 -260 -176 -430 1 -164 53 -295 163 -411 114 -120 245 -183 404 -192 182 -11 336 47 464 176 125 125 180 257 180 431 0 104 -19 182 -65 274 -19 38 -31 74 -27 81 4 7 457 577 1006 1268 l1000 1257 629 0 c374 0 627 -4 625 -9 -6 -19 -2621 -3133 -2634 -3138 -8 -3 -35 2 -61 12 -75 26 -216 31 -306 11 -181 -41 -337 -163 -415 -326 -52 -108 -66 -183 -59 -308 6 -120 32 -199 99 -298 116 -173 293 -268 503 -268 171 0 310 58 430 178 120 121 178 262 177 431 -1 142 -49 281 -129 374 l-33 40 597 715 c329 393 601 714 605 713 4 -1 138 -206 299 -456 l292 -453 -7 -572 c-3 -314 -9 -646 -12 -737 l-7 -166 -1099 -1369 c-605 -753 -1206 -1501 -1336 -1663 -130 -162 -942 -1143 -1804 -2180 l-1568 -1886 0 -1252 0 -1253 -1447 -2 -1448 -3 0 -4810 0 -4810 1453 -3 1452 -2 0 -680 0 -680 -2906 2 -2906 3 -17 55 c-63 202 -232 363 -436 415 -76 19 -214 19 -290 0 -225 -57 -403 -241 -450 -462 -20 -94 -19 -186 5 -277 29 -116 73 -190 165 -281 86 -86 162 -131 270 -160 78 -21 232 -21 309 0 190 51 360 209 418 387 l22 68 3033 0 3033 0 0 805 0 805 475 0 475 0 0 -1220 0 -1220 -3108 0 -3107 0 -18 49 c-26 75 -65 138 -124 201 -71 77 -148 127 -253 164 -73 25 -100 30 -190 30 -116 0 -184 -15 -281 -65 -132 -66 -244 -196 -298 -342 -22 -63 -26 -88 -26 -197 0 -137 11 -184 69 -295 45 -87 163 -202 253 -247 355 -178 783 18 873 400 l12 52 3224 0 3224 0 0 1345 0 1345 420 0 421 0 -7 -1340 -7 -1340 126 0 127 0 0 643 c0 353 3 956 7 1339 l6 698 469 0 468 0 0 -1345 0 -1345 3255 0 3254 0 10 -37 c6 -21 11 -43 11 -49 0 -31 88 -181 137 -234 143 -155 364 -228 563 -186 288 60 490 305 490 593 0 110 -14 172 -62 273 -77 162 -238 288 -415 325 -140 30 -289 9 -416 -57 -121 -63 -263 -233 -292 -351 l-7 -27 -3139 0 -3139 0 0 1220 0 1220 475 0 475 0 0 -815 0 -815 3065 0 c2911 0 3066 -1 3071 -18 3 -9 24 -54 46 -100 97 -198 286 -319 513 -330 272 -13 507 145 602 406 34 90 42 239 19 336 -49 206 -207 377 -410 442 -100 32 -236 36 -335 10 -207 -54 -379 -224 -437 -434 l-17 -62 -2934 0 -2933 0 0 690 0 690 1380 0 1380 0 0 925 0 924 1235 1407 1235 1407 0 1599 0 1598 -1235 0 -1235 0 0 885 0 885 -1378 0 -1379 0 -6 1328 c-4 730 -7 1600 -7 1935 l0 607 523 0 523 0 1615 1936 c888 1065 1623 1947 1634 1960 l20 24 90 -45 c115 -58 210 -79 324 -71 156 12 289 74 395 186 75 80 107 133 142 236 55 161 29 367 -64 510 -252 388 -823 371 -1047 -31 -95 -169 -98 -370 -11 -575 4 -11 -485 -605 -1604 -1948 l-1610 -1932 -869 0 -868 0 -901 -1142 -901 -1143 -1 -1042 0 -1043 125 0 125 0 0 998 0 998 453 574 452 574 3 -1577 2 -1577 125 0 125 0 0 1739 0 1738 257 327 257 326 218 0 218 0 0 -528 c0 -291 3 -1218 7 -2060 l6 -1532 1379 0 1378 0 0 -4565 0 -4565 -5047 2 -5048 3 0 4560 0 4560 1448 3 1447 2 0 1333 0 1332 1521 1830 1521 1830 824 1 c453 0 826 3 827 5 183 226 4335 5310 4346 5322 16 17 19 17 72 -7 162 -75 358 -75 515 0 165 78 290 233 335 414 19 76 16 221 -5 295 -61 209 -232 378 -437 431 -39 11 -101 17 -159 17 -224 -2 -426 -124 -529 -322 -50 -96 -71 -180 -71 -286 0 -101 19 -178 69 -278 l39 -77 -386 -475 c-213 -261 -390 -474 -393 -475 -4 0 -5 361 -2 803 l5 802 -727 880 c-399 484 -746 904 -771 933 l-45 52 -1649 0 -1649 0 -408 -507z m4330 -639 l669 -809 -6 -918 -6 -919 -458 -560 -457 -560 -5 1204 -5 1203 -515 713 c-283 392 -515 716 -515 721 0 15 610 740 620 737 6 -1 311 -367 678 -812z m-989 -788 l476 -659 0 -1316 0 -1316 -1045 -1279 -1044 -1279 -658 2 c-362 1 -658 3 -659 4 -1 1 441 553 983 1227 541 674 1117 1390 1279 1592 l295 368 12 812 13 813 -324 505 c-179 278 -329 511 -335 518 -7 9 -13 9 -23 1 -8 -6 -14 -8 -14 -5 0 9 561 678 565 674 2 -2 217 -299 479 -662z m3333 94 c183 -84 262 -306 171 -484 -31 -60 -105 -133 -167 -163 -49 -25 -68 -28 -151 -28 -82 0 -103 4 -151 26 -79 37 -133 90 -171 167 -30 61 -33 75 -33 162 0 85 3 101 29 153 90 177 294 249 473 167z m-7830 -112 c71 -26 155 -104 190 -176 25 -51 28 -68 28 -157 0 -120 -21 -171 -100 -250 -79 -79 -130 -100 -250 -100 -89 0 -106 3 -156 28 -220 108 -270 403 -98 576 103 102 244 131 386 79z m907 -856 c75 -36 137 -96 173 -170 25 -51 28 -68 28 -157 0 -95 -2 -103 -34 -163 -41 -75 -94 -125 -170 -161 -47 -22 -70 -26 -146 -26 -77 0 -98 4 -147 27 -256 120 -287 463 -55 622 105 72 235 82 351 28z m898 -834 c310 -142 270 -589 -61 -674 -124 -31 -254 8 -344 105 -75 80 -92 127 -92 246 0 90 3 105 27 152 52 97 121 156 221 189 65 21 181 13 249 -18z m6032 -1867 c265 -130 267 -511 3 -641 -182 -89 -394 -16 -485 169 -24 49 -27 68 -27 151 0 85 3 101 29 155 47 95 138 170 240 196 17 5 63 7 103 5 57 -2 86 -10 137 -35z m146 -12048 l-1 -1428 -1005 -1145 c-553 -630 -1053 -1198 -1110 -1263 l-104 -118 0 2690 0 2691 1110 0 1110 0 0 -1427z m1627 -7325 c70 -26 151 -101 188 -175 27 -52 30 -68 30 -153 0 -87 -3 -101 -33 -162 -38 -77 -92 -130 -171 -167 -48 -22 -69 -26 -151 -26 -83 0 -102 3 -151 28 -69 33 -142 110 -174 180 -76 170 -9 369 154 456 103 55 198 61 308 19z m-17816 -1 c112 -47 187 -133 216 -251 38 -156 -34 -319 -176 -395 -184 -98 -401 -30 -492 154 -119 242 52 515 321 515 55 0 90 -6 131 -23z m764 -1112 c183 -48 300 -229 265 -410 -23 -118 -97 -211 -208 -263 -49 -23 -70 -27 -147 -27 -77 0 -98 4 -147 27 -73 34 -142 103 -176 176 -23 49 -27 70 -27 152 0 114 18 162 92 241 95 102 216 138 348 104z m16255 -17 c77 -36 131 -86 170 -160 29 -54 35 -75 38 -148 4 -97 -15 -165 -68 -237 -59 -80 -187 -143 -291 -143 -59 0 -160 37 -214 78 -54 41 -109 122 -126 187 -16 57 -13 157 5 213 33 99 132 194 235 227 70 22 183 15 251 -17z"/>
    <path d="M24785 34943 c-161 -21 -325 -123 -418 -260 -141 -205 -141 -479 -1 -694 l17 -25 -1867 -2275 -1866 -2274 -147 -6 c-82 -4 -465 -7 -853 -8 l-705 -2 -1242 -1550 -1243 -1551 0 -1169 0 -1169 125 0 125 0 0 1125 0 1126 1178 1469 1177 1469 605 2 c333 1 716 5 852 8 l246 6 1902 2318 c1477 1799 1906 2317 1919 2311 146 -62 278 -78 404 -50 186 42 342 164 421 331 46 95 60 162 59 275 -1 169 -69 320 -199 439 -130 119 -315 177 -489 154z m219 -273 c68 -26 152 -103 184 -171 88 -183 16 -392 -166 -481 -60 -30 -75 -33 -157 -33 -79 0 -97 3 -149 29 -33 16 -80 49 -104 73 -24 24 -56 70 -70 101 -23 49 -27 70 -27 152 0 76 4 104 22 142 44 95 149 182 250 208 54 13 150 4 217 -20z"/>
    <path d="M783 8046 c-136 -45 -216 -109 -302 -240 -63 -97 -91 -179 -98 -286 -15 -241 124 -450 346 -521 140 -46 324 -24 444 53 71 46 169 157 210 240 86 174 89 333 9 498 -52 105 -115 166 -236 226 -96 47 -101 49 -200 51 -85 3 -113 -1 -173 -21z"/>
    <path d="M11243 8055 c-135 -38 -242 -117 -324 -243 -87 -133 -119 -256 -100 -394 26 -197 161 -361 344 -420 87 -29 237 -28 328 1 134 43 252 149 324 290 45 90 65 172 65 267 0 97 -16 160 -65 252 -50 95 -113 152 -232 210 -92 44 -101 47 -192 49 -62 2 -115 -2 -148 -12z"/>
    <path d="M16984 7933 c21 -198 25 -690 26 -2653 0 -1374 4 -2194 10 -2262 20 -212 86 -396 198 -554 64 -91 187 -190 307 -250 142 -70 190 -79 405 -78 206 1 279 13 378 63 132 67 263 258 296 432 19 95 31 259 22 294 l-7 26 -37 -29 c-71 -56 -152 -82 -255 -82 -113 0 -226 92 -269 218 l-23 67 -5 2090 -5 2090 -24 85 c-48 172 -125 302 -234 391 -74 60 -233 140 -338 168 -101 28 -265 51 -368 51 l-84 0 7 -67z"/>
    <path d="M3887 6185 c-206 -29 -390 -86 -587 -185 -423 -212 -714 -564 -805 -975 -24 -107 -30 -369 -11 -490 47 -309 159 -520 409 -769 l139 -139 -50 -43 c-63 -55 -176 -189 -239 -284 -251 -379 -363 -844 -324 -1345 23 -295 51 -453 116 -652 81 -246 243 -536 403 -718 248 -284 643 -495 1048 -561 131 -21 375 -23 514 -5 108 15 321 67 431 107 453 163 783 526 864 950 22 114 29 285 16 411 -32 312 -136 522 -342 687 -155 124 -315 202 -509 250 -418 102 -858 79 -1468 -75 -67 -18 -126 -29 -129 -25 -12 12 17 254 41 349 49 190 112 304 232 416 85 79 200 141 309 167 39 9 129 20 200 25 328 21 496 53 715 136 136 51 212 91 346 182 250 168 390 322 507 556 106 214 143 370 141 610 -3 371 -117 655 -367 912 -164 169 -273 251 -459 344 -170 85 -378 144 -603 169 -124 14 -419 11 -538 -5z m436 -714 c178 -46 292 -141 381 -320 50 -97 74 -197 82 -334 16 -274 -46 -484 -188 -633 -112 -117 -256 -177 -428 -177 -242 0 -431 115 -535 326 -70 143 -79 191 -80 412 0 220 9 264 80 412 80 163 217 277 381 317 87 21 217 20 307 -3z m242 -3665 c188 -55 302 -131 357 -240 73 -144 91 -253 64 -386 -22 -106 -61 -182 -132 -259 -46 -50 -76 -71 -158 -111 -131 -64 -218 -82 -406 -83 -177 -1 -244 14 -388 85 -73 37 -123 70 -172 115 -103 95 -201 258 -253 418 -23 72 -87 329 -87 351 0 13 133 49 310 84 251 49 363 60 580 55 174 -3 205 -6 285 -29z"/>
    <path d="M7910 6105 c-446 -57 -736 -181 -975 -420 -204 -203 -360 -493 -421 -780 -38 -177 -45 -275 -54 -685 -14 -678 -12 -1179 5 -1293 34 -228 119 -382 275 -502 164 -126 368 -188 689 -210 l94 -7 -6 39 c-21 126 -32 619 -32 1443 0 992 0 1000 67 1189 86 244 191 382 349 460 120 58 215 75 398 69 131 -4 156 -8 239 -36 203 -69 323 -188 416 -413 19 -47 44 -119 55 -160 45 -165 46 -203 43 -1004 -4 -830 -1 -879 53 -1042 87 -258 319 -441 645 -507 72 -15 348 -41 355 -34 4 4 -21 1838 -29 2163 -11 410 -61 655 -184 902 -239 474 -608 724 -1212 819 -148 23 -614 28 -770 9z"/>
    <path d="M14416 6104 c-342 -46 -679 -203 -954 -444 -185 -162 -355 -417 -467 -700 -178 -447 -202 -1000 -64 -1444 126 -406 322 -717 598 -948 398 -333 824 -475 1313 -438 496 37 923 228 1261 563 55 55 95 103 89 105 -7 2 -30 30 -52 62 -52 76 -120 136 -200 174 -54 26 -80 32 -152 34 -103 5 -162 -7 -283 -53 -332 -128 -686 -194 -885 -165 -149 21 -268 71 -376 158 -117 94 -264 325 -313 490 -23 76 -64 302 -56 310 2 3 76 -9 162 -26 214 -42 355 -54 638 -55 427 -1 697 51 984 189 143 68 253 142 354 234 183 170 264 353 274 625 11 253 -36 452 -151 640 -219 361 -654 617 -1175 689 -136 19 -406 19 -545 0z m631 -729 c97 -33 156 -70 222 -140 75 -79 104 -148 109 -261 7 -161 -49 -320 -142 -400 -46 -39 -173 -107 -254 -135 -132 -46 -441 -71 -622 -50 -146 17 -321 48 -412 72 l-76 21 5 36 c22 143 95 357 162 474 116 202 270 324 493 387 155 45 374 43 515 -4z"/>
    <path d="M22566 6104 c-358 -48 -693 -212 -984 -479 -140 -129 -335 -420 -425 -635 -189 -450 -218 -1018 -76 -1474 118 -380 307 -691 546 -898 428 -371 865 -527 1372 -488 488 36 918 229 1252 561 l100 100 -18 31 c-35 63 -155 173 -228 209 -68 33 -72 34 -195 33 -117 0 -132 -3 -230 -36 -58 -20 -165 -57 -238 -82 -233 -80 -502 -119 -659 -96 -106 16 -244 63 -308 106 -194 128 -342 348 -410 608 -73 279 -84 713 -25 1020 55 285 183 519 364 664 91 73 122 90 236 128 80 27 94 29 255 28 157 0 181 -2 305 -32 74 -18 194 -53 265 -78 291 -103 342 -116 455 -117 l105 -2 91 48 c100 52 109 60 182 163 l50 71 -96 95 c-121 118 -170 158 -302 244 -260 170 -525 269 -829 309 -132 18 -422 18 -555 -1z"/>
    <path d="M26466 6105 c-573 -82 -1057 -426 -1329 -946 -146 -278 -215 -527 -239 -871 -27 -384 42 -747 207 -1086 135 -278 306 -495 531 -676 165 -132 389 -254 590 -322 327 -110 772 -105 1119 11 481 160 843 487 1076 970 135 280 199 583 199 939 -1 296 -46 524 -159 804 -93 231 -224 430 -406 621 -177 184 -336 300 -559 406 -143 69 -242 103 -393 136 -129 27 -487 36 -637 14z m456 -729 c109 -28 169 -56 253 -119 205 -154 339 -399 396 -723 27 -153 37 -479 20 -660 -33 -362 -153 -642 -352 -829 -98 -93 -163 -130 -289 -167 -161 -46 -285 -42 -451 18 -294 106 -525 460 -578 889 -30 237 -24 550 15 770 49 284 185 536 368 683 88 70 123 90 216 120 152 50 258 55 402 18z"/>
    <path d="M30790 6114 c-326 -37 -503 -82 -705 -179 -149 -72 -251 -142 -349 -239 -195 -191 -347 -460 -416 -732 -57 -229 -60 -274 -72 -1120 -10 -710 -10 -792 5 -896 30 -202 90 -340 197 -449 178 -180 392 -260 763 -284 l98 -6 -5 23 c-28 131 -31 269 -31 1293 0 1192 -3 1145 76 1380 73 221 180 356 339 433 109 52 208 72 360 72 260 0 449 -78 577 -239 87 -110 166 -302 200 -486 17 -92 18 -158 15 -871 -2 -659 0 -787 13 -877 29 -193 90 -331 195 -438 174 -178 397 -260 772 -284 l98 -6 -5 28 c-39 236 -47 509 -43 1453 4 802 6 916 21 999 31 165 102 346 186 470 78 115 223 205 380 237 105 21 343 15 436 -11 290 -81 473 -332 537 -737 10 -64 12 -255 10 -843 -3 -830 0 -891 54 -1055 106 -319 392 -495 862 -530 80 -6 146 -10 147 -8 1 2 -4 50 -12 108 -11 83 -16 339 -23 1205 -9 1164 -9 1165 -59 1391 -28 128 -64 231 -128 359 -75 152 -152 263 -259 375 -236 246 -518 377 -964 447 -178 28 -643 25 -835 -5 -372 -59 -571 -134 -795 -303 l-80 -60 -85 63 c-218 164 -433 246 -780 298 -120 19 -200 24 -405 25 -140 2 -271 1 -290 -1z"/>
    <path d="M1205 6029 c-126 -16 -266 -58 -375 -111 -89 -44 -118 -65 -191 -138 -64 -63 -96 -104 -123 -157 -47 -94 -82 -216 -95 -333 -15 -143 -26 -2191 -11 -2305 32 -258 119 -442 288 -611 97 -98 242 -178 397 -219 81 -22 280 -30 385 -16 173 23 270 74 371 194 122 145 169 287 169 516 l0 125 -32 -31 c-70 -66 -174 -99 -285 -90 -136 11 -231 109 -263 272 -16 82 -8 2652 9 2770 6 44 13 95 15 113 l5 32 -97 -1 c-53 -1 -128 -5 -167 -10z"/>
    <path d="M11685 6033 c-267 -32 -459 -107 -601 -237 -109 -99 -175 -224 -217 -411 -19 -86 -20 -142 -27 -1175 -5 -656 -5 -1127 1 -1192 31 -352 214 -649 482 -782 179 -89 297 -113 502 -103 236 12 352 64 472 215 71 88 120 189 137 282 18 95 31 271 22 305 l-7 26 -37 -29 c-70 -56 -152 -82 -251 -82 -65 0 -106 15 -170 62 -68 51 -106 128 -122 245 -8 58 -9 456 -6 1345 4 1066 7 1283 21 1393 8 72 16 133 16 138 0 7 -156 8 -215 0z"/>
    <path d="M19673 3195 c-185 -50 -321 -190 -393 -404 -15 -46 -21 -88 -21 -151 0 -197 71 -329 235 -437 128 -85 226 -106 362 -78 212 44 362 177 434 386 25 70 30 100 30 180 0 137 -36 239 -122 351 -34 44 -160 125 -232 150 -63 21 -218 23 -293 3z"/>
  </g>
</svg>
  4. Maka hasil akhirnya akan seperti ini. 
    <svg viewBox="0 0 3551.000000 3833.000000">  
  <g transform="translate(0.000000,3833.000000) scale(0.100000,-0.100000)">
    <path d="M18343 37823 c-1109 -1382 -993 -1243 -1022 -1228 -103 52 -282 73 -401 46 -175 -41 -334 -167 -409 -324 -50 -105 -62 -158 -62 -271 1 -343 264 -606 606 -606 169 0 304 57 426 179 132 132 184 267 176 456 -5 121 -30 206 -88 297 l-31 48 363 453 c200 248 500 622 666 830 l304 377 636 0 c507 0 634 -3 626 -12 -58 -75 -1840 -2318 -1853 -2331 -17 -18 -19 -18 -67 6 -87 44 -160 61 -268 61 -171 0 -310 -58 -430 -178 -120 -121 -177 -260 -176 -430 1 -164 53 -295 163 -411 114 -120 245 -183 404 -192 182 -11 336 47 464 176 125 125 180 257 180 431 0 104 -19 182 -65 274 -19 38 -31 74 -27 81 4 7 457 577 1006 1268 l1000 1257 629 0 c374 0 627 -4 625 -9 -6 -19 -2621 -3133 -2634 -3138 -8 -3 -35 2 -61 12 -75 26 -216 31 -306 11 -181 -41 -337 -163 -415 -326 -52 -108 -66 -183 -59 -308 6 -120 32 -199 99 -298 116 -173 293 -268 503 -268 171 0 310 58 430 178 120 121 178 262 177 431 -1 142 -49 281 -129 374 l-33 40 597 715 c329 393 601 714 605 713 4 -1 138 -206 299 -456 l292 -453 -7 -572 c-3 -314 -9 -646 -12 -737 l-7 -166 -1099 -1369 c-605 -753 -1206 -1501 -1336 -1663 -130 -162 -942 -1143 -1804 -2180 l-1568 -1886 0 -1252 0 -1253 -1447 -2 -1448 -3 0 -4810 0 -4810 1453 -3 1452 -2 0 -680 0 -680 -2906 2 -2906 3 -17 55 c-63 202 -232 363 -436 415 -76 19 -214 19 -290 0 -225 -57 -403 -241 -450 -462 -20 -94 -19 -186 5 -277 29 -116 73 -190 165 -281 86 -86 162 -131 270 -160 78 -21 232 -21 309 0 190 51 360 209 418 387 l22 68 3033 0 3033 0 0 805 0 805 475 0 475 0 0 -1220 0 -1220 -3108 0 -3107 0 -18 49 c-26 75 -65 138 -124 201 -71 77 -148 127 -253 164 -73 25 -100 30 -190 30 -116 0 -184 -15 -281 -65 -132 -66 -244 -196 -298 -342 -22 -63 -26 -88 -26 -197 0 -137 11 -184 69 -295 45 -87 163 -202 253 -247 355 -178 783 18 873 400 l12 52 3224 0 3224 0 0 1345 0 1345 420 0 421 0 -7 -1340 -7 -1340 126 0 127 0 0 643 c0 353 3 956 7 1339 l6 698 469 0 468 0 0 -1345 0 -1345 3255 0 3254 0 10 -37 c6 -21 11 -43 11 -49 0 -31 88 -181 137 -234 143 -155 364 -228 563 -186 288 60 490 305 490 593 0 110 -14 172 -62 273 -77 162 -238 288 -415 325 -140 30 -289 9 -416 -57 -121 -63 -263 -233 -292 -351 l-7 -27 -3139 0 -3139 0 0 1220 0 1220 475 0 475 0 0 -815 0 -815 3065 0 c2911 0 3066 -1 3071 -18 3 -9 24 -54 46 -100 97 -198 286 -319 513 -330 272 -13 507 145 602 406 34 90 42 239 19 336 -49 206 -207 377 -410 442 -100 32 -236 36 -335 10 -207 -54 -379 -224 -437 -434 l-17 -62 -2934 0 -2933 0 0 690 0 690 1380 0 1380 0 0 925 0 924 1235 1407 1235 1407 0 1599 0 1598 -1235 0 -1235 0 0 885 0 885 -1378 0 -1379 0 -6 1328 c-4 730 -7 1600 -7 1935 l0 607 523 0 523 0 1615 1936 c888 1065 1623 1947 1634 1960 l20 24 90 -45 c115 -58 210 -79 324 -71 156 12 289 74 395 186 75 80 107 133 142 236 55 161 29 367 -64 510 -252 388 -823 371 -1047 -31 -95 -169 -98 -370 -11 -575 4 -11 -485 -605 -1604 -1948 l-1610 -1932 -869 0 -868 0 -901 -1142 -901 -1143 -1 -1042 0 -1043 125 0 125 0 0 998 0 998 453 574 452 574 3 -1577 2 -1577 125 0 125 0 0 1739 0 1738 257 327 257 326 218 0 218 0 0 -528 c0 -291 3 -1218 7 -2060 l6 -1532 1379 0 1378 0 0 -4565 0 -4565 -5047 2 -5048 3 0 4560 0 4560 1448 3 1447 2 0 1333 0 1332 1521 1830 1521 1830 824 1 c453 0 826 3 827 5 183 226 4335 5310 4346 5322 16 17 19 17 72 -7 162 -75 358 -75 515 0 165 78 290 233 335 414 19 76 16 221 -5 295 -61 209 -232 378 -437 431 -39 11 -101 17 -159 17 -224 -2 -426 -124 -529 -322 -50 -96 -71 -180 -71 -286 0 -101 19 -178 69 -278 l39 -77 -386 -475 c-213 -261 -390 -474 -393 -475 -4 0 -5 361 -2 803 l5 802 -727 880 c-399 484 -746 904 -771 933 l-45 52 -1649 0 -1649 0 -408 -507z m4330 -639 l669 -809 -6 -918 -6 -919 -458 -560 -457 -560 -5 1204 -5 1203 -515 713 c-283 392 -515 716 -515 721 0 15 610 740 620 737 6 -1 311 -367 678 -812z m-989 -788 l476 -659 0 -1316 0 -1316 -1045 -1279 -1044 -1279 -658 2 c-362 1 -658 3 -659 4 -1 1 441 553 983 1227 541 674 1117 1390 1279 1592 l295 368 12 812 13 813 -324 505 c-179 278 -329 511 -335 518 -7 9 -13 9 -23 1 -8 -6 -14 -8 -14 -5 0 9 561 678 565 674 2 -2 217 -299 479 -662z m3333 94 c183 -84 262 -306 171 -484 -31 -60 -105 -133 -167 -163 -49 -25 -68 -28 -151 -28 -82 0 -103 4 -151 26 -79 37 -133 90 -171 167 -30 61 -33 75 -33 162 0 85 3 101 29 153 90 177 294 249 473 167z m-7830 -112 c71 -26 155 -104 190 -176 25 -51 28 -68 28 -157 0 -120 -21 -171 -100 -250 -79 -79 -130 -100 -250 -100 -89 0 -106 3 -156 28 -220 108 -270 403 -98 576 103 102 244 131 386 79z m907 -856 c75 -36 137 -96 173 -170 25 -51 28 -68 28 -157 0 -95 -2 -103 -34 -163 -41 -75 -94 -125 -170 -161 -47 -22 -70 -26 -146 -26 -77 0 -98 4 -147 27 -256 120 -287 463 -55 622 105 72 235 82 351 28z m898 -834 c310 -142 270 -589 -61 -674 -124 -31 -254 8 -344 105 -75 80 -92 127 -92 246 0 90 3 105 27 152 52 97 121 156 221 189 65 21 181 13 249 -18z m6032 -1867 c265 -130 267 -511 3 -641 -182 -89 -394 -16 -485 169 -24 49 -27 68 -27 151 0 85 3 101 29 155 47 95 138 170 240 196 17 5 63 7 103 5 57 -2 86 -10 137 -35z m146 -12048 l-1 -1428 -1005 -1145 c-553 -630 -1053 -1198 -1110 -1263 l-104 -118 0 2690 0 2691 1110 0 1110 0 0 -1427z m1627 -7325 c70 -26 151 -101 188 -175 27 -52 30 -68 30 -153 0 -87 -3 -101 -33 -162 -38 -77 -92 -130 -171 -167 -48 -22 -69 -26 -151 -26 -83 0 -102 3 -151 28 -69 33 -142 110 -174 180 -76 170 -9 369 154 456 103 55 198 61 308 19z m-17816 -1 c112 -47 187 -133 216 -251 38 -156 -34 -319 -176 -395 -184 -98 -401 -30 -492 154 -119 242 52 515 321 515 55 0 90 -6 131 -23z m764 -1112 c183 -48 300 -229 265 -410 -23 -118 -97 -211 -208 -263 -49 -23 -70 -27 -147 -27 -77 0 -98 4 -147 27 -73 34 -142 103 -176 176 -23 49 -27 70 -27 152 0 114 18 162 92 241 95 102 216 138 348 104z m16255 -17 c77 -36 131 -86 170 -160 29 -54 35 -75 38 -148 4 -97 -15 -165 -68 -237 -59 -80 -187 -143 -291 -143 -59 0 -160 37 -214 78 -54 41 -109 122 -126 187 -16 57 -13 157 5 213 33 99 132 194 235 227 70 22 183 15 251 -17z"/>
    <path d="M24785 34943 c-161 -21 -325 -123 -418 -260 -141 -205 -141 -479 -1 -694 l17 -25 -1867 -2275 -1866 -2274 -147 -6 c-82 -4 -465 -7 -853 -8 l-705 -2 -1242 -1550 -1243 -1551 0 -1169 0 -1169 125 0 125 0 0 1125 0 1126 1178 1469 1177 1469 605 2 c333 1 716 5 852 8 l246 6 1902 2318 c1477 1799 1906 2317 1919 2311 146 -62 278 -78 404 -50 186 42 342 164 421 331 46 95 60 162 59 275 -1 169 -69 320 -199 439 -130 119 -315 177 -489 154z m219 -273 c68 -26 152 -103 184 -171 88 -183 16 -392 -166 -481 -60 -30 -75 -33 -157 -33 -79 0 -97 3 -149 29 -33 16 -80 49 -104 73 -24 24 -56 70 -70 101 -23 49 -27 70 -27 152 0 76 4 104 22 142 44 95 149 182 250 208 54 13 150 4 217 -20z"/>
    <path d="M783 8046 c-136 -45 -216 -109 -302 -240 -63 -97 -91 -179 -98 -286 -15 -241 124 -450 346 -521 140 -46 324 -24 444 53 71 46 169 157 210 240 86 174 89 333 9 498 -52 105 -115 166 -236 226 -96 47 -101 49 -200 51 -85 3 -113 -1 -173 -21z"/>
    <path d="M11243 8055 c-135 -38 -242 -117 -324 -243 -87 -133 -119 -256 -100 -394 26 -197 161 -361 344 -420 87 -29 237 -28 328 1 134 43 252 149 324 290 45 90 65 172 65 267 0 97 -16 160 -65 252 -50 95 -113 152 -232 210 -92 44 -101 47 -192 49 -62 2 -115 -2 -148 -12z"/>
    <path d="M16984 7933 c21 -198 25 -690 26 -2653 0 -1374 4 -2194 10 -2262 20 -212 86 -396 198 -554 64 -91 187 -190 307 -250 142 -70 190 -79 405 -78 206 1 279 13 378 63 132 67 263 258 296 432 19 95 31 259 22 294 l-7 26 -37 -29 c-71 -56 -152 -82 -255 -82 -113 0 -226 92 -269 218 l-23 67 -5 2090 -5 2090 -24 85 c-48 172 -125 302 -234 391 -74 60 -233 140 -338 168 -101 28 -265 51 -368 51 l-84 0 7 -67z"/>
    <path d="M3887 6185 c-206 -29 -390 -86 -587 -185 -423 -212 -714 -564 -805 -975 -24 -107 -30 -369 -11 -490 47 -309 159 -520 409 -769 l139 -139 -50 -43 c-63 -55 -176 -189 -239 -284 -251 -379 -363 -844 -324 -1345 23 -295 51 -453 116 -652 81 -246 243 -536 403 -718 248 -284 643 -495 1048 -561 131 -21 375 -23 514 -5 108 15 321 67 431 107 453 163 783 526 864 950 22 114 29 285 16 411 -32 312 -136 522 -342 687 -155 124 -315 202 -509 250 -418 102 -858 79 -1468 -75 -67 -18 -126 -29 -129 -25 -12 12 17 254 41 349 49 190 112 304 232 416 85 79 200 141 309 167 39 9 129 20 200 25 328 21 496 53 715 136 136 51 212 91 346 182 250 168 390 322 507 556 106 214 143 370 141 610 -3 371 -117 655 -367 912 -164 169 -273 251 -459 344 -170 85 -378 144 -603 169 -124 14 -419 11 -538 -5z m436 -714 c178 -46 292 -141 381 -320 50 -97 74 -197 82 -334 16 -274 -46 -484 -188 -633 -112 -117 -256 -177 -428 -177 -242 0 -431 115 -535 326 -70 143 -79 191 -80 412 0 220 9 264 80 412 80 163 217 277 381 317 87 21 217 20 307 -3z m242 -3665 c188 -55 302 -131 357 -240 73 -144 91 -253 64 -386 -22 -106 -61 -182 -132 -259 -46 -50 -76 -71 -158 -111 -131 -64 -218 -82 -406 -83 -177 -1 -244 14 -388 85 -73 37 -123 70 -172 115 -103 95 -201 258 -253 418 -23 72 -87 329 -87 351 0 13 133 49 310 84 251 49 363 60 580 55 174 -3 205 -6 285 -29z"/>
    <path d="M7910 6105 c-446 -57 -736 -181 -975 -420 -204 -203 -360 -493 -421 -780 -38 -177 -45 -275 -54 -685 -14 -678 -12 -1179 5 -1293 34 -228 119 -382 275 -502 164 -126 368 -188 689 -210 l94 -7 -6 39 c-21 126 -32 619 -32 1443 0 992 0 1000 67 1189 86 244 191 382 349 460 120 58 215 75 398 69 131 -4 156 -8 239 -36 203 -69 323 -188 416 -413 19 -47 44 -119 55 -160 45 -165 46 -203 43 -1004 -4 -830 -1 -879 53 -1042 87 -258 319 -441 645 -507 72 -15 348 -41 355 -34 4 4 -21 1838 -29 2163 -11 410 -61 655 -184 902 -239 474 -608 724 -1212 819 -148 23 -614 28 -770 9z"/>
    <path d="M14416 6104 c-342 -46 -679 -203 -954 -444 -185 -162 -355 -417 -467 -700 -178 -447 -202 -1000 -64 -1444 126 -406 322 -717 598 -948 398 -333 824 -475 1313 -438 496 37 923 228 1261 563 55 55 95 103 89 105 -7 2 -30 30 -52 62 -52 76 -120 136 -200 174 -54 26 -80 32 -152 34 -103 5 -162 -7 -283 -53 -332 -128 -686 -194 -885 -165 -149 21 -268 71 -376 158 -117 94 -264 325 -313 490 -23 76 -64 302 -56 310 2 3 76 -9 162 -26 214 -42 355 -54 638 -55 427 -1 697 51 984 189 143 68 253 142 354 234 183 170 264 353 274 625 11 253 -36 452 -151 640 -219 361 -654 617 -1175 689 -136 19 -406 19 -545 0z m631 -729 c97 -33 156 -70 222 -140 75 -79 104 -148 109 -261 7 -161 -49 -320 -142 -400 -46 -39 -173 -107 -254 -135 -132 -46 -441 -71 -622 -50 -146 17 -321 48 -412 72 l-76 21 5 36 c22 143 95 357 162 474 116 202 270 324 493 387 155 45 374 43 515 -4z"/>
    <path d="M22566 6104 c-358 -48 -693 -212 -984 -479 -140 -129 -335 -420 -425 -635 -189 -450 -218 -1018 -76 -1474 118 -380 307 -691 546 -898 428 -371 865 -527 1372 -488 488 36 918 229 1252 561 l100 100 -18 31 c-35 63 -155 173 -228 209 -68 33 -72 34 -195 33 -117 0 -132 -3 -230 -36 -58 -20 -165 -57 -238 -82 -233 -80 -502 -119 -659 -96 -106 16 -244 63 -308 106 -194 128 -342 348 -410 608 -73 279 -84 713 -25 1020 55 285 183 519 364 664 91 73 122 90 236 128 80 27 94 29 255 28 157 0 181 -2 305 -32 74 -18 194 -53 265 -78 291 -103 342 -116 455 -117 l105 -2 91 48 c100 52 109 60 182 163 l50 71 -96 95 c-121 118 -170 158 -302 244 -260 170 -525 269 -829 309 -132 18 -422 18 -555 -1z"/>
    <path d="M26466 6105 c-573 -82 -1057 -426 -1329 -946 -146 -278 -215 -527 -239 -871 -27 -384 42 -747 207 -1086 135 -278 306 -495 531 -676 165 -132 389 -254 590 -322 327 -110 772 -105 1119 11 481 160 843 487 1076 970 135 280 199 583 199 939 -1 296 -46 524 -159 804 -93 231 -224 430 -406 621 -177 184 -336 300 -559 406 -143 69 -242 103 -393 136 -129 27 -487 36 -637 14z m456 -729 c109 -28 169 -56 253 -119 205 -154 339 -399 396 -723 27 -153 37 -479 20 -660 -33 -362 -153 -642 -352 -829 -98 -93 -163 -130 -289 -167 -161 -46 -285 -42 -451 18 -294 106 -525 460 -578 889 -30 237 -24 550 15 770 49 284 185 536 368 683 88 70 123 90 216 120 152 50 258 55 402 18z"/>
    <path d="M30790 6114 c-326 -37 -503 -82 -705 -179 -149 -72 -251 -142 -349 -239 -195 -191 -347 -460 -416 -732 -57 -229 -60 -274 -72 -1120 -10 -710 -10 -792 5 -896 30 -202 90 -340 197 -449 178 -180 392 -260 763 -284 l98 -6 -5 23 c-28 131 -31 269 -31 1293 0 1192 -3 1145 76 1380 73 221 180 356 339 433 109 52 208 72 360 72 260 0 449 -78 577 -239 87 -110 166 -302 200 -486 17 -92 18 -158 15 -871 -2 -659 0 -787 13 -877 29 -193 90 -331 195 -438 174 -178 397 -260 772 -284 l98 -6 -5 28 c-39 236 -47 509 -43 1453 4 802 6 916 21 999 31 165 102 346 186 470 78 115 223 205 380 237 105 21 343 15 436 -11 290 -81 473 -332 537 -737 10 -64 12 -255 10 -843 -3 -830 0 -891 54 -1055 106 -319 392 -495 862 -530 80 -6 146 -10 147 -8 1 2 -4 50 -12 108 -11 83 -16 339 -23 1205 -9 1164 -9 1165 -59 1391 -28 128 -64 231 -128 359 -75 152 -152 263 -259 375 -236 246 -518 377 -964 447 -178 28 -643 25 -835 -5 -372 -59 -571 -134 -795 -303 l-80 -60 -85 63 c-218 164 -433 246 -780 298 -120 19 -200 24 -405 25 -140 2 -271 1 -290 -1z"/>
    <path d="M1205 6029 c-126 -16 -266 -58 -375 -111 -89 -44 -118 -65 -191 -138 -64 -63 -96 -104 -123 -157 -47 -94 -82 -216 -95 -333 -15 -143 -26 -2191 -11 -2305 32 -258 119 -442 288 -611 97 -98 242 -178 397 -219 81 -22 280 -30 385 -16 173 23 270 74 371 194 122 145 169 287 169 516 l0 125 -32 -31 c-70 -66 -174 -99 -285 -90 -136 11 -231 109 -263 272 -16 82 -8 2652 9 2770 6 44 13 95 15 113 l5 32 -97 -1 c-53 -1 -128 -5 -167 -10z"/>
    <path d="M11685 6033 c-267 -32 -459 -107 -601 -237 -109 -99 -175 -224 -217 -411 -19 -86 -20 -142 -27 -1175 -5 -656 -5 -1127 1 -1192 31 -352 214 -649 482 -782 179 -89 297 -113 502 -103 236 12 352 64 472 215 71 88 120 189 137 282 18 95 31 271 22 305 l-7 26 -37 -29 c-70 -56 -152 -82 -251 -82 -65 0 -106 15 -170 62 -68 51 -106 128 -122 245 -8 58 -9 456 -6 1345 4 1066 7 1283 21 1393 8 72 16 133 16 138 0 7 -156 8 -215 0z"/>
    <path d="M19673 3195 c-185 -50 -321 -190 -393 -404 -15 -46 -21 -88 -21 -151 0 -197 71 -329 235 -437 128 -85 226 -106 362 -78 212 44 362 177 434 386 25 70 30 100 30 180 0 137 -36 239 -122 351 -34 44 -160 125 -232 150 -63 21 -218 23 -293 3z"/>
  </g>
  </svg>

3. Cara Modifikasi Tampilan Gambar SVG

Setelah memasang kode SVG, gambar mungkin tidak akan langsung muncul. Kita harus mengatur ukuran dan warnanya terlebih dulu agar proporsional. Modifikasi ini pernah saya bahas di artikel cara pasang ikon SVG di blog, tapi akan diulas lagi biar kamu lebih paham.

  1. Pertama-tama, tambahkan class baru ke dalam kode SVG. Saya contohkan menggunakan nama class newicon. Hasilnya seperti ini: 
    <svg class="newicon" viewBox="0 0 3551.000000 3833.000000">  
  <g ....>
    <path ... />
    ....
    ....
  </g>
</svg>
  2. Kedua, tambahkan CSS baru berikut ini: 
    .newicon {
  height: 10rem; /* tinggi gambar */
  width: 10rem; /* lebar gambar */
  max-height: 100%;
  max-width: 100%;
}
.newicon path {
  fill: #db6557; /* warna gambar */
  stroke: none;
}

    Kamu mungkin perlu memasukkan angka yang lebih besar dari 10rem jika gambarnya masih terlihat kecil. Misalnya saja, coba angka 20rem.

Hasil Gambar Format SVG

Inilah hasil render dari gambar berformat SVG yang telah berhasil dikonversi dari format aslinya yang berupa JPG / PNG. Saya contohkan dengan berbagai variasi ukuran dan warna untuk menunjukkan betapa mudahnya memodifikasi gambar yang sudah menjadi SVG.

Referensi

  1. web.dev, Largest Contentful Paint (LCP), https://web.dev/lcp

Itu dia tutorial untuk mengubah gambar biasa (JPG / JPEG / PNG) menjadi gambar atau ikon berformat SVG dari igniel.com. Semoga bisa memberikan pencerahan.

Leave a Reply

Your email address will not be published. Required fields are marked *