Tidak. Kelima preset kualitas menggunakan pengodean WebP lossy. Pilih mode Lossless yang terpisah untuk menghindari kehilangan akibat pengodean tersebut. Kedua mode tidak mempertahankan vektor yang dapat diedit atau menjamin kesesuaian dengan setiap penampil SVG; render dilakukan sebelum pengodean WebP.
Konverter SVG ke WebP
Ubah satu SVG berukuran hingga 20 MB menjadi WebP statis untuk tujuan yang menerima gambar WebP. Atur dimensi bila perlu, pertahankan proporsi sumber, dan pilih pengodean lossy atau lossless. Hasilnya berupa gambar piksel; simpan SVG Anda untuk pengeditan dan desain yang dapat diskalakan.
Fungsi konverter SVG ke WebP ini
Konverter ini merender SVG menjadi gambar WebP dengan ukuran tetap. Alat ini mengubah format gambar, bukan hanya nama filenya. Gunakan untuk aset situs web, pratinjau, atau unggahan yang membutuhkan WebP; hasilnya tidak mempertahankan jalur yang dapat diedit, teks yang tetap berupa teks, atau animasi SVG.
Periksa format yang diterima tujuan penggunaan terlebih dahulu. Kebutuhan akan gambar raster tidak otomatis berarti WebP diterima. Gunakan SVG ke PNG untuk salinan PNG, atau SVG ke JPG jika JPEG dengan latar belakang putih diperlukan.
| Pengaturan | Yang berubah | Kapan digunakan |
|---|---|---|
| Unggahan .svg | Menerima file sumber SVG | Unggah file SVG yang valid; PNG atau file lain yang namanya diganti bukan SVG |
| Lebar dan tinggi | Memuat gambar hasil render di dalam dimensi opsional sambil mempertahankan proporsinya | Atur satu sisi tetap atau kotak pembatas; alat ini tidak meregangkan atau memotong gambar untuk memenuhinya |
| Kompresi lossy | Mengorbankan detail yang terlihat demi kompresi; ukuran file yang lebih kecil tidak dijamin | Gunakan untuk gambar situs web umum dan pratinjau |
| Kualitas dan ukuran file | Mengontrol kekuatan kompresi WebP lossy | Mulai dengan preset “Seimbang” |
| Kompresi lossless | Menghindari kompresi WebP lossy | Gunakan untuk ikon, logo, grafik UI, atau tepi yang tajam |
Cara mengubah SVG ke WebP online
1
Unggah file SVG Anda
Pilih atau seret satu SVG berukuran hingga 20 MB. Saat file dipilih, unggahan dimulai untuk pemrosesan di server. Tunggu hingga unggahan selesai dan periksa apakah Anda telah memilih sumber yang dimaksud; pratinjau browser tidak menjamin hasil render server yang identik.
2
Atur ukuran hasil WebP
Kosongkan kedua kolom untuk menggunakan ukuran intrinsik SVG sebagaimana dibaca oleh perender. Isi satu sisi untuk menghitung sisi lainnya secara proporsional, atau keduanya untuk memuat gambar di dalam persegi panjang tanpa pemotongan atau peregangan. Sumber 1200×800 yang dimuat di dalam 600×600 menjadi 600×400, bukan persegi.
- •Setiap isian opsional menerima 1–16.383 px, dan kedua sisi hasil akhir harus berada dalam batas 16.383 px. Mengosongkan keduanya atau hanya mengisi satu sisi tidak mengabaikan batas tersebut. Untuk lebar tampilan 300 px, 600 px merupakan pilihan ekspor 2×, bukan jaminan peningkatan untuk setiap sumber.
3
Pilih mode kompresi dan kualitas
Mode Lossy menyediakan lima preset: Kompresi kuat, Kompresi sedang, Seimbang, Kualitas tinggi, dan Kualitas tertinggi. Seimbang adalah pengaturan bawaan. Bahkan Kualitas tertinggi menggunakan pengodean lossy; periksa garis halus, gradasi, dan bentuk huruf pada hasilnya, alih-alih menganggap label tersebut sebagai jaminan.
- •Pilih mode Lossless yang terpisah untuk menghindari pengodean WebP lossy; mode ini menyembunyikan pemilih kualitas. Mode ini tidak memperbaiki perbedaan render atau mempertahankan jalur vektor, font, tautan, metadata sumber, maupun penskalaan tanpa batas. Hasilnya berupa gambar 8-bit.
4
Konversi dan periksa WebP unduhan
Klik Ubah ke WebP dan unduh gambar yang selesai. Bandingkan dimensi, bentuk huruf, warna, tepi transparan, dan ukuran file dengan desain yang dimaksud. Uji file di aplikasi tujuan sebelum mengganti aset yang sudah berfungsi, dan simpan SVG asli Anda.
Render, transparansi, dan kualitas SVG
SVG menyimpan bentuk, jalur, teks, dan gaya; WebP menyimpan piksel hasil render. Periksa karakteristik berikut sebelum memilih pengaturan ekspor Anda.
| Pertanyaan | Hasil yang dapat Anda harapkan |
|---|---|
| Apakah hasilnya tetap berupa vektor? | Tidak. File WebP adalah gambar raster dengan dimensi piksel tetap. |
| Bisakah WebP mempertahankan transparansi? | Area transparan yang ada dapat dipertahankan. Bentuk putih atau berwarna yang sudah digambar di belakang desain merupakan bagian gambar dan tidak akan dihapus. |
| Apakah mode lossless mempertahankan kualitas SVG? | Lossless berlaku pada pengodean WebP setelah render. Mode ini tidak mempertahankan struktur SVG atau menjamin bahwa perender server memberikan hasil yang sama dengan browser atau aplikasi desain. |
| Apakah font akan selalu sama? | Font yang tersedia di perangkat Anda mungkin tidak tersedia di server. Ubah huruf penting menjadi garis bentuk di editor sumber jika tampilannya harus persis. |
| Apakah CSS eksternal atau gambar tertaut akan dirender? | Sumber daya tertaut atau gaya yang tidak didukung mungkin hilang atau terlihat berbeda. Ekspor SVG mandiri yang menyertakan gambar yang dibutuhkan dan gaya penting di dalam file; periksa mask dan filter pada unduhan. |
Siapkan viewBox yang jelas dan batas kanvas yang sesuai. Ruang transparan di dalam kanvas SVG tetap menjadi bagian gambar; pengubahan ukuran tidak memangkasnya. Render server bersifat statis dan tidak memutar animasi atau menjalankan skrip untuk membuat ulang keadaan interaktif browser.
Kapan menggunakan WebP sebagai pengganti SVG
Salinan WebP dapat sesuai untuk penempatan berukuran tetap berikut. Periksa persyaratan format, ukuran piksel, dan ukuran file pada tujuan penggunaan.
Unggahan CMS
Gunakan salinan WebP jika CMS Anda menerima WebP tetapi tidak menerima SVG; batas ukuran unggahan dan dimensinya tetap berlaku.
Pratinjau media sosial
Periksa aturan gambar pratinjau pada platform berbagi. Gunakan WebP hanya jika diterima; jika tidak, pilih ekspor PNG atau JPG yang didukung.
Grafik email
Pastikan dukungan WebP pada pembuat email dan aplikasi email penerima. Untuk alur yang memerlukan PNG atau JPG, ekspor ke format tersebut.
Gambar situs web
Salinan WebP dapat sesuai untuk desain yang ditampilkan pada ukuran yang sudah diketahui. Bandingkan tampilan dan ukuran file sebenarnya sebelum Anda mengganti aset SVG.
Aset aplikasi atau marketplace
Periksa persyaratan format dan piksel secara tepat. Permintaan gambar raster saja tidak memastikan bahwa WebP diterima.
Pratinjau untuk penyerahan desain
Bagikan pratinjau statis kepada peninjau yang alat penampilnya menerima WebP, dan simpan SVG untuk perubahan desain berikutnya.
Simpan SVG sebagai file sumber Anda dan ekspor salinan WebP untuk tujuan yang membutuhkan gambar raster. Jika Anda membangun sistem ikon responsif atau perlu mengedit bentuk nantinya, SVG mungkin tetap menjadi format induk yang lebih baik.
Memilih pengaturan SVG ke WebP yang paling sesuai
Pengaturan terbaik bergantung pada desain dan tempat WebP akan digunakan. Ikon datar kecil, ilustrasi mendetail, dan grafik situs web selebar halaman tidak membutuhkan pilihan ekspor yang sama.
| Tujuan hasil | Pengaturan yang disarankan | Alasan |
|---|---|---|
| Ikon situs web | Lebar tampilan atau 2× lebar tersebut, lossless | Menghindari pengodean lossy pada tepi; periksa hasil raster sebenarnya |
| Pratinjau logo | 2x ukuran tampilan, lossless atau “Kualitas tinggi” atau “Kualitas tertinggi” | Membantu menjaga kurva dan bentuk seperti teks tetap tajam |
| Ilustrasi besar | Lebar tampilan yang dituju, “Seimbang” atau “Kualitas tinggi” | Menyeimbangkan detail dan ukuran file |
| Thumbnail ringan | Dimensi lebih kecil, “Kompresi kuat”, “Kompresi sedang”, atau “Seimbang” | Dapat mengurangi ukuran file; periksa jumlah byte unduhan dan detail yang terlihat |
| Lapisan gambar transparan | WebP dengan transparansi, “Seimbang”, preset kualitas yang lebih tinggi, atau lossless | Menjaga latar belakang tetap transparan sambil mengontrol kompresi |
Pilih dimensi sesuai ruang tampilan sebenarnya, bukan nilai terbesar yang tersedia. Memperbesar gambar bitmap yang disematkan di dalam SVG tidak dapat memulihkan detailnya yang hilang. Jika masalahnya adalah ruang kosong, sesuaikan kanvas SVG atau viewBox di editor sumber; meningkatkan kualitas tidak akan menghapusnya.
Penanganan file dan batas praktis
Saat Anda memilih satu SVG berukuran hingga 20 MB, unggahan dimulai untuk pemrosesan di server. Batas 20 MB mengukur ukuran file; 16.383 px per sisi hasil mengukur dimensi. File SVG kecil tetap dapat mendeskripsikan kanvas yang terlalu besar atau berisi konten yang tidak dapat diproses perender.
Alur ini mengekspor satu WebP statis dari file yang diunggah. Tidak tersedia kolom kode SVG, editor vektor, perekaman animasi, atau pemilihan waktu frame. Untuk menggunakan kode SVG, simpan file .svg yang lengkap dan valid terlebih dahulu; sertakan gaya dan sumber daya gambar yang dibutuhkan di dalam file tersebut.
Segera unduh WebP karena file yang diunggah dan dihasilkan bersifat sementara. Simpan SVG untuk pengeditan berikutnya.
Kesalahan umum yang perlu dihindari
Mengganti nama .svg menjadi .webp
Mengganti ekstensi nama file tidak mengonversi SVG ke WebP. Konversi yang sebenarnya harus merender SVG dan mengodekan hasilnya sebagai file gambar WebP.
Mengharapkan WebP tetap dapat diedit seperti SVG
WebP unduhan adalah gambar piksel. Anda tidak dapat mengedit jalur, bentuk, atau teks dengan cara yang sama seperti pada SVG asli. Simpan SVG sebagai sumber yang dapat Anda edit.
Menganggap mode lossless menjamin vektor tetap dipertahankan
Lossless adalah pilihan pengodean WebP. Mode ini tidak dapat memulihkan vektor, mengatasi font yang hilang, memperbaiki fitur SVG yang tidak didukung, atau membatalkan pilihan render dan pengubahan ukuran sebelumnya. Tinjau gambar hasil ekspor meskipun Anda menggunakan mode lossless.
Mengandalkan font atau CSS eksternal
Pratinjau sumber yang diunggah dan render server mungkin menggunakan sumber daya dan fitur render yang berbeda. Sertakan gambar dan gaya yang dibutuhkan di dalam SVG, ubah teks penting menjadi garis bentuk, dan periksa unduhannya, jangan hanya mengandalkan pratinjau.
Mengekspor WebP yang terlalu besar
Pilih dimensi hasil sesuai penggunaan akhirnya. WebP yang terlalu besar mungkin memboroskan ruang atau melampaui batas tujuan penggunaan, sementara SVG sederhana mungkin sudah lebih kecil. Pengubahan ukuran mempertahankan seluruh kanvas SVG, termasuk ruang kosong yang sudah ada di dalamnya.
Pertanyaan yang sering diajukan
Nilai tersebut menentukan kotak pembatas. Gambar mempertahankan proporsinya, sehingga 1200×800 yang dimuat di dalam 600×600 menjadi 600×400. Gambar tidak dipotong atau diregangkan menjadi persegi. Isi satu sisi jika itulah dimensi tetap yang Anda butuhkan.
Server mungkin tidak memiliki font atau sumber daya yang digunakan oleh pratinjau Anda, dan beberapa fitur SVG dirender secara berbeda. Ekspor SVG mandiri, ubah teks penting menjadi garis bentuk, lalu periksa mask dan filter. Meningkatkan kualitas WebP tidak memperbaiki konten sumber yang hilang.
Tidak. Area transparan yang ada dapat dipertahankan, termasuk pada WebP lossy. Persegi panjang putih atau latar belakang lain yang sudah digambar dalam SVG tetap menjadi bagian gambar. Hapus latar belakang tersebut di editor sumber sebelum mengekspor jika Anda membutuhkan transparansi.
Tidak. Halaman ini membuat render statis; alat ini tidak merekam animasi, menjalankan skrip, atau menyediakan pemilih waktu maupun frame. Siapkan SVG statis yang memuat keadaan persis yang Anda inginkan, atau gunakan alur ekspor animasi secara terpisah.
Ukuran file hanyalah salah satu batas. SVG harus dapat dibaca oleh perender, dan kedua sisi hasil harus berada dalam batas 16.383 px. File kecil dapat mendeskripsikan kanvas yang sangat besar; konten yang hilang atau tidak didukung juga dapat menghalangi hasil yang diharapkan. Periksa sumber dan pilih dimensi yang sesuai.
Tidak ada input kode pada halaman ini. Simpan markup SVG lengkap sebagai file .svg yang valid dan unggah. Mengganti nama gambar yang tidak sesuai atau potongan teks yang tidak lengkap tidak menjadikannya SVG yang dapat digunakan.
SVG sederhana dapat mendeskripsikan bentuk dengan sangat sedikit data, sedangkan WebP menyimpan gambar raster. Dimensi, desain, dan mode pengodean menentukan ukuran file. Bandingkan unduhannya; tidak ada target KB yang persis atau janji bahwa WebP akan lebih kecil.