Gubuku – Pernah gak sih lo nemu desain website atau aplikasi yang animasinya mulus banget? Pas tombolnya di-hover, ikonnya berputar, atau ilustrasinya gerak-gerak estetik. Pas lo coba bikin sendiri pakai SVG… lah, kok pas mau dianimasiin pake CSS/JS malah yang gerak sejebag-jebag alias satu gambar utuh?

Fix, itu bukan karena lo gak jago koding, tapi karena struktur SVG-nya belum disiapin dengan benar pas di software desain!

Aset SVG (Scalable Vector Graphics) itu ibarat susunan Lego. Kalau lo gak pisah-pisahin baloknya dari awal, lo gak bakal bisa ngatur gerak masing-masing bagian. Nah, biar aset SVG lo siap “dieksekusi” sama developer (atau lo sendiri) buat diisolasi dan dianimasikan, yuk simak panduan lengkapnya di bawah ini!

1. Rapikan Layer dan Grouping (Ini Kunci Utamanya!)

Kesalahan paling fatal desainer pemula adalah ngebiarin ribuan layer berantakan dengan nama bawaan kayak Group 142 atau Path 8903.

• Kelompokkan Bagian yang Mau Gerak: Kalau lo bikin karakter manusia dan mau tangannya melambaikan tangan, pisahkan layer tangan tersebut dari bagian badannya.

• Gunakan Fitur Group (Ctrl+G / Cmd+G): Gabungkan elemen yang saling terikat dalam satu grup. Misalnya, matapupil dan kelopak mata digabung jadi satu grup bernama mata-kanan.

2. Kasih Nama Layer yang Jelas (Auto Di-sayang Developer)

Inget ya, nama layer yang lo buat di Illustrator atau Figma bakal otomatis berubah jadi ID atau Class di dalam kode XML SVG!

• Hindari Nama Default: Ganti nama layer jadi kata-kata yang deskriptif.

• Gunakan Penamaan Clean: Gunakan format kebab-case (contoh: roda-depan, sayap-kiri, tombol-submit). Jangan pakai spasi atau karakter aneh biar kodenya gak error pas dibaca CSS.

3. Convert Text jadi Path (Create Outlines)

Lo pakai font estetik di desain lo? Awas, kalau SVG tersebut dibuka di perangkat yang gak punya font tersebut, tampilannya bakal berantakan atau berubah jadi font standar (Times New Roman vibes).

• Cara Mengatasinya: Sebelum di-export, pilih semua teks lalu tekan Ctrl + Shift + O (di Adobe Illustrator) atau Convert to Outlines / Flatten (di Figma).

• Efek Plusnya: Teks yang udah jadi path/vektor bisa lo ubah warnanya atau dianimasikan lekukannya satu per satu!

4. Bersihkan Path Berlebih & Combine yang Gak Perlu

Makin kompleks garis/vector lo, makin gemuk ukuran file SVG-nya. File yang berat bikin loading website jadi lelet.

• Gunakan fitur Pathfinder > Unite buat menggabungkan bentuk-bentuk yang gak perlu dipisah.

• Hapus anchor point yang numpuk.

• Pastikan tidak ada hidden layer (layer tersembunyi yang di-hide) yang ikut ter-export.

5. Atur Pivot Point / Anchor Point (Biar Gak “Anjlok” Pas Muter)

Pernah gak lo nyoba ngemuterin baling-baling atau tangan karakter, tapi muternya malah ngacak keluar layar? Itu karena Anchor Point-nya ada di pojok kiri atas artboard, bukan di tengah objek!

• Tips: Di software vector, pastikan koordinat pusat objek yang mau diputar (rotation) atau diperbesar (scale) sudah pas.

• Nanti di CSS, developer tinggal nambahin properti transform-origin: center; biar pergerakannya mulus.

6. Pengaturan Export SVG yang Tepat

Pas klik Export, jangan asal pencet Save! Perhatikan pengaturan (setting-an) export berikut:

• Styling: Pilih opsi Internal CSS atau Inline Styles biar properti warna/garis gampang diubah via kode.

• Object Names / Layer Names: Pastikan dicentang agar nama layer lo tetap muncul sebagai id="..." di dalam kode SVG.

• Decimal: Set ke angka 2. Ini bikin koordinat vektor lebih presisi tanpa bikin ukuran file membengkak.

• Minify / Optimize: Bisa di-centang atau di-optimize ulang pakai tool gratisan kayak SVGOMG buat ngehapus kode sampah.

Contoh Struktur Kode SVG yang “Sehat”

Kalau persiapan lo udah bener, pas file SVG dibuka di text editor, struktur kodenya bakal kelihatan rapi kayak gini: