SVG ke Webflow — Copy & Paste Ikon sebagai Elemen

Kenapa paste ikon SVG sebagai embed di Webflow?

Mengunggah ikon sebagai image asset memang bisa, tapi warnanya jadi terkunci: kamu tidak bisa mengubahnya saat hover, di dark mode, atau per komponen. Menaruh kode SVG di dalam Code Embed membuatnya menjadi bagian dari halaman sehingga mewarisi CSS. Dengan fill="currentColor", ikon otomatis mengikuti warna font elemen, dan interaksi atau efek hover di Webflow bisa mengubah warnanya.

Apa yang dilakukan cleaner

• Menghapus deklarasi XML, komentar, <metadata>, dan atribut editor dari Figma, Illustrator, Inkscape, dan Sketch.
• Mengganti warna fill/stroke yang ditulis langsung dengan currentColor (nilai none dan referensi gradien tetap dipertahankan).
• Menambahkan viewBox jika belum ada, dan mengatur width/height ke 100% supaya ukuran dikontrol oleh div pembungkus.
• Menandai ikon dekoratif dengan aria-hidden="true", atau menambahkan role="img" dan label untuk ikon yang bermakna.
• Menghapus script dan event handler inline demi keamanan, lalu memperkecil ukuran kodenya (minify).

Custom Elements vs Code Embed

Custom Element di Webflow memungkinkan kamu membuat tag HTML apa pun, termasuk svg, path, g, circle, dan linearGradient, lalu memberinya atribut. Dengan cara ini, ikon tersusun dari elemen Designer yang sebenarnya: kamu bisa melihat setiap path di Navigator, menambahkan class ke bagian tertentu, membuatnya bergerak lewat Interactions, menghubungkan atribut ke field CMS, dan mengedit nilainya tanpa membuka kode. Code Embed berupa satu blok HTML: lebih sederhana, tapi jadi kotak hitam di Designer.

Cara kerja “Salin ke Webflow”

Saat kamu menyalin elemen di dalam Webflow Designer, Webflow menyimpan deskripsi elemen dalam format JSON ke clipboard. Tool ini membuat data dengan jenis yang sama dari SVG-mu: satu Custom Element per tag, dengan semua atribut, dan ukuran yang kamu pilih diterapkan pada svg utama (atau pada class opsional). Jadi saat di-paste, yang terbentuk adalah elemen asli Webflow. Webflow tidak secara resmi mendokumentasikan format clipboard ini, jadi jika suatu saat pembaruan Webflow mengubahnya, tool ini menyediakan cadangan kalibrasi: salin Custom Element apa pun dari Webflow Designer, paste ke kotak kalibrasi, dan tool akan mempelajari format terbaru lalu menggunakannya seterusnya (hanya disimpan di browser-mu).

Tips untuk ikon di Webflow

• Secara default tidak ada class yang ditambahkan. Jika ingin ukuran yang seragam, isi nama class lalu gunakan ulang. Gunakan satuan fluid jika ikon harus menyesuaikan dengan teks.
• SVG yang sangat besar atau kompleks (ilustrasi, peta) lebih baik dijadikan image asset, karena Embed punya batas karakter (saat ini 50.000).
• Untuk background atau mask SVG, gunakan tool SVG ke CSS; untuk proyek React, gunakan SVG ke JSX.

Juga dicari sebagai: embed svg webflow, figma ke webflow, ikon webflow, webflow clipboard, paste svg webflow, currentcolor, convert svg webflow.

Tool yang cocok dipakai bersama SVG ke Webflow

• Figma CSS ke Webflow — Ubah output “Copy as CSS” dari Figma menjadi nilai rapi yang bisa langsung kamu ketik di Style panel Webflow.
• Markdown ke Webflow Rich Text — Tempel Markdown, cek pratinjaunya, lalu salin sebagai rich text berformat.
• Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
• Redirect WordPress ke Webflow — Memindahkan situs dari WordPress ke Webflow hampir pasti mengubah setiap URL: path blog berbasis tanggal, arsip /category/, trailing slash, dan slug halaman.