viewBox SVG dan Penskalaan Responsif

Lebar dan tinggi SVG menentukan ukuran hasil render di DOM. Atribut viewBox menentukan ruang koordinat internal. Keduanya tidak saling bergantung: viewBox "0 0 100 100" dengan width="200" height="200" menskalakan ruang koordinat sebesar 2 kali.

viewBox="min-x min-y width height". Yang paling umum: viewBox="0 0 100 100" menentukan ruang koordinat berukuran 100x100 yang dimulai dari titik asal. Nilai koordinat dalam SVG mengacu pada ruang ini, bukan piksel.

Untuk membuat SVG responsif, hilangkan atribut width dan height (atau atur nilainya menjadi 100%) dan biarkan viewBox menentukan proporsinya. Tambahkan CSS: svg { width: 100%; height: auto; }. SVG akan menyesuaikan ukurannya agar memenuhi wadah dengan tetap mempertahankan rasio aspek.

preserveAspectRatio mengatur cara viewBox menyesuaikan diri dengan area pandang SVG ketika rasio aspek berbeda. Nilainya: "xMidYMid meet" (bawaan—menambahkan bilah kosong), "xMidYMid slice" (memotong agar memenuhi area), "none" (meregangkan agar sesuai tanpa mempertahankan rasio aspek).

Mengubah min-x dan min-y menggeser bagian ruang koordinat SVG yang terlihat. viewBox="50 50 100 100" menampilkan wilayah dari (50,50) hingga (150,150). Cara ini memungkinkan penggeseran tampilan secara interaktif dengan memperbarui nilai viewBox menggunakan JavaScript.

Kurangi dimensi viewBox untuk memperbesar tampilan: viewBox="25 25 50 50" menampilkan wilayah yang lebih kecil dan memperbesarnya hingga memenuhi elemen SVG. Tambahkan dimensinya untuk memperkecil tampilan. Perbarui viewBox saat terjadi peristiwa roda tetikus untuk memperbesar atau memperkecil tampilan secara interaktif tanpa menskalakan elemen SVG.

SVG dalam tag img: dapat diskalakan secara responsif dengan object-fit, tetapi tidak dapat ditata dengan CSS atau dijalankan dengan skrip. SVG sebaris: sepenuhnya dapat diakses oleh CSS dan JavaScript, tetapi menambah ukuran HTML. Pilih berdasarkan kebutuhan interaktivitas.

SVG ikon menggunakan viewBox tetap (misalnya, "0 0 24 24") tanpa width/height, sehingga CSS dapat menentukan ukurannya: .icon { width: 1.5rem; height: 1.5rem; }. viewBox memastikan ikon diskalakan dengan benar pada ukuran apa pun sambil mempertahankan ketajaman gambar vektor.

Definisikan ikon di dalam elemen <symbol viewBox="0 0 24 24"> yang berada dalam SVG tersembunyi. Rujuk ikon tersebut dengan <use href="#icon-name">. Setiap elemen penggunaan dapat memiliki width, height, fill, dan color sendiri—satu file sprite untuk semua ikon.

SVG fill="currentColor" mewarisi properti warna CSS dari elemen tersebut atau induknya. Atur color: red pada SVG atau induknya, lalu ikon akan otomatis terisi warna merah. Cara ini memungkinkan ikon satu warna mengikuti warna teks tanpa penataan khusus SVG.

Jika konten SVG tampak terpotong atau berada di posisi yang tidak terduga, catat atau periksa nilai viewBox. Kesalahan umum adalah mengatur viewBox ke dimensi piksel karya sumber tanpa menyesuaikannya dengan ukuran hasil render, sehingga menyebabkan masalah penskalaan. Pastikan viewBox sesuai dengan batas konten karya SVG yang sebenarnya.

Bagaimana cara membuat SVG diskalakan secara responsif agar sesuai dengan lebar wadah apa pun?

viewBox SVG menentukan ruang koordinat internal yang tidak bergantung pada ukuran piksel hasil render, sehingga memungkinkan penskalaan responsif. Mengatur width:100%; height:auto dengan viewBox membuat SVG menyesuaikan diri dengan wadah apa pun. Pola sprite symbol+use, penerapan tema dengan currentColor, dan preserveAspectRatio membentuk perangkat lengkap untuk penggunaan SVG yang fleksibel dan dapat mengikuti tema.