Kesalahan saat SVG berisi gambar besar

Anda mungkin pernah melihat pesan kesalahan berikut saat mengunggah file SVG di Framer.
“SVGs dengan gambar raster besar (~XXX KB) di dalamnya tidak didukung." Kesalahan ini terjadi jika ada gambar besar (JPG atau PNG) di dalam file SVG yang diekspor dari alat desain seperti Figma.

Mengapa kesalahan ini terjadi?

Saat mengekspor gambar SVG dari aplikasi lain seperti Figma, mungkin terdapat gambar dalam format JPG atau PNG di dalamnya. Misalnya, jika grafik yang diekspor dari Figma mengandung foto atau tangkapan layar, masalah berikut dapat muncul.

Catatan: Anda dapat mengunduh kit SaaS yang digunakan di sini.

Misalnya, menggunakan ilustrasi CTA, jika kartu tersebut diekspor sebagai SVG, kedua foto di layar akan disertakan dalam SVG.
Gambar raster seperti foto atau tangkapan layar tidak dapat dikonversi ke format SVG. Oleh karena itu, dalam file SVG, gambar-gambar tersebut diperlakukan secara in-line dengan ukuran penuh. Masalahnya, dalam proses in-line ini ukuran gambar dapat bertambah sekitar 33%. Misalnya, foto asli berukuran 100KB dapat menjadi sekitar 133KB dalam file SVG.

Framer mendukung SVG dengan gambar raster tapi hanya sampai ukuran tertentu. Jika Anda mengunggah SVG dengan gambar yang melebihi batas ini, maka kesalahan akan muncul.

Memperbaiki kesalahan

Ada tiga cara untuk memperbaiki kesalahan ini.

Cara A: Kurangi ukuran gambar kemudian ekspor ulang

Cara ini adalah yang paling sederhana di antara ketiga cara.

1. Ekspor grafik yang bermasalah dalam resolusi dua atau tiga kali lipat ke JPG atau PNG.

2. Kurangi ukuran gambar dengan menggunakan alat kompresi seperti tinyjpg.com.

3. Unggah kembali gambar yang terkompresi di lokasi yang sama.

4. Terakhir, ekspor seluruh grafik dalam format SVG. Ukuran file akan lebih kecil dan kemungkinan besar dapat diunggah ke FramerFramer tanpa masalah.

Cara B: Ekspor file SVG dan gambar (JPG/PNG) secara terpisah

Meskipun cara A dapat menyelesaikan kebanyakan kesalahan, jika tidak berhasil, pertimbangkan cara B. Cara ini memerlukan sedikit usaha lebih, tetapi dapat mempertahankan kejelasan gambar SVG di semua ukuran layar dan meningkatkan kinerja situs.

1. Ekspor grafik SVG tanpa gambar raster.

2. Ekspor gambar yang dihilangkan secara terpisah ke JPG atau PNG.
   Catatan: Tidak perlu menyesuaikan atau mengoptimalkan ukuran gambar secara manual, Framer akan menyesuaikan ukurannya secara otomatis.

3. Unggah grafik SVG dan gambar PNG ke Framer dan atur pada posisi yang benar seperti di file asli.

Cara C: Ekspor seluruh gambar ke PNG

Jika Anda memilih opsi ini, gambar hasilnya mungkin tidak tajam, dan ukurannya bisa lebih besar dari opsi A atau B.

1. Ekspor seluruh grafik ke dalam format PNG.
   Catatan: Tidak perlu menyesuaikan atau mengoptimalkan ukuran gambar secara manual, Framer akan menyesuaikan ukurannya secara otomatis.

2. Unggah file PNG yang diekstraksi ke Framer.

Kesimpulan

Dengan ketiga cara ini, Anda dapat dengan mudah memperbaiki kesalahan “SVGs dengan gambar besar di dalamnya tidak didukung”. Pahami panduan ini dengan baik sehingga ketika kesalahan tersebut muncul di masa depan, Anda bisa menanganinya dengan lancar.

Artikel ini adalah terjemahan dan adaptasi dari konten di blog resmi Framer berjudul ‘Memahami dan memperbaiki kesalahan “SVGs dengan gambar besar di dalamnya tidak didukung”’.