PSD ke SVG Tanpa Kehilangan Layer: Apa yang Bertahan
PSD dapat menyimpan layer bentuk, teks yang masih bisa diedit, mask, dan piksel, tetapi SVG tidak mempertahankan semuanya. Pelajari bagian yang perlu diekspor, diratakan, atau di-trace.
Di halaman ini
Anda tidak dapat mengonversi setiap layer Photoshop menjadi layer SVG yang setara. PSD dapat mencampurkan layer bentuk, teks yang masih bisa diedit, mask, efek, Smart Object, dan piksel biasa. SVG dapat merepresentasikan path, teks, grup, dan gambar, tetapi objek tersebut tidak langsung sesuai dengan model dokumen Photoshop. Alur paling aman adalah mempertahankan konten vektor melalui ekspor native, lalu men-trace hanya karya raster yang tidak memiliki sumber vektor yang bisa digunakan ulang.
Keputusan cepat
- Jika PSD sudah memiliki path bentuk bersih, pertahankan atau pindahkan path itu ke editor vektor.
- Pertahankan teks yang bisa diedit sebagai teks hanya ketika tujuan memiliki font dan dapat menangani teks SVG dengan andal. Jika tidak, ubah teks menjadi kontur pada salinan penyerahan.
- Perlakukan mask, efek, Smart Object, dan layer piksel sebagai tampilan yang terlihat, bukan struktur layer yang mudah dipindahkan.
- Jika Anda hanya memerlukan karya yang diratakan sebagai bentuk yang bisa diedit, tinjau komposit tersimpan dan trace.
- Buka SVG akhir dan periksa objeknya. Ekstensi
.svgtidak membuktikan layer bertahan atau piksel menjadi path.
Layer PSD bukan layer SVG
Panel Layers Photoshop menjelaskan cara dokumen diedit. SVG menjelaskan apa yang digambar renderer. Keduanya merupakan tugas berbeda.
| Konten PSD | Cara terbaik | Yang dapat diharapkan dalam SVG |
|---|---|---|
| Layer bentuk atau path Photoshop | Pertahankan atau pindahkan secara native | Path yang bisa diedit, jika ekspor mempertahankan geometri vektor |
| Teks yang masih bisa diedit | Pertahankan sebagai teks yang bisa diedit atau ubah salinan menjadi kontur | Teks yang bisa diedit memerlukan font; kontur mempertahankan tampilan tetapi menghilangkan pengeditan teks |
| Layer piksel | Trace hanya jika bentuk vektor berguna | Path baru memperkirakan piksel yang terlihat |
| Layer mask atau clipping mask | Bangun ulang atau ratakan secara sengaja | Pemotongan visual mungkin bertahan, tetapi bukan pengaturan pengeditan Photoshop |
| Smart Object | Buka sumber aslinya terlebih dahulu | Hasil yang ditempatkan saja mungkin hanya memperlihatkan piksel yang dirender |
| Efek layer, tekstur, atau bayangan lembut | Pertahankan raster atau sederhanakan | Efek halus sering menjadi piksel atau banyak bentuk |
Alur Image Assets Adobe saat ini dapat menghasilkan aset SVG dari layer atau grup layer bernama. Dokumentasi yang sama menyatakan bahwa aset grup layer diratakan, meskipun grup berisi bentuk dan teks yang masih bisa diedit. Dengan kata lain, memilih SVG sebagai keluaran tidak mengubah hierarki Photoshop menjadi hierarki SVG setara.
Inventarisasi file sebelum mengonversi
Duplikasikan PSD sebelum mengubah apa pun. Kemudian periksa panel Layers, Paths, Properties, dan Smart Objects.
- Sembunyikan layer piksel. Jika karya berguna tetap ada, Anda mungkin sudah memiliki bentuk vektor yang layak dipertahankan.
- Pilih setiap layer teks. Catat keluarga dan ketebalan font sebelum mengubah menjadi kontur atau memindahkan teks.
- Buka Smart Object. File Illustrator tertaut atau sumber vektor lain lebih baik daripada men-trace pratinjau yang dirender.
- Aktifkan dan nonaktifkan mask serta efek. Tentukan apakah konstruksi yang bisa diedit penting atau hanya tampilan akhir.
- Periksa komposit tersimpan. Jika file terbuka berbeda di mesin lain, simpan ulang salinan yang sudah diverifikasi sebelum memakai alur yang diratakan.
Adobe juga mendokumentasikan ekspor layer terpilih sebagai file terpisah. Ekspor terpisah bisa mempertahankan batas berguna antar aset, tetapi tetap tidak menciptakan satu SVG yang berperilaku seperti tumpukan layer PSD asli.

Cara 1: pertahankan konten vektor
Gunakan cara ini untuk layer bentuk, path pena, teks yang masih bisa diedit sederhana, dan Smart Object yang sumber vektor aslinya masih tersedia.
Pindahkan atau ekspor satu aset logis setiap kali, lalu buka di Illustrator, Inkscape, atau editor SVG lain. Periksa apakah hasil memiliki path dan grup, bukan satu gambar persegi panjang. Jika teks harus tetap bisa diedit, buka SVG di mesin lain yang tidak memiliki dokumen Photoshop Anda dan pastikan font yang dimaksud dimuat. Untuk logo dan file produksi, simpan master teks yang masih bisa diedit dan buat salinan penyerahan dengan teks sebagai kontur.
Jangan meratakan sumber vektor yang baik hanya untuk memprosesnya melalui tracer. Tracing menggambar ulang tampilan yang dirender, sehingga bisa menambah node, mengubah kurva, dan mengubah teks menjadi kontur perkiraan. Geometri native merupakan titik awal yang lebih bersih.
Cara 2: ratakan karya yang terlihat, lalu trace
Gunakan tracing ketika desain yang berguna hanya tersedia sebagai piksel, atau ketika tampilan terlihat yang tersimpan dalam PSD merupakan sumber terbaik yang tersisa. Logo datar, lencana, ikon, lettering, dan ilustrasi dengan batas warna jelas biasanya cocok untuk cara ini. Foto, gradien halus, tekstur kuas, dan bayangan lembut biasanya tidak cocok.
Sebelum tracing:
- Sembunyikan apa pun yang tidak seharusnya muncul dalam vektor.
- Letakkan karya pada latar atau transparansi yang dibutuhkan untuk penyerahan.
- Periksa ruang dalam huruf kecil, lubang, dan lettering halus pada ukuran keluaran yang dimaksud.
- Simpan salinan kompatibilitas atau ekspor PNG berkualitas tinggi ketika PSD tidak memiliki tampilan gabungan yang andal.
- Simpan PSD asli. Trace merupakan aset penyerahan baru, bukan pengganti dokumen.
SVG secara sah dapat memiliki gambar raster tersemat menurut model konten tersemat SVG 2. Karena itu, konverter yang hanya mengubah format dapat menempatkan piksel PSD yang diratakan dalam SVG tanpa tracing. Zoom dan pemeriksaan jenis objek membantu menemukan hasil vektor palsu tersebut.
Penerapannya dengan PerfectVector
PerfectVector membuka PSD atau PSB yang didukung melalui gambar kompatibilitas gabungan yang tersimpan. Browser menyiapkan gambar terlihat itu secara lokal dan meminta Anda meninjaunya sebelum vektorisasi. Alat ini tidak mengunggah dokumen Photoshop asli atau mengklaim merekonstruksi layer, mask, teks yang masih bisa diedit, efek, path, artboard, maupun Smart Object. Alur Photoshop ke SVG membangun ulang piksel yang disiapkan sebagai path SVG.
Artinya, ini cara tracing, bukan cara mempertahankan layer. Gunakan ketika komposit tersimpan merupakan tampilan yang tepat dan geometri path yang bisa diedit lebih berguna daripada konstruksi Photoshop asli. Setelah konversi, periksa siluet, area warna, bentuk teks, ruang negatif, dan struktur node. Jika PSD sudah memiliki sumber vektor bersih, pindahkan sumber tersebut secara langsung.
Periksa apa yang bertahan dalam SVG
Buka kembali SVG unduhan dalam editor vektor alih-alih mempercayai pratinjau pertama.
- Pilih satu area warna. Area itu harus berperilaku sebagai path atau bentuk, bukan bagian dari satu persegi panjang gambar.
- Buka panel Layers atau Objects. Cari struktur grup yang mudah ditangani alih-alih mengharapkan nama layer PSD.
- Perbesar kurva dan ruang dalam huruf. Periksa bagian datar, penutupan yang tidak disengaja, dan tepi penuh noise.
- Ubah satu warna isian. Path sungguhan harus berubah warna tanpa mengubah area di sekitarnya.
- Cari elemen
<image>dalam sumber ketika suatu area masih terlihat berpiksel. - Impor SVG ke tujuan sebenarnya dan periksa ukuran, font, mask, serta efek di sana.
Jika setiap bagian yang terlihat berperilaku sebagai satu objek, gunakan diagnosis ungrouping SVG sebelum menerapkan operasi path yang merusak. File mungkin berupa satu compound path atau gambar tersemat, bukan grup.
Kapan PSD sebaiknya tetap menjadi PSD
Pertahankan Photoshop sebagai master ketika Anda masih membutuhkan teks yang bisa diedit, adjustment layer, mask, Smart Object, artboard, tekstur fotografis, atau efek. SVG merupakan format penyerahan kuat untuk bentuk grafis yang bisa diskalakan, tetapi bukan pengganti dokumen Photoshop.
Anda mungkin berakhir dengan dua file: PSD sebagai sumber yang bisa diedit dan SVG sebagai aset produksi. Itu penyerahan yang baik. Kedua file mempertahankan jenis kemampuan pengeditan yang berbeda.
FAQ
Bisakah PSD dikonversi ke SVG dengan semua layer utuh? Tidak secara andal. Sebagian konten bentuk dan teks dapat berpindah ke SVG, tetapi mask, efek, Smart Object, adjustment layer, nama layer, dan layer piksel Photoshop tidak memiliki padanan SVG satu banding satu. Pertahankan objek vektor native terlebih dahulu dan perlakukan sisanya sebagai tampilan yang dirender.
Mengapa hasil PSD ke SVG saya hanya memiliki satu layer? Konverter mungkin menggunakan komposit yang diratakan atau menyematkan satu gambar raster. Satu objek SVG juga bisa berupa compound path atau grup, jadi periksa jenis objek sebelum menganggap file masih berupa raster.
Apakah menyimpan file Photoshop sebagai SVG memvektorisasi piksel? Tidak. SVG dapat memiliki gambar raster. Ekspor format dapat menempatkan piksel dalam wadah SVG tanpa tracing. Periksa apakah karya terpilih sebagai path dan tetap bisa diedit pada tingkat objek.
Sebaiknya saya mengubah teks menjadi kontur sebelum mengekspor SVG dari Photoshop? Ubah pada salinan penyerahan ketika tampilan harus tetap dan pengeditan teks tidak lagi diperlukan. Simpan master teks yang masih bisa diedit jika kata-kata atau lokalisasi mungkin berubah. Mengubah menjadi kontur tidak mempertahankan pengeditan font; proses itu mengubah huruf menjadi path.
Bisakah PerfectVector memulihkan layer Photoshop dari PSD? Tidak. PerfectVector memakai gambar kompatibilitas gabungan yang tersimpan dalam file yang didukung dan men-trace gambar terlihat itu menjadi path. Alat ini tidak merekonstruksi tumpukan layer Photoshop asli atau fitur dokumen yang masih bisa diedit.
Sources
- Adobe — Create image assets from layers — Mendokumentasikan pembuatan aset SVG dan perataan aset grup layer.
- Adobe — Export layers as files — Mendokumentasikan perilaku ekspor per layer saat ini.
- Adobe — Draw shapes and paths in Photoshop — Mendefinisikan alat bentuk, pena, dan path Photoshop.
- W3C — SVG embedded content — Menjelaskan mengapa SVG masih dapat berisi data gambar raster.
- PerfectVector — Photoshop to SVG — Menjelaskan alur komposit tersimpan yang didukung dan batas pemulihan layer.
Jika komposit tersimpan adalah sumber yang Anda perlukan, tinjau dalam konverter Photoshop ke SVG, vektorisasikan gambarnya, lalu buka kembali SVG dan pastikan area penting berupa path.
Lebih banyak dari blog

Bitmap ke Vektor Moho: Trace atau Pertahankan Raster?
Pilih tracing native, grafis raster berlayer, atau impor SVG di Moho. Periksa area warna, lubang, dan bagian bergerak sebelum membangun rig animasi dari grafis.

PNG ke Android Vector Drawable: Daftar Pemeriksaan Impor
Konversi PNG menjadi path SVG sungguhan, impor sebagai XML Android VectorDrawable, dan periksa isian, gradien, mask, ukuran viewport, serta kerumitan path.