Cara Membuka File SVG dan Menyimpannya sebagai PNG atau JPG

Cara termudah membuka file SVG adalah di browser web: seret ke Chrome, Edge, Firefox, atau Safari. Di Windows, klik kanan lalu pilih Open with > Microsoft Edge. Di Mac, pilih file di Finder lalu tekan spasi untuk Quick Look. Untuk membagikan atau mengupload, ubah ke PNG atau JPG.

Apa itu file SVG?

SVG adalah singkatan dari Scalable Vector Graphics. SVG adalah sekumpulan instruksi menggambar yang ditulis sebagai teks: garis, kurva, bentuk, dan warna. Karena itulah SVG tetap tajam di ukuran apa pun, dan logo, ikon, serta ilustrasi sederhana sering diberikan dalam format SVG.

Ini juga menjelaskan kebingungan saat Anda mencoba membukanya. Penampil foto mengharapkan grid piksel, jadi sebagian menampilkan layar kosong atau error. Browser, sebaliknya, menggambar SVG secara bawaan, karena SVG adalah standar web. Jika Anda membuka file di editor teks biasa, Anda akan melihat kodenya, diawali sesuatu seperti <svg.

Banyak tempat sama sekali tidak menerima upload SVG. Foto profil media sosial, dokumen kantor, tanda tangan email, dan sebagian besar aplikasi chat meminta PNG atau JPG. Sebagian platform memblokir SVG karena file ini bisa berisi script. Itulah alasan umum orang butuh salinan PNG. Untuk perbandingan cepat format-format umum, lihat panduan PNG vs JPG.

Cara membuka file SVG di Windows

1. Klik kanan file .svg di File Explorer.
2. Pilih Open with, lalu Microsoft Edge. Chrome atau Firefox juga bisa jika sudah terinstal.
3. Untuk menjadikannya default, pilih Choose another app, pilih browser Anda, lalu pilih Always.

File Explorer mungkin menampilkan SVG sebagai ikon kosong, bukan thumbnail. Aplikasi gratis PowerToys dari Microsoft mengatasinya. Add-on File Explorer-nya mencakup pratinjau SVG untuk panel pratinjau dan thumbnail SVG. Aktifkan di pengaturan PowerToys, lalu restart Explorer jika thumbnail tidak langsung muncul.

Paint dan penampil foto klasik tidak bisa diandalkan untuk SVG. Untuk mengedit gambarnya, gunakan editor vektor seperti Inkscape, yang gratis dan open source.

Cara membuka file SVG di Mac

• Quick Look: pilih file di Finder lalu tekan spasi. Grafiknya dirender di jendela pratinjau.
• Safari: seret file ke Safari, atau klik kanan lalu pilih Open With > Safari. Browser lain juga bisa dengan cara yang sama.
• Ikon Finder dan tampilan galeri menampilkan gambarnya sebagai thumbnail.

Preview tidak selalu bisa membuka file SVG, tergantung versi macOS, jadi Safari adalah pilihan yang bisa diandalkan. Untuk mengedit, Inkscape juga berjalan di macOS.

Membuka SVG di HP

Dukungan SVG di HP tidak merata, dan mengetuk file mungkin tidak menampilkan apa pun yang berguna. Solusi tercepat adalah mengubahnya ke PNG di browser HP dengan alat di bawah. Lalu lihat atau bagikan PNG-nya seperti gambar lain.

Mengedit SVG, bukan hanya melihatnya

Karena SVG berupa teks, perubahan kecil tidak memerlukan software khusus. Buka di editor kode atau teks dan Anda bisa mengubah warna dengan mengedit nilai fill , misalnya #000000 menjadi #1a73e8. Simpan, lalu muat ulang file di browser untuk memeriksa. Simpan salinan file asli terlebih dahulu, karena satu karakter yang salah bisa membuat file tidak tampil. Untuk perubahan yang lebih besar, seperti memindahkan bentuk, mengedit teks, atau menggabungkan logo, gunakan Inkscape. Inkscape membuka SVG secara langsung dan menyimpannya kembali sebagai SVG, jadi tidak ada yang diubah menjadi piksel di sepanjang prosesnya.

Cara mengubah SVG ke PNG atau JPG di browser

Konverter SVG ke PNG/JPG merender file di dalam browser Anda dan tidak pernah mengunggahnya. Bisa dipakai di HP maupun komputer.

1. Buka konverter dan tambahkan file SVG Anda.
2. Pilih PNG, atau JPG jika Anda butuh latar padat.
3. Atur skala. Skala yang lebih besar menghasilkan lebih banyak piksel dan hasil yang lebih tajam di layar besar.
4. Jika tempat unggah punya batas ukuran file, atur ukuran maksimum.
5. Konversi lalu unduh gambarnya.

Karena browser menggambar SVG dengan sangat baik, hasilnya biasanya sama dengan yang Anda lihat saat SVG dibuka di Chrome, Edge, Firefox, atau Safari.

PNG mempertahankan transparansi, jadi logo dengan latar bening tetap bening. JPG mengisi area transparan dengan warna padat. Itulah sebabnya PNG biasanya pilihan yang tepat untuk logo dan ikon, sedangkan JPG cocok jika formulir mewajibkannya.

Cara mengubah SVG ke PNG di Inkscape

1. Buka SVG di Inkscape.
2. Buka dialog ekspor dengan File > Export, atau tekan Shift+Ctrl+E.
3. Pilih apa yang diekspor: seluruh halaman, gambar, pilihan, atau area kustom.
4. Masukkan lebar atau tinggi dalam piksel, atau atur DPI. Nilai lainnya akan menyesuaikan.
5. Pilih PNG sebagai jenis file, tentukan nama file, lalu klik Export.

Inkscape mengekspor dengan latar transparan secara default. Untuk latar putih, atur warna dan opasitas latar di Document Properties (Shift+Ctrl+D) sebelum mengekspor.

Berapa ukuran PNG atau JPG yang tepat?

SVG bisa berukuran berapa saja, tetapi PNG akan berukuran tetap. Hitung mundur dari tempat gambar akan dipakai.

• Untuk situs web atau aplikasi, periksa ukuran tampilannya, lalu ekspor dengan lebar dan tinggi dua kali lipat. Layar berkepadatan tinggi menampilkan detail tambahan itu.
• Untuk platform dengan persyaratan sendiri, seperti foto profil atau favicon, gunakan dimensi persis yang dicantumkan.
• Untuk cetak, kalikan ukuran cetak dalam inci dengan DPI. Pada 300 DPI, logo selebar 2 inci butuh 600 piksel. Panduan 300 DPI menjelaskan hitungannya.

Ekspor beberapa ukuran dari SVG yang sama kapan pun dibutuhkan. Simpan SVG sebagai file master.

Masalah umum saat mengonversi SVG ke PNG

Font terlihat salah

SVG bisa merujuk ke font berdasarkan nama tanpa menyertakannya. Jika font itu tidak terinstal di perangkat yang mengonversi, font pengganti yang dipakai. Ubah teks menjadi outline di aplikasi desain sebelum menyimpan SVG. Di Inkscape, pilih teks lalu gunakan Path > Object to Path.

Sebagian gambar hilang

Sebagian SVG menautkan gambar atau stylesheet dari luar, bukan menyematkannya. Konverter yang tidak bisa menjangkau file itu akan menggambar SVG tanpanya. Ekspor ulang SVG dari alat desain aslinya dengan gambar tersemat.

PNG punya kotak hitam atau putih di sekelilingnya

Ini terjadi jika output-nya JPG, atau jika SVG itu sendiri berisi persegi panjang latar. Pilih PNG dan periksa apakah ada bentuk berisi warna di belakang gambar pada file sumber.

PNG terlihat buram atau filenya besar

PNG yang buram diekspor lebih kecil dari ukuran tampilannya. Ekspor lagi dengan lebar lebih besar, karena memperbesar PNG tidak akan mengembalikan detail. Jika filenya berat, proses dengan kompresor PNG.

Arah sebaliknya, dari gambar piksel ke SVG, membutuhkan tracing dan hanya berhasil untuk gambar sederhana. Panduan JPG dan PNG ke SVG menjelaskan apa yang bisa diharapkan.

Pertanyaan yang sering diajukan