Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

SVG Viewport dan viewBox (Untuk Pemula Lengkap)

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Adya Rosyada Yonas (you can also view the original English article)

Dalam tips cepat ini kita akan mendobrak apa viewport dan viewBox dalam SVG. Anda akan belajar:

  • Perbedaan antara viewport dan viewBox
  • Aspek SVG Anda dapat Anda kontrol dengan masing-masing
  • Bagaimana mereka masing-masing diterapkan

Ayo mulai!

SVG Viewport

Jika Anda benar-benar memecah kata “viewport”, Anda akan mendapatkan petunjuk tentang perannya dalam SVG; itu menciptakan "port" di mana Anda dapat "melihat" bagian dari SVG. Anda dapat membayangkan ini sebagai sesuatu yang mirip dengan jendela di mana Anda dapat melihat dunia di luar.

The SVG viewport is like a porthole window whose size determines what you can see through it
Area pandang SVG seperti jendela yang ukurannya menentukan apa yang dapat Anda lihat melaluinya

Seperti halnya jendela, ukuran area pandang menentukan berapa banyak yang dapat Anda lihat, tetapi tidak menentukan ukuran apa pun yang mungkin terlihat melalui viewport tersebut. Apa yang ada di sisi lain secara teori bisa menjadi ukuran apa pun.

Misalnya, Anda mungkin memiliki bentuk dalam grafik Anda yang 100px kali 100px, tetapi jika Anda menetapkan area pandang menjadi 50px kali 50px, Anda hanya akan melihat sebagian dari bentuk itu. Ukuran viewport diatur dengan menambahkan atribut lebar dan tinggi ke elemen svg, seperti:

Dalam SVG pertama, kita melihat keseluruhan 100px dengan lingkaran 100px, tetapi di SVG kedua ketika kita menetapkan ukuran viewport kita menjadi 50px kali 50px, kita hanya melihat seperempat lingkaran.

SVG viewBox

ViewBox dapat dianggap seperti viewport tetapi dengan dua fitur tambahan: ia dapat "pan" dan dapat "zoom". Membangun analogi "melihat melalui kaca", jika viewport seperti jendela, viewBox seperti teleskop.

The SVG viewBox is very similar to the viewport but it can also pan and zoom like a telescope
Kotak tampilan SVG sangat mirip dengan viewport tetapi juga dapat menggeser dan memperbesar seperti teleskop

Parameterr viewBox

Kita mengontrol viewBox dengan menambahkannya sebagai atribut ke elemen svg, dengan nilai yang terdiri dari empat nomor ruang terpisah :

Dua angka pertama menentukan posisi kotak tampilan, yang akan kita anggap sebagai "panning". Dua angka terakhir menentukan dimensi viewbox, yang akan kita anggap sebagai “zooming”.

Catatan: serta elemen svg, atribut viewBox juga dapat digunakan pada simbol elemen, penanda, pola, dan tampilan.

Zooming

Kita akan mulai dengan melihat "zooming", yang dapat kita lakukan dengan dua parameter viewbox terakhir: lebar dan tinggi masing-masing. Kita akan membiarkan dua parameter pertama pada 0 0 untuk saat ini.

Jika dua parameter terakhir tersebut memiliki dimensi yang sama dengan area pandang, tidak ada zoom masuk atau keluar sehingga tidak ada perubahan. Lihatlah SVG nomor 3 misalnya:

Namun jika kita membuat kedua angka itu lebih besar dari dimensi viewport, kami akan secara efektif memperkecil, dan jika kita membuatnya lebih kecil, kita akan memperbesarnya.

Dalam SVG nomor 4 pada contoh di atas, kita telah mengatur lebar dan tinggi viewbox menjadi 100, yang menggandakan ukuran viewport kita. Ini "memperkecil" dan menunjukkan konten ganda, sehingga lagi mengungkapkan seluruh lingkaran.

Dalam SVG kelima, viewbox disetel ke lebar dan tinggi 25, yang merupakan separuh ukuran viewport kita. Ini "memperbesar", menunjukkan setengah jumlah konten.

Panning

Dua parameter viewbox yang pertama memungkinkan Anda untuk "menggeser" dengan menetapkan di mana sudut kiri atas kotak tampilan seharusnya. Nomor pertama mengontrol posisi horizontal, dan yang kedua mengontrol posisi vertikal.

  • Untuk menggeser ke kanan, tambahkan angka pertama.
  • Untuk menggeser ke kiri, kurangi angka pertama.
  • Untuk menggeser ke bawah, tambahkan angka kedua.
  • Untuk menggeser ke atas, kurangi angka kedua.

Lihatlah cara kerja panning ini dalam contoh ini. Untuk mengingatkan Anda, SVG nomor 3 memiliki 50 hingga 50 viewport, viewBox ditambahkan tetapi tanpa panning atau zooming. Nomor 6 adalah sama, tetapi menyorot ke kanan dan ke bawah:

Panning dan Zooming Bersama

Anda dapat, tentu saja, baik pan dan zoom pada saat yang sama, dengan menggunakan keempat parameter sekaligus, misalnya:

Saat Menggunakan viewbox, Atur Viewport Anda

Setiap kali Anda menggunakan atribut viewbox, jangan lupa untuk mengatur dimensi viewport Anda juga. Jika tidak, mereka akan menjadi 100% dan Anda mungkin memiliki grafik yang terlalu besar:

Pendeknya

Mari kita meringkas semuanya menjadi beberapa poin:

  • Area pandang seperti jendela yang Anda lihat untuk melihat konten SVG.
  • ViewBox mirip dengan viewport, tetapi Anda juga dapat menggunakannya untuk "pan" dan "zoom" seperti teleskop.
  • Kontrol viewport melalui parameter lebar dan tinggi pada elemen svg.
  • Kontrol viewBox dengan menambahkan atribut viewBox ke elemen svg. Ini juga dapat digunakan pada simbol elemen, penanda, pola dan tampilan.
  • Nilai atribut viewBox terdiri dari empat parameter terpisah ruang.
  • Dua parameter viewbox yang pertama mengontrol "panning" dan dua kontrol "zooming" terakhir.
  • Tingkatkan parameter pertama ke "pan" kanan, turunkan ke "pan" kiri.
  • Tingkatkan parameter kedua untuk "menggeser" ke bawah, turunkan ke "pan" ke atas.
  • Buat dimensi viewbox, yaitu dua parameter terakhir, lebih besar daripada viewport ke “zoom out”, dan lebih kecil ke “zoom in”.

Saya harap itu membantu memperjelas air yang kadang keruh di viewport SVG dan viewBox. Selamat menciptakan SVG!

Dasar-dasar SVG lainnya

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.