PerfectVector
Oleh Irene Kim9 menit baca

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

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
  1. 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.
  2. Buka file dalam editor teks dan cari <image.
  3. Periksa nilai href atau xlink:href versi lama pada elemen itu. data:image/png dan data:image/jpeg mengidentifikasi data raster yang disematkan; nama seperti photo.png mengidentifikasi raster tertaut.
  4. 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:

StrukturIsi di dalamnyaPerilaku ketika diskalakan
Hanya pathBentuk seperti <path>, <rect>, dan <circle>Geometri digambar ulang pada ukuran baru
Raster tersematData piksel tersimpan dalam URL data: di dalam SVGSVG mandiri, tetapi gambar tetap memiliki batas piksel
Raster tertautElemen <image> menunjuk PNG atau JPEG terpisahGambar tetap memiliki batas piksel, dan tautan bisa rusak
SVG campuranPath ditambah gambar tersemat atau tertautBagian 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.

Tiga struktur di dalam atau di samping SVG
Ilustrasi potongan konseptual sebuah SVG yang berisi path vektor yang bisa diedit bersama gambar piksel tersemat dan gambar eksternal tertaut
SVG bisa berisi hanya path, bercampur dengan bitmap tersemat, atau bergantung pada gambar tertaut di luar file.

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:

  1. Cari <image, data:image/, .png, .jpg, dan .jpeg dalam sumber.
  2. Pastikan apakah setiap sumber daya rujukan seharusnya berupa raster, vektor, atau tidak ada.
  3. Pindahkan sementara file tertaut dan buka kembali SVG untuk menemukan dependensi yang rusak.
  4. Pilih karya penting dan verifikasi bahwa bagian yang dimaksudkan bisa diedit merupakan path.
  5. Periksa dimensi piksel native raster terhadap ukuran tampilan atau cetak akhirnya.
  6. Buka kembali salinan yang diserahkan dalam aplikasi kedua.
  7. 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

  1. W3C — SVG 2 Embedded Content — Mendefinisikan elemen <image>, href-nya, dan sumber daya raster atau SVG yang dapat dirujuknya.
  2. MDN — SVG <image> — Referensi praktis konten gambar yang didukung dan perilaku ukuran.
  3. Inkscape Beginners' Guide — Importing Pictures — Menjelaskan gambar impor tertaut versus tersemat dan pertimbangan portabilitas.
  4. 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

Mulai dengan SVG yang lebih rapi
dan lebih mudah diedit