Panduan Desain Web untuk Menggunakan Viewbox 'SVG' (HTML)
Viewbox adalah atribut yang umum digunakan saat membuat bentuk SVG . Jika Anda menganggap dokumen sebagai kanvas, kotak tampilan adalah bagian dari kanvas yang ingin dilihat oleh pemirsa. Meskipun halaman tersebut mungkin mencakup seluruh layar komputer, angka itu mungkin hanya ada di sepertiga dari keseluruhan.
Kotak Tampilan memungkinkan Anda memberi tahu parser untuk memperbesar ketiga itu. Ini menghilangkan ruang putih ekstra. Pikirkan kotak tampilan sebagai pendekatan virtual untuk memotong gambar.
Tanpa itu, grafik Anda akan muncul sepertiga dari ukuran sebenarnya.
Nilai Kotak Lihat
Untuk memotong gambar, Anda harus membuat titik pada gambar untuk memotongnya. Hal yang sama berlaku ketika menggunakan atribut kotak lihat. Pengaturan nilai untuk viewbox meliputi:
- minx — awal x berkoordinasi
- miny — koordinat awal y
- width —width dari viewbox
- tinggi —tinggi dari viewbox
Sintaks untuk nilai kotak tampilan adalah:
viewBox = "0 0 200 150"
Jangan mengacaukan lebar dan tinggi kotak tampilan dengan lebar dan tinggi yang Anda tetapkan untuk dokumen SVG . Ketika Anda membuat file SVG, salah satu nilai pertama yang Anda buat adalah lebar dan tinggi dokumen. Dokumennya adalah kanvas. Kotak tampilan dapat menutupi seluruh kanvas atau hanya sebagian darinya.
Kotak tampilan ini mencakup seluruh halaman.
Kotak tampilan ini mencakup setengah halaman yang dimulai di sudut kanan atas.
Bentuk Anda juga memiliki penugasan tinggi dan lebar.
Ini adalah dokumen yang mencakup 800 x 400 px dengan viewbox yang dimulai di sudut kanan atas dan memperluas setengah halaman. Bentuknya persegi panjang yang dimulai di sudut kanan atas kotak tampilan dan bergerak 100 px ke kiri dan 50 px ke bawah.
Mengapa Setel Viewbox?
SVG melakukan lebih dari sekedar menggambar bentuk. Ini dapat membuat satu angka di atas yang lain untuk efek bayangan. Itu bisa mengubah bentuk sehingga miring ke satu arah. Untuk filter lanjutan, Anda harus memahami dan menggunakan atribut kotak lihat.