Apa Itu File SVG? (Serta Cara Membuka, Menggunakan, dan Membuatnya)

File SVG (Scalable Vector Graphics) adalah gambar yang dibuat dari matematika dan kode, bukan dari kisi piksel. Karena gambar disimpan sebagai bentuk (garis, kurva, dan isian warna), bukan titik-titik berwarna, SVG tetap tajam pada ukuran apa pun, dari ikon aplikasi kecil sampai papan reklame besar, dan ukuran filenya biasanya kecil. Anda mungkin sudah sering menjumpai SVG sebagai logo, ikon situs web, dan file potong Cricut.

Ini panduan sederhana untuk siapa pun yang baru bertemu file SVG: apa sebenarnya SVG itu, apa isi di dalamnya, apa kelebihan dan keterbatasannya, cara membukanya, dan cara membuatnya dari gambar yang sudah Anda punya. Tidak perlu latar belakang pengembangan web.

Versi singkat

• SVG menyimpan gambar sebagai bentuk yang dijelaskan dalam kode, bukan piksel, sehingga bisa diskalakan ke ukuran apa pun tanpa menjadi buram.
• SVG sangat cocok untuk logo, ikon, ilustrasi sederhana, dan pekerjaan Cricut atau cetak. SVG kurang cocok untuk foto.
• Buka file SVG di browser web apa pun, aplikasi desain (Illustrator, Inkscape, Figma, Canva), atau bahkan editor teks biasa.
• Buat SVG dengan mendesainnya di perangkat lunak vektor, atau dengan mengonversi gambar yang sudah Anda punya menjadi SVG.

SVG vs. gambar biasa (PNG atau JPG)

PNG atau JPG adalah gambar raster: kisi tetap berisi piksel berwarna, seperti mosaik. Jika diperbesar cukup jauh, Anda akan melihat kotak-kotaknya. Karena itu, logo yang disimpan sebagai PNG akan terlihat buram saat dibesarkan.

SVG adalah gambar vektor: sekumpulan instruksi yang mengatakan "gambar lingkaran di sini, isi dengan warna oranye, gambar kurva ini di sana." Karena gambar digambar ulang dari instruksi tersebut setiap kali, hasilnya tetap tajam pada ukuran apa pun. Perbedaan tunggal inilah daya tarik utamanya. (Untuk penjelasan lengkap tentang kapan memakai masing-masing format, lihat PNG vs SVG.)

Apa sebenarnya isi file SVG

Bagian ini sering mengejutkan orang: SVG adalah teks. Buka file SVG di Notepad atau editor kode apa pun dan Anda bisa membacanya. Di balik layar, SVG memakai XML, format teks bertag, dengan setiap bentuk ditulis sebagai satu baris kode. SVG sederhana berupa lingkaran oranye terlihat seperti ini:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

Itulah seluruh filenya. circle menggambar bentuknya, cx/cy menempatkannya, r menentukan radius, dan fill menentukan warnanya. Karena berupa teks biasa, SVG berukuran kecil, browser bisa merendernya seketika, dan Anda bisa mengubah warna hanya dengan mengganti satu kata. SVG adalah standar terbuka yang dikelola W3C sejak akhir 1990-an, dan semua browser modern mendukungnya.

Untuk apa SVG digunakan

SVG paling berguna saat grafik perlu tetap tajam di berbagai ukuran atau perlu diedit sebagai bentuk:

• Logo. Satu SVG bisa dipakai di kartu nama dan spanduk tanpa perlu file terpisah untuk setiap ukuran.
• Ikon dan grafis situs web. Tombol, panah, dan ilustrasi sederhana tetap tajam di layar apa pun dan cepat dimuat.
• Cricut dan mesin potong. SVG adalah format standar untuk file potong. Mesin mengikuti path untuk memotong vinyl, kertas, atau HTV. (Menyiapkan file SVG untuk Cricut membahasnya dari awal sampai akhir.)
• Cetak dan signage. Vektor bisa diskalakan ke ukuran fisik apa pun tanpa menjadi berpiksel.

Kapan SVG kurang cocok

SVG dibuat untuk karya grafis datar, jadi kurang cocok untuk foto. Foto memiliki jutaan warna yang berbaur halus tanpa area datar yang jelas, dan memaksanya menjadi bentuk akan menghasilkan versi seperti poster atau lukisan, atau file yang sangat besar dan berantakan. Jika Anda tergoda untuk memvektorisasi foto, baca dulu apa yang sebenarnya terjadi saat Anda mengonversi foto ke SVG. Untuk detail fotografis yang sesungguhnya, tetap gunakan JPG atau PNG.

Cara membuka file SVG

Ada tiga opsi mudah, tergantung apa yang ingin Anda lakukan:

• Sekadar melihatnya: seret file ke browser web apa pun. SVG akan langsung dirender, tanpa perlu perangkat lunak tambahan.
• Mengeditnya secara visual: buka di aplikasi desain seperti Inkscape (gratis), Illustrator, Figma, atau Canva. (Cara mengedit SVG membahas pewarnaan ulang dan perubahan bentuk.)
• Melihat atau menyesuaikan kodenya: buka di editor teks biasa seperti Notepad atau VS Code.

Satu hal yang sering membingungkan: Windows File Explorer tidak menampilkan thumbnail untuk SVG secara default, jadi file bisa terlihat kosong di folder. Itu bukan berarti filenya rusak. Buka di browser dan SVG akan tampil dengan benar.

Cara membuat SVG

Ada dua cara, dan pilihan yang tepat bergantung pada bahan awal Anda.

Desain dari awal. Gambar logo, ikon, atau ilustrasi Anda di perangkat lunak vektor (Inkscape, Illustrator, Figma, atau Canva), lalu ekspor sebagai SVG. Ini memberikan hasil paling bersih karena sejak awal file sudah berupa vektor.

Konversi gambar yang sudah Anda punya. Inilah yang paling sering dibutuhkan orang. Jika logo atau karya Anda hanya tersedia sebagai PNG atau JPG, Anda mengubahnya menjadi SVG dengan vektorisasi, yaitu menggambar ulang piksel sebagai bentuk yang bisa diedit. (Apa itu vektorisasi gambar menjelaskan prosesnya.)

Seperti apa hasilnya dengan PerfectVector

Jika Anda punya PNG atau JPG dan membutuhkan SVG sungguhan, jalurnya adalah konversi, dan itulah yang dilakukan PerfectVector. Unggah logo, ikon, atau ilustrasi datar, lalu PerfectVector membangun ulang karya tersebut sebagai SVG bersih dengan jumlah node rendah dan warna yang bisa diedit, siap untuk web, cetak, atau mesin potong. Anda bisa mengubah gambar menjadi SVG dan memeriksa hasilnya sendiri. Konversi gambar pertama Anda gratis, tanpa perlu kartu kredit.

PerfectVector bekerja paling baik untuk hal yang sama dengan keunggulan SVG itu sendiri: karya grafis datar dan logo. Untuk foto yang detail, tidak ada konverter yang bisa memberi Anda vektor fotografis sejati, dan kami akan menyampaikannya apa adanya daripada berpura-pura sebaliknya.

Catatan keamanan singkat

Karena SVG dapat berisi kode, secara teori SVG bisa membawa skrip, sama seperti halaman web. Melihat SVG di browser atau aplikasi desain aman, dan SVG dari sumber tepercaya tidak masalah. Perlakukan saja SVG acak dari sumber tidak dikenal seperti file tidak dikenal lainnya, dan jangan sematkan SVG di situs web Anda tanpa mengetahui asalnya.

FAQ

File SVG digunakan untuk apa? Logo, ikon situs web, tombol, ilustrasi sederhana, dan file potong untuk mesin seperti Cricut. Di mana pun grafik perlu tetap tajam pada berbagai ukuran atau perlu diedit sebagai bentuk, SVG adalah pilihan yang kuat. SVG banyak dipakai di web karena filenya kecil dan bisa diskalakan tanpa kehilangan kualitas.

Bagaimana cara membuka file SVG? Seret file ke browser web apa pun untuk melihatnya, buka di aplikasi desain seperti Inkscape, Illustrator, Figma, atau Canva untuk mengeditnya secara visual, atau buka di editor teks seperti Notepad untuk melihat kodenya. Perlu dicatat, Windows File Explorer tidak menampilkan thumbnail untuk SVG secara default, jadi ikon yang tampak kosong bukan berarti filenya rusak.

Bagaimana cara membuat file SVG? Anda bisa mendesainnya di perangkat lunak vektor (Inkscape, Illustrator, Figma, atau Canva) lalu mengekspornya sebagai SVG, atau mengonversi gambar yang sudah Anda punya, seperti logo PNG atau JPG, menjadi SVG dengan vektorisasi. Mendesain dari awal memberi hasil paling bersih; konversi adalah cara cepat saat Anda hanya punya file raster.

Apakah file SVG termasuk file vektor? Ya. SVG adalah singkatan dari Scalable Vector Graphics, dan SVG menyimpan gambar sebagai bentuk vektor, bukan piksel. Itulah alasan SVG bisa diskalakan ke ukuran apa pun tanpa kehilangan kualitas.

Apa perbedaan SVG dengan PNG atau JPG? PNG atau JPG dibuat dari piksel dan menjadi buram saat diperbesar melebihi resolusinya. SVG dibuat dari bentuk dan tetap tajam pada ukuran apa pun. PNG dan JPG lebih baik untuk foto; SVG lebih baik untuk logo, ikon, dan grafis.

Bisakah saya membuka file SVG di Microsoft Word atau Office? Bisa. Microsoft 365 dan versi Office terbaru memungkinkan Anda menyisipkan file SVG, bahkan mewarnai ulang atau mengubah gayanya langsung di dalam dokumen, yang berguna untuk logo dan ikon dalam laporan dan slide.

---

SVG pada dasarnya adalah gambar yang dibangun dari bentuk dan kode, bukan piksel. Itulah yang membuatnya tetap tajam di mana saja dan tetap bisa diedit. Jika gambar Anda sejauh ini hanya ada sebagai PNG atau JPG, konversikan menjadi SVG yang bersih agar Anda punya file yang bisa diskalakan, diwarnai ulang, dan dipotong tanpa pernah menjadi buram.