Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

√ Apa itu File SVG, dan Bagaimana Cara buka gambar SVG?

Jika anda menemukan tulisan ini pasti sedang bertanya-tanya Apa itu File SVG ?. Lalu bagaiaman cara membuka file ini? apakah termasuk format gambar seperti PNG atau JPG?.

Apa itu File SVG dan Kelebihannya

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 dan dasar bentuk vektor. Format ini termasuk dalam format gambar jadul, mengingat sudah ada sejak tahun 90-an.

Banyak orang mengira format ini berbeda dari gambar lain karena memang kurang familiar. Padahal dengan format ini, Anda akan mendapatkan banyak keuntungan dibandingkan PNG, JPG, WEBP dan GIF.

Perbedaan SVG dan PNG / JPG

Perbedaan yang paling mendasar adalah cara pembentukan dasar warna dan bentuknya.

Contoh Sederhana Perbedaan SVG dan PNG

PNG dan JPG menggunakan piksel atau titik warna (grafik raster), dan setiap kode warna dan lokasinya disimpan dalam file.

Gambar JPG atau PNG saat diperbesar maksimal yang terlihat adalah gambar 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 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 berpiksel. 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 banyak website yang 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 bukan tanpa alasan, 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: 

Contoh Gambar dari Kode XML

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 kedepan format ini masih akan terus dikembangkan dipakai semua orang untuk kepentingan Desain karena keunggulannya.

Sekian artikel tentang Apa itu File SVG , apa keunggulannya, dan perbedaanya dengan format gambar lain. Semoga dapat membantu menambah wawasan anda terimakasih.

Sumber Pustaka:
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/

Posting Komentar untuk "√ Apa itu File SVG, dan Bagaimana Cara buka gambar SVG?"