Grafik yang di buat dengan sgv menggunakan format?

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?.

Table of Contents Show

Sebenarnya Apa itu File SVG ?
Perbedaan SVG dan PNG / JPG
Keuntungan File Format SVG daripada PNG / JPG
Cara Membuka File Format SVG
Bagaimana Cara Membuat Gambar SVG
Cara Membuat Gambar SVG dengan Coding XML
Video yang berhubungan

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:

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.

Sumber Pustaka:

https://www.w3schools.com/graphics/svg_intro.asphttps://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/

Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh World Wide Web Consortium (W3C) sejak tahun 1999.

Scalable Vector GraphicsEkstensi berkas.svg, .svgzJenis MIMEimage/svg+xml[1]Dikembangkan
olehWorld Wide Web ConsortiumRilis pertama4 September 2001 (2001-09-04)Rilis terbaru1.2T / 10 Agustus, 2006Jenis formatformat gambar vektorPengembangan dariXMLSitus webw3.org/Graphics/SVG/

Sebuah gambar dengan format SVG disimpan dalam bentuk file XML. Ini berarti, SVG dapat dicari, di-index, ditulis dengan bahasa pemograman dan dikompres. Karena berbasis XML, SVG dapat dibuat dan disunting dengan aplikasi teks apa saja. Mau saya ewe cewek kamu menggoda banget

Sejumlah peramban web populer seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari sudah mulai mendukung penggunakan format SVG.

SVG telah direkomendasikan oleh World Wide Web Consortium (W3C) untuk menampilkan grafik serta mendeskripsikan gambar 2 dimensi dalam pengembangan web yang berbasis XML.[2] SVG memperbolehkan tiga tipe dari objek grafis, yaitu bentuk vektor grafis (misalkan jalur yang terdiri dari garis lurus dan kurva), gambar dan teks. Hasil dari SVG dapat juga interaktif dan dinamis. Animasi dapat didefinisikan dan ditimbulkan secara menempelkan elemen animasi SVG pada isi SVG) atau dengan menggunakan skripting. SVG dapat digunakan untuk menghasilkan berbagai macam variasi dari objek grafis, dan juga menyediakan bentuk dasar umum seperti bujur sangkar dan elips. SVG memberikan pengendalian kualitas melalui sistem koordinat dari objek grafis yang telah didefinisikan dan transformasi yang akan digunakan selama proses render.[3]

Penyimpanan berkas (file) SVG dilakukan dengan cara memberi nama ekstensinya dengan “.svg” (memakai huruf kecil semua), dan untuk menyimpan file SVG yang terkompresi memakai ekstensi “.svgz” (semua memakai huruf kecil).[2]

Contoh gambar .svg

Keuntungan penggunaan SVG dibanding format gambar yang lain:[4]

File sumber SVG dapat dibaca dan modifikasi dengan menggunakan hampir semua tool/text (misalnya Notepad).
File sumber SVG berukuran lebih kecil dan dapat dikompresi dibanding dengan format gambar JPEG dan GIF.
Gambar dalam format SVG bersifat scalable/di-resizing.
Gambar dalam format SVG dapat dicetak dengan kualitas yang tinggi dan sama baiknya pada berbagai resolusi.
Gambar dalam format SVG bersifat zoomable. Setiap bagian dari gambar dapat di zoom tanpa mengurangi mutu.
Text dalam SVG “selectable” dan “searchable” (sangat berguna dalam peta).
SVG dapat bekerja dengan Teknologi Java.
SVG merupakan “open standard”.
SVG merupakan murni XML.

Bekerja sama dengan W3C, Adobe menjadi pendukung utama pengembangan SVG. Perusahaan ini membuat perangkat (tool) yang menggenerasikan gambar langsung ke kode SVG, yaitu ADOBE Illustrator, selain itu ada juga Adobe GoLive untuk mengedit kode SVG. Sementara itu, COREL juga memproduksi software pendukung SVG.[5]

Konqueror adalah peramban web pertama yang mendukung format SVG sejak versi 3.2 yang dirilis pada Februari 2004.[6] Pada tahun 2011, peramban web populer dan beberapa peramban web kecil lainnya mulai mendukung penggunaan SVG meskipun hanya beberapa fungsi dasar.

“Hello World” dalam SVG memiliki kode seperti di bawah ini:[5]

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD svg 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303 stylable.dtd"> <svg width="100px" height="50px"> <text style="fill:red" x ="10" y="20">Hello World !</text> </svg>

Setelah disimpan dalam format .svg, file tersebut dapat dibuka oleh browser.

^ M Media Type registration for image/svg+xml
^ a b Yudha Widiatmoko, Fathul Wahid (2006), APLIKASI WEB DATA SPASIAL KEPENDUDUKAN INDONESIA DENGAN SCALABLE VECTOR GRAPHICS (SVG), Media Informatika. ISSN: 0854-4743
^ Beny Yulkurniawan Victorio Nasution (2005) PERANCANGAN DAN PEMBUATAN SISTEM KONVERSI DATA GEOGRAFIS PADA REHABILITASI HUTAN DAN LAHAN ABUPATEN KUTAI BARAT BERBASIS XML DAN JAVA[pranala nonaktif permanen] Diakses pada 08 Mei 2010.
^ ilmu-komputer.net Pengantar SVG Diakses pada 08 Mei 2010.
^ a b Mohammad Athar Januar, Pengantar Scalable Vector Graphics (SVG)[pranala nonaktif permanen] (2008). ilmukomputer.org
^ Andreas Streichardt (16 September 2003). "KDE Conquers the Vectors with KSVG". KDE News. Diakses tanggal 11 February 2012.