Cara Mengimpor dan Mengedit File SVG Anda di Figma, Canva, atau WordPress?

Anda memiliki SVG. Lalu apa selanjutnya?

Sebagian besar konverter berhenti pada tombol Unduh. Namun, file tersebut tidak berguna jika tetap berada di folder Unduhan. Seorang desainer membukanya di Figma untuk menerapkan panduan gaya. Seorang manajer komunitas meletakkannya di Canva untuk membuat variasi postingan. Seorang integrator memasukkannya ke WordPress untuk logo header. Langkah selanjutnya inilah yang membuktikan bahwa PixelToPath cocok dengan alur kerja yang nyata, bukan hanya demo.

SVG PixelToPath bukanlah gambar statis. Ini adalah sekumpulan jalur: setiap bentuk memiliki isian, dan mungkin garis tepi. Mengubah biru logo menjadi merah marun, mengisolasi piktogram, memperbesar untuk cerita 1080x1920: semua ini dilakukan di alat yang sudah Anda gunakan, tanpa perlu kembali ke Illustrator.

Mengapa Figma, Canva, dan WordPress menyukai format ini

PNG dan JPG, setelah diimpor, adalah bitmap. Mengubah warna logo PNG di Figma berarti menempatkan lapisan di atasnya, bukan mengubah warna jalur. Canva tidak akan menawarkan palet warna. WordPress akan menyajikan file yang berat, buram di Retina. SVG memecahkan ketiga masalah tersebut sekaligus.

Secara konkret, SVG dari PixelToPath memberi Anda:

• Jalur yang dapat diedit: satu warna per bentuk, dapat diubah di Figma (Fill) atau Canva (palet warna)
• File ringan, jauh di bawah batas 3 MB Canva, dan lebih cepat dimuat di situs WordPress daripada PNG @2x
• Ketajaman yang sama untuk favicon, spanduk LinkedIn, atau kakemono: satu file
• Hasil yang dapat Anda kirim ke klien: mereka membukanya di alat yang mereka miliki, bukan di Creative Cloud

Figma: mengimpor SVG dan mengubah warna

Figma mengimpor SVG sebagai grup vektor, bukan sebagai foto. Itulah intinya: setiap bentuk tetap menjadi lapisan yang dapat Anda ubah warnanya, pindahkan, atau sembunyikan.

1. Unduh .svg dari PixelToPath dan buka file Figma Anda.
2. Seret file dari penjelajah file langsung ke kanvas. Varian: File → Impor, atau Ctrl+Shift+K (Cmd+Shift+K di Mac) untuk menempatkan SVG.
3. Lapisan muncul sebagai grup. Klik ganda untuk masuk ke dalamnya, atau klik kanan → Ungroup (Shift+Ctrl+G / Shift+Cmd+G) jika Anda ingin memanipulasi bentuk satu per satu.
4. Pilih satu jalur. Di panel kanan, bagian Fill (Isian), klik palet warna: hex, swatches, eyedropper. Seluruh bentuk berubah, tepinya tetap tajam.
5. Untuk logo monokrom, pilih semua bentuk dalam grup dan terapkan satu warna. Kemudian ekspor sebagai SVG, PNG, atau PDF dari bagian Ekspor jika hasil akhirnya bukan lagi vektor.

Jika Figma menampilkan gambar datar alih-alih lapisan vektor, file tersebut menyematkan bitmap (PNG yang dienkapsulasi). Ini tidak terjadi pada ekspor PixelToPath dengan prasetel Hitam & Putih atau Poster. Konversi ulang aslinya dengan salah satu dari dua mode ini, bukan Foto.

Canva: meletakkan SVG dan mengubah warna

Canva menerima SVG di versi Gratis maupun Pro. Pengubahan warna berfungsi ketika file tersebut sederhana: warna solid, sedikit titik (node), tanpa gradien. Ini persis seperti apa yang dihasilkan PixelToPath dengan Poster atau Hitam & Putih.

1. Di Canva, buka sebuah desain. Panel kiri → Unggahan → Unggah file. Pilih .svg Anda (di bawah 3 MB; ekspor PixelToPath jauh di bawah itu).
2. Setelah file berada di unggahan Anda, seret ke halaman. Ubah ukurannya di pegangan: vektor tetap tajam, termasuk dalam format story atau A4.
3. Klik SVG. Di bilah alat, palet warna akan muncul, satu untuk setiap rona dalam file. Klik sebuah palet, pilih warna baru: Canva menerapkannya ke semua bentuk dengan rona tersebut.
4. Jika tidak ada palet yang muncul, SVG terlalu kompleks (gradien, terlalu banyak warna, jalur tipe Foto). Kembali ke PixelToPath, beralih ke Poster atau Hitam & Putih, ekspor ulang, impor ulang.

Canva merekomendasikan profil SVG 1.1, bentuk dengan warna yang sama dikelompokkan, dan tanpa tekstur. Prasetel logo PixelToPath sudah memenuhi batasan ini. Tidak perlu melalui Illustrator untuk "menyiapkan" file.

WordPress: mengizinkan unggahan SVG tanpa membuka celah keamanan

WordPress menolak SVG secara default, dan ini bukan tanpa alasan. SVG adalah XML: ia dapat berisi JavaScript, entitas eksternal, muatan XSS. Pengunjung, atau akun Editor yang diretas, yang mengunggah SVG berbahaya dapat mengeksekusi kode di admin. Karenanya diblokir. Anda perlu mengizinkan format tersebut dan membersihkan file.

Jangan hanya menambahkan image/svg+xml di functions.php. Tanpa membersihkan file, Anda membuka celah keamanan. Metode yang aman: plugin terpelihara yang membersihkan skrip, peristiwa onload, dan entitas XML. Safe SVG (10up), lebih dari sejuta pemasangan.

1. Di admin WordPress: Plugin → Tambah Baru. Cari Safe SVG (pembuat: 10up). Instal dan aktifkan.
2. Buka Pengaturan → Media. Batasi unggahan SVG hanya untuk administrator (atau peran tepercaya). Jangan buka format ini ke semua akun Penulis jika situs memiliki banyak kontributor.
3. Media → Tambah Baru. Letakkan .svg PixelToPath. Plugin membersihkannya saat impor dan menampilkan pratinjau di pustaka, sesuatu yang tidak dilakukan WordPress secara bawaan.
4. Dalam pos atau halaman, sisipkan blok Gambar dan pilih SVG. Untuk logo header, gunakan Sesuaikan / identitas situs, atau blok Gambar di templat tema (editor situs).
5. Varian pengembang: jangan melalui pustaka media. Letakkan file di tema (assets/logo.svg) dan referensikan di templat, atau sebariskan (inline) untuk menatanya dengan CSS. Tidak ada unggahan, jadi tidak ada permukaan serangan dari pustaka media.

Safe SVG juga dapat membatasi siapa yang berhak mengunggah. Pastikan plugin tetap diperbarui: pembersihan file adalah kontrol yang sebenarnya, bukan hanya kotak centang "izinkan SVG".

SVG PixelToPath mana yang akan ditempelkan di alat-alat ini?

Editor menelan apa yang Anda berikan padanya. Prasetel yang buruk akan dibayar pada saat impor: terlalu banyak bentuk, warna yang tidak dapat diambil, file ditolak.

• Logo, piktogram, huruf: Hitam & Putih atau Poster. Ini adalah warna solid, Figma dan Canva mengubah warnanya dalam satu klik.
• Hindari Foto jika Anda berencana untuk mengubah warna. Mode ini membuat banyak bentuk kecil; Canva sering kali tidak akan menampilkan palet warna yang berguna.
• Pangkas aslinya sebelum mengonversi: lebih sedikit latar belakang, lebih sedikit titik (node), SVG yang lebih mudah dibaca di lapisan Figma.
• Satu varian per penggunaan: SVG monokrom untuk Figma (panduan gaya), SVG berwarna untuk Canva (postingan), file bersih yang sama untuk WordPress (header).

Di mana alur kerja ini mengubah rutinitas sehari-hari

Begitu SVG berada di dalam alat, Anda berhenti mengonversi ulang untuk setiap variasi:

• Panduan gaya Figma: PNG klien menjadi komponen yang Anda warnai ulang (primer, terbalik, monokrom) tanpa menggambar ulang
• Publikasi Canva: satu SVG, enam warna kampanye, story dan karosel yang tajam
• Logo WordPress: file di header, tajam di ponsel dan Retina, lebih ringan dari PNG historis
• Hasil untuk klien freelance: Anda memberikan SVG beserta panduan Figma / Canva. Klien tidak lagi terhambat
• Ikon antarmuka: impor ke Figma secara massal, ratakan pada kisi 24 piksel, ekspor set tersebut

Simpan PNG untuk foto. Untuk semua yang perlu diubah warnanya atau tetap tajam, kombinasi PixelToPath + Figma / Canva / WordPress sudah cukup.