Jika Anda menemukan tulisan ini pasti sedang bertanya-tanya Apa itu File SVG ?. Lalu bagaimana cara membuka file SVG ini? apakah termasuk format gambar seperti PNG atau JPG?.
Saat Anda mencari gambar di Internet, pasti pernah menemukan gambar dengan ekstensi ".svg". File tersebut sebenarnya sudah digunakan sejak lama, tetapi tidak sepopuler PNG dan JPG.
Sebenarnya Apa itu File SVG ?
SVG (Scalable Vector Graphics) adalah format gambar yang terdiri dari kode XML sebagai dasar untuk membentuk gambar vektor 2 dimensi. Format ini termasuk dalam format gambar jadul, mengingat sudah ada sejak tahun 1999 oleh World Wide Web Consortium.
Banyak orang awam kurang familiar dengan format SVG. Padahal dengan format ini, Anda akan mendapatkan banyak keuntungan dibanding PNG, JPG, dan WEBP
Perbedaan SVG dan PNG / JPG
Perbedaan yang paling mendasar adalah cara pembentukan dasar warna dan bentuknya.
PNG dan JPG menggunakan pixel atau titik warna (grafik raster), dan setiap kode warna dan lokasinya disimpan dalam file.
Gambar JPG atau PNG saat diperbesar maksimum akan terlihat kotak-kotak, itulah kelemahannya. Dari segi ukuran file, ukuran JPG & PNG jauh lebih besar dibanding SVG.
Baca Juga: Cara bedakan Gambar PNG Asli Transparan dan Palsu Kotak-kotak.
SVG merupakan kebalikan dari PNG dan JPG. SVG menggunakan grafik vektor dengan menggunakan kode markup XML. Karena terbuat dari vektor, model gambar dibuat secara matematis sehingga garis atau warna dapat saling tersusun di layar Anda.
Keuntungan File Format SVG daripada PNG / JPG
Keuntungan pertama dari format SVG adalah meskipun diperbesar hingga 500%, resolusinya tidak akan pecah. Ini karena gambar yang pecah hanya berlaku untuk gambar berpixel. Tidak seperti PNG / JPG, jika Anda memperbesar atau memperkecil resolusi, itu mudah pecah atau Buram.
Ukuran file SVG juga lebih kecil karena menggunakan bahasa markup XML. Banyak situs web menggunakan format ini karena ukurannya yang kecil, yang berpengaruh pada kecepatan situs web.
Meski tidak sepopuler PNG / JPG, hampir semua browser populer sudah mendukung format SVG. Oleh karena itu, tidak heran jika website-website populer menggunakannya sebagai aset.
Keuntungan lainnya adalah bentuk dan ukuran gambar SVG dapat dengan mudah diedit tanpa kehilangan ketajaman. File dapat diedit dengan dua jenis editor, yaitu editor grafis (Adobe Illustrator, dll.) Dan editor teks (Visual Studio Code, dll.).
Cara Membuka File Format SVG
Dengan bantuan browser web, cara membuka atau menampilkan file dalam format SVG sangat sederhana. Ini mudah, karena hampir semua browser sudah mendukung format ini.
Caranya cukup klik tombol kanan mouse pada ekstensi file .svg tersebut, lalu pilih menu "Open with", dan terakhir pilih browser untuk membukanya (Chrome, Firefox, Opera, Safari, dll). Setelah beberapa saat, gambar akan terbuka di jendela "Tab Baru" di browser Anda.
Namun, jika Anda merasa kesulitan menggunakan browser, Anda dapat menggunakan konverter online untuk mengubah format SVG menjadi PNG / JPG.
Bagaimana Cara Membuat Gambar SVG
Untuk membuat dan mengedit file gambar SVG, Anda membutuhkan aplikasi khusus yang mendukung format ini yaitu AI (Adobe Illustrator). Menggunakan AI, Anda dapat dengan mudah membuat format file svg berbasis vektor. Selain itu aplikasi pendukung lainnya, seperti Adobe Photoshop, InDesign, Inscape, GIMP.
Cara Membuat Gambar SVG dengan Coding XML
Contoh Source Code berikut akan menghasilkan Gambar Objek bentuk Persegi dengan warna sesuai keinginan.
Source Code:
<svg name="ekorkode.com" x="0px" y="0px" viewBox="0 0 595.28 841.89"> <style type="text/css"> .st0{fill:#F3E600;} .st1{fill:#0D9739;} </style> <rect x="203.38" y="185.11" class="st0" width="188.51" height="188.51"/> <rect x="222.94" y="204.67" class="st1" width="149.39" height="149.39"/> </svg>
Hasil Vektor SVG nya:
Anda bisa mencobanya disini dengan klik Try it Yourself: https://www.w3schools.com/graphics/svg_intro.asp
Kesimpulan & Penutup
Format Grafik vektor SVG sudah sejak lama ada dan sampa saat ini saja masih banyak peminatnya. Dan mungkin dalam waktu ke depan format ini masih akan terus dikembangkan dipakai semua orang untuk kepentingan Desain karena keunggulannya.
Sekian artikel tentang Apa itu File SVG , apa keunggulannya, dan perbedaannya dengan format gambar lain. Semoga dapat membantu menambah wawasan Anda terima kasih.
https://www.w3schools.com/graphics/svg_intro.asp
https://www.howtogeek.com/710334/what-is-an-svg-file-and-how-do-i-open-one/
https://www.hostinger.co.id/tutorial/svg-adalah/
https://css-tricks.com/illustrator-to-svg/