SVG Nexus / GUIDES Tanpa Daftar Akun | 100% Diproses di Browser Anda

Panduan & Artikel

Perpustakaan ikon vektor dan 3D untuk pengembang dan desainer

Pelajari cara merancang, mengoptimalkan, menerjemahkan, dan merilis ikon vektor yang tajam untuk situs, aplikasi seluler, dan mesin pencari.

SVG vs PNG: Format Mana yang Harus Anda Gunakan?

Gunakan SVG untuk ikon situs web, logo, dan antarmuka karena jalur vektor tetap tajam di semua ukuran layar. Gunakan PNG saat Anda membutuhkan gambar piksel tetap untuk email atau media sosial.

Cara Menganimasikan Ikon SVG dengan CSS

Tambahkan kelas CSS ke elemen SVG inline Anda dan terapkan keyframe transform atau stroke-dasharray. Editor langsung kami membuat animasi 60fps yang mulus tanpa JavaScript.

Cara Mengedit Ikon SVG di Figma atau Browser

Salin kode SVG dari SVG Nexus dan tempel langsung ke kanvas Figma atau Illustrator, atau buka ikon di Studio Vektor browser kami tanpa menginstal aplikasi.

Cara Menggunakan Ikon SVG di React, Next.js, dan Vue

Pilih tab React TSX atau Vue 3 pada halaman ikon mana pun untuk menyalin komponen siap pakai yang mendukung currentColor dan Tailwind CSS.

SVG inline melawan tag gambar

Gunakan SVG inline atau komponen saat butuh perubahan warna saat disorot dan animasi CSS. Gunakan tag gambar dengan lebar, tinggi, dan teks alternatif bila ingin ikon terindeks di pencarian gambar.

Hindari bentrok ID gradien dan pemotongan

Kumpulan warna warni sering memakai ID internal seperti paint0_linear. Jika dua ikon memakai ID yang sama di satu halaman, gradien yang salah akan digambar. SVG Nexus memberi ruang sendiri untuk setiap ID di tiap ikon.

Ikon yang mudah diakses dan cermin RTL

Sembunyikan ikon dekoratif dengan aria-hidden dan focusable false. Beri aria-label yang jelas pada tombol yang hanya berisi ikon. Balik panah secara mendatar untuk bahasa kanan ke kiri.

Membersihkan berkas SVG pihak ketiga

SVG adalah format XML, jadi berkas tak terpercaya bisa memuat skrip dan penangan kejadian. Hapus simpul skrip dan sajikan SVG dengan kebijakan keamanan ketat serta tajuk nosniff.

Panduan Praktis dan Tutorial SVG