Cara menggunakan Skala ViewBox SVG
- Tempel SVG yang punya
viewBox(atau width dan height). - Masukkan ukuran viewBox baru, misalnya 24 × 24 agar sesuai dengan set ikon.
- Pilih presisi desimal dan apakah lebar stroke juga ikut diskalakan.
- Salin hasilnya; kedua pratinjau seharusnya terlihat sama, hanya angkanya yang berubah.
Kenapa mengubah skala koordinat, bukan pakai transform?
Set ikon paling rapi jika setiap ikon memakai viewBox yang sama (24×24, 20×20, 16×16…), sehingga posisinya sejajar dan lebar stroke terlihat konsisten. Membungkus ikon dengan <g transform="scale(0.5)"> memang tampak benar secara visual, tetapi angka di sumbernya jadi aneh, stroke ikut membesar atau mengecil tidak terduga, dan alat yang membaca data path bisa error. Mengubah skala koordinat menghasilkan SVG yang bersih dan berperilaku seperti digambar langsung pada ukuran baru.
Apa saja yang ikut diskalakan
- Data path (
d) — semua perintah, baik absolut maupun relatif: M, L, H, V, C, S, Q, T, dan A. Untuk arc, radius ikut diskalakan sementara rotasi dan flag tetap dipertahankan. x,y,cx,cy,x1…y2,width,height,rx,ry,r, danpoints.- Opsional:
stroke-widthdanfont-size. - viewBox yang tidak dimulai dari 0 0 akan digeser ke 0 0.
Batasan
Elemen yang punya atribut transform sendiri akan tetap dibiarkan, dan ukuran berbasis persen atau CSS tidak dikonversi. Untuk hasil yang tepat, ratakan transform di Figma atau Illustrator (atau gunakan convertTransform di SVGO) terlebih dahulu. Skala non-uniform (faktor X dan Y berbeda) memperkirakan radius lingkaran dengan faktor rata-rata.
Langkah selanjutnya: bersihkan dan tempel ikonnya ke Webflow dengan SVG to Webflow, atau konversi untuk React dengan SVG to JSX.
Juga dicari sebagai: svg viewbox, skala path svg, ubah ukuran koordinat svg, normalisasi ikon svg, svg 24x24, path transform svg, ubah ukuran svg online, skala ikon svg.
Tool yang cocok dipakai bersama Skala ViewBox SVG
- Konverter SVG ke CSS — Tempel SVG dan dapatkan data URI ter-URL-encode yang ringkas, plus CSS background-image dan mask-image yang bisa diubah warnanya, siap pakai.
- Kalkulator Aspect Ratio — Ubah ukuran gambar dan video tanpa distorsi: isi rasio dan satu sisi untuk mendapatkan sisi lainnya, atau masukkan ukuran untuk mencari rasionya, lengkap dengan CSS siap tempel.
- Pembuat Favicon — Buat paket favicon lengkap dari logo, huruf, atau emoji: favicon.ico multi-ukuran, Apple touch icon, ikon Android/PWA, webclip Webflow, web manifest, dan tag HTML yang tinggal kamu tempel.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
Pertanyaan yang sering diajukan
Bagaimana cara mengubah SVG dari 512×512 menjadi 24×24?
Apakah ikon saya akan terlihat berbeda?
Kenapa stroke-width dibiarkan tidak diskalakan?
Bagaimana dengan transform?
transform yang sudah ada akan dibiarkan apa adanya, dan kamu akan melihat peringatan. Ratakan transform di alat desainmu agar hasilnya benar-benar bersih.