Cara Mengetahui Apakah SVG Berisi Gambar Raster
Pelajari cara memeriksa gambar raster yang disematkan atau ditautkan dalam SVG, membedakannya dari path sungguhan, dan memilih perbaikan tanpa hanya mengandalkan zoom.
Di halaman ini
- Apa yang bisa disimpan SVG
- Pemeriksaan 1: periksa objeknya
- Pemeriksaan 2: periksa sumber SVG
- Tersemat dan tertaut merupakan masalah berbeda
- Mengapa zoom saja tidak cukup
- Tentukan apakah perlu dipertahankan, ditautkan ulang, atau diganti
- Pertahankan raster ketika piksel memang disengaja
- Tautkan ulang atau sematkan ketika portabilitas menjadi masalah
- Ganti raster ketika hasil yang dijanjikan berupa path
- Buat ulang efek yang diraster saat ekspor
- Pemeriksaan penyerahan SVG campuran
- FAQ
- Sources
Ya, SVG dapat berisi gambar raster. File ini bisa menyimpan path vektor dan piksel dalam dokumen yang sama, atau hanya menjadi pembungkus PNG atau JPEG. Ekstensi .svg menunjukkan format wadahnya, bukan apakah setiap bagian yang terlihat merupakan vektor.
Pemeriksaan yang andal adalah memeriksa objek dan sumber file. Zoom membantu melihat masalah, tetapi tidak bisa menentukan apakah aplikasi meraster pratinjaunya atau piksel memang tersimpan di SVG.
Untuk aplikasi WPF, panduan representasi SVG di WPF memisahkan sumber SVG dari objek gambar native dan keluaran bitmap. Periksa apa yang diterima aplikasi sebelum menganggap tampilan yang diraster sebagai bukti tentang file asli.
Pemeriksaan 60 detik
- Buka SVG dalam editor vektor dan pilih area yang mencurigakan. Objek gambar persegi panjang merupakan petunjuk; path dan node yang bisa diedit merupakan geometri vektor.
- Buka file dalam editor teks dan cari
<image. - Periksa nilai
hrefatauxlink:hrefversi lama pada elemen itu.data:image/pngdandata:image/jpegmengidentifikasi data raster yang disematkan; nama sepertiphoto.pngmengidentifikasi raster tertaut. - Jangan berhenti pada nama tag. Elemen
<image>juga dapat merujuk SVG lain.
Apa yang bisa disimpan SVG
SVG adalah format grafis berbasis XML, dan model kontennya lebih luas daripada path saja. Spesifikasi konten tersemat SVG 2 mendefinisikan elemen <image> yang menempatkan file rujukan lengkap di dalam persegi panjang. File itu bisa berupa PNG, JPEG, atau SVG lain.
Ini menghasilkan empat struktur umum:
| Struktur | Isi di dalamnya | Perilaku ketika diskalakan |
|---|---|---|
| Hanya path | Bentuk seperti <path>, <rect>, dan <circle> | Geometri digambar ulang pada ukuran baru |
| Raster tersemat | Data piksel tersimpan dalam URL data: di dalam SVG | SVG mandiri, tetapi gambar tetap memiliki batas piksel |
| Raster tertaut | Elemen <image> menunjuk PNG atau JPEG terpisah | Gambar tetap memiliki batas piksel, dan tautan bisa rusak |
| SVG campuran | Path ditambah gambar tersemat atau tertaut | Bagian vektor tetap geometris; bagian raster tetap berbasis piksel |
Konten campuran tidak otomatis salah. Peta bisa memakai path untuk label dan batas sambil mempertahankan layer satelit dengan gradasi terang-gelap sebagai raster. Grafis produk bisa menempatkan lencana yang bisa diedit di atas foto. Masalah dimulai ketika Anda berharap konversi menghasilkan path yang bisa diedit tetapi menerima piksel dalam wadah berbeda.
Pemeriksaan 1: periksa objeknya
Buka SVG di Illustrator, Inkscape, Affinity Designer, atau editor lain dengan panel Objects atau Layers. Pilih area yang Anda curigai sebagai raster.
- Satu objek persegi panjang berlabel gambar merupakan bukti kuat adanya konten gambar.
- Node yang terlihat sepanjang tepi karya sebenarnya menunjukkan geometri vektor.
- Clipping path bisa menyembunyikan gambar persegi panjang, jadi buka pohon layer atau objek sebelum memutuskan.
- Path di bagian lain tidak membuktikan seluruh dokumen merupakan vektor. Satu file bisa berisi keduanya.
Pemeriksaan ini berguna untuk desainer yang tidak ingin membaca XML, tetapi memiliki satu keterbatasan: objek <image> persegi panjang dapat merujuk SVG lain. Pemeriksaan sumber menunjukkan apa yang sebenarnya dimuat objek.
Pemeriksaan 2: periksa sumber SVG
Buat salinan, lalu buka file .svg dalam editor teks biasa. Cari <image. Jika tidak ada elemen image, mekanisme gambar tersemat yang umum tidak ada. Jika ditemukan, baca nilai href-nya.
PNG tersemat sering dimulai seperti ini:
<image href="data:image/png;base64,iVBORw0KGgo..." />JPEG tersemat biasanya diawali data:image/jpeg;base64,. Referensi data URL MDN menjelaskan bahwa data ditempatkan langsung dalam URL, dengan encoding Base64 opsional. Payload sangat panjang yang tidak terbaca adalah hal normal untuk bentuk ini.
Raster tertaut lebih mirip seperti berikut:
<image href="photos/product-shot.png" />PNG tersebut tidak tersimpan di dalam SVG. Dokumen bergantung pada file terpisah di path itu. Pindahkan atau kirim SVG melalui email tanpa gambar tersebut dan karya mungkin hilang.
Terakhir, ini bukan bukti adanya konten raster:
<image href="icons/mark.svg" />Referensi <image> di MDN secara eksplisit menyebutkan bahwa elemen ini dapat menampilkan format raster atau SVG lain. Periksa jenis media atau ekstensi file sebelum mengklasifikasikannya.

Tersemat dan tertaut merupakan masalah berbeda
Ketika mengimpor gambar, Inkscape dapat menautkan atau menyematkannya. Panduan impor gambar menjelaskan pertimbangannya dengan jelas: penautan membuat SVG lebih kecil tetapi dokumen bergantung pada lokasi gambar; penyematan membuat SVG mandiri tetapi memperbesar ukurannya.
Perbedaan itu penting saat penyerahan:
- Raster tersemat: mudah dipindahkan sebagai satu file, tetapi tetap dibatasi resolusi dan sering jauh lebih besar daripada yang diharapkan.
- Raster tertaut: lebih mudah diperbarui secara terpisah, tetapi rapuh ketika dipindahkan antar folder, komputer, situs web, atau vendor.
- Path vektor: bisa diedit sebagai geometri, tetapi hanya jika sumber sejak awal di-trace atau digambar sebagai path.
Penyematan adalah pengemasan, bukan vektorisasi. Base64 tidak mengubah piksel menjadi kurva. Jika Anda menyiapkan karya stok, ikuti pemeriksaan pengajuan vektor Adobe Stock untuk pemeriksaan tambahan mengenai artboard, kemampuan pengeditan, dan sumber.
Mengapa zoom saja tidak cukup
Jika area yang mencurigakan menjadi kotak-kotak pada perbesaran tinggi di beberapa penampil, kemungkinan besar itu raster. Namun, penampil dapat meraster SVG yang sebenarnya sehat untuk thumbnail, canvas, pratinjau cetak, atau cache impor. Sebaliknya, PNG tersemat resolusi tinggi bisa terlihat halus pada zoom biasa dan tersembunyi dalam dokumen tanpa disadari.
Gunakan zoom sebagai pemeriksaan gejala, lalu pastikan melalui objek atau sumber. Panduan lebih luas tentang mengapa SVG terlihat berpiksel memisahkan konten tersemat dari perilaku penampil dan rendering ikon kecil. Untuk aplikasi canvas, bandingkan impor gambar dan path yang bisa diedit di Konva sebelum menafsirkan satu node gambar sebagai masalah pada sumber SVG.
Tentukan apakah perlu dipertahankan, ditautkan ulang, atau diganti
Pertahankan raster ketika piksel memang disengaja
Foto, scan, tekstur, pencahayaan lembut, dan detail lukisan kompleks sering lebih tepat berupa raster. Jika SVG digunakan untuk menggabungkan gambar itu dengan label atau overlay vektor, file campuran mungkin merupakan desain yang benar. Pastikan raster memiliki resolusi cukup pada ukuran fisik akhir dan tentukan apakah penyerahan harus mandiri atau dikemas bersama aset tertaut.
Tautkan ulang atau sematkan ketika portabilitas menjadi masalah
Jika gambar tertaut hilang di komputer lain, kemas SVG dan gambarnya dengan struktur folder relatif yang sama, atau sematkan gambar sebelum penyerahan. Ini memperbaiki sumber daya yang hilang. Prosesnya tidak membuat gambar bisa diedit sebagai path.
Ganti raster ketika hasil yang dijanjikan berupa path
Jika konverter membungkus logo datar, ikon, atau gambar garis dalam SVG, cari PNG atau JPEG asli. Jika aslinya tidak tersedia, ekstrak gambar tersemat atau ekspor objek itu pada ukuran native. Kemudian konversikan gambar menjadi path vektor, periksa bentuk, dan ganti objek <image> dengan hasil vektor yang diverifikasi.
PerfectVector berguna untuk membangun ulang karya datar yang sesuai menjadi bentuk yang bisa diedit. Alat ini tidak secara ajaib mengubah foto dengan gradasi warna berkesinambungan menjadi sedikit path yang setia. Untuk foto, pertahankan raster kecuali tujuannya interpretasi posterisasi yang disengaja. Jika Anda perlu salinan keluaran PNG dari SVG yang disetujui, render langsung pada ukuran piksel akhir dengan Sharp; memperbesar PNG kecil tidak dapat menambahkan detail pada gambar raster yang disematkan di SVG tersebut.
Pengguna Scratch sebaiknya memeriksa mengapa Convert to Vector tidak men-trace bitmap sebelum mengekspor pembungkus lain.
Buat ulang efek yang diraster saat ekspor
Sebagian SVG sebagian besar berupa vektor tetapi mengandung satu bayangan, blur, tekstur, atau efek tidak didukung yang diraster. Tentukan apakah efek itu perlu tetap bisa diedit dan dipindahkan. Buat ulang efek sederhana menggunakan fitur vektor yang didukung, ratakan secara sengaja sebagai raster pada resolusi penyerahan, atau hapus. Men-trace bayangan lembut biasanya menciptakan bentuk penuh noise, bukan efek yang lebih baik.
Pemeriksaan penyerahan SVG campuran
Sebelum mengirim file ke situs web, printer, mesin potong, atau rekan kerja:
- Cari
<image,data:image/,.png,.jpg, dan.jpegdalam sumber. - Pastikan apakah setiap sumber daya rujukan seharusnya berupa raster, vektor, atau tidak ada.
- Pindahkan sementara file tertaut dan buka kembali SVG untuk menemukan dependensi yang rusak.
- Pilih karya penting dan verifikasi bahwa bagian yang dimaksudkan bisa diedit merupakan path.
- Periksa dimensi piksel native raster terhadap ukuran tampilan atau cetak akhirnya.
- Buka kembali salinan yang diserahkan dalam aplikasi kedua.
- Simpan sumber asli dan bukti tampilan raster ketika tampilan lebih penting daripada kemampuan pengeditan.
Untuk pemotongan atau fabrikasi, hapus konten raster dekoratif dari file mesin dan jalankan pemeriksaan awal SVG untuk pemotongan. Mesin potong mengikuti path; mesin tidak mengubah foto tersemat menjadi kontur potong.
FAQ
Bisakah SVG berisi PNG atau JPEG? Ya. Elemen image SVG dapat merujuk PNG atau JPEG sebagai file terpisah atau menyimpan datanya di dalam SVG. Raster tetap memiliki perilaku berbasis piksel aslinya.
Apakah tag image selalu berarti SVG berisi gambar raster? Tidak. Elemen image juga dapat merujuk SVG lain. Periksa nilai href atau xlink:href versi lama untuk mengetahui jenis media, data URL, atau nama file sebelum mengklasifikasikannya.
Bagaimana mengetahui apakah raster disematkan atau ditautkan? Gambar tersemat biasanya memiliki href yang diawali data:image, sehingga byte-nya berada di dalam SVG. Gambar tertaut memiliki path atau URL seperti images/photo.png dan bergantung pada sumber daya terpisah tersebut.
Bisakah saya menghapus gambar tersemat dari SVG? Ya. Hapus jika tidak perlu, ganti dengan aset raster yang disengaja, atau vektorisasi karya datar yang sesuai dan gantikan dengan path hasilnya. Simpan cadangan sebelum mengedit XML.
Mengapa SVG saya berisi path dan gambar? Itu merupakan SVG campuran. File mungkin sengaja menggabungkan foto dengan overlay vektor, atau alat ekspor mungkin meraster suatu efek. Periksa bagian mana yang perlu bisa diedit sebelum mengubahnya.
Sources
- W3C — SVG 2 Embedded Content — Mendefinisikan elemen
<image>,href-nya, dan sumber daya raster atau SVG yang dapat dirujuknya. - MDN — SVG
<image>— Referensi praktis konten gambar yang didukung dan perilaku ukuran. - Inkscape Beginners' Guide — Importing Pictures — Menjelaskan gambar impor tertaut versus tersemat dan pertimbangan portabilitas.
- MDN — Data URLs — Mendokumentasikan skema
data:yang umum dipakai untuk menyimpan payload gambar dalam SVG.
Menemukan bitmap terbungkus di tempat yang seharusnya berisi path yang bisa diedit? Konversikan karya datar asli menjadi vektor sungguhan, buka kembali SVG, dan verifikasi bahwa objek penting kini bisa dipilih sebagai bentuk.
Lebih banyak dari blog

Impor SVG Godot: Texture2D, DPITexture, dan Ikon Tajam
Perbaiki impor SVG Godot buram dengan memilih Texture2D atau DPITexture. Periksa ukuran raster, oversampling, grafis yang didukung, dan ikon pada skala proyek.

Celah Putih Antar Bentuk SVG: Temukan Penyebab dan Perbaiki
Garis putih antar bentuk SVG mungkin artefak antialiasing atau celah geometri nyata. Uji pembesaran, latar, raster, dan kontur sebelum mengedit path.