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

Cara Menggunakan Pola SVG sebagai Latar Belakang

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Pola SVG menawarkan pendekatan yang lebih fleksibel untuk mengulangi gambar latar belakang pada halaman web dari pada susunan CSS. Mari lihat mengapa itu, dan bagaimana Anda dapat menggunakannya.

Apa yang akan Anda Pelajari

Tutorial ini tersedia dalam bentuk video dan tekstual - berikut adalah perincian tentang apa yang akan Anda pelajari:

  1. Kita akan mulai dengan melihat metode CSS tiling yang lebih dikenal.
  2. Kemudian kita akan membuat beberapa pola SVG, mempelajari sintaks yang tepat saat kita go.
  3. Kita akan membandingkan kedua pendekatan dan mendiskusikan pro dan kontranya.
  4. Selanjutnya, kita akan melihat beberapa tool yang dapat Anda gunakan untuk membuat pola SVG.
  5. Terakhir, kita akan memeriksa dukungan browser untuk SVG.

Saksikan Screencast

1. CSS Tiling

Mari mulai dengan memeriksa tiling CSS - metode yang lebih tradisional untuk mengulang gambar untuk latar belakang.  Idenya sangat mudah: kita meneruskan URL ke properti background dari elemen yang ingin kita bahas. URL menunjuk ke file gambar, dalam hal ini file PNG. Secara default gambar kita akan terulang di kedua sumbu.

Berikut tampilannya:

2. Pola SVG

Mari sekarang lihat pola SVG - sesuatu yang, ketika pertama kali dihadapi, sedikit lebih sulit untuk dipahami. Kita akan mulai dengan memberi contoh secara manual.

Hand Coding SVG

Untuk penyegaran tentang cara mengemas semua bagian dari berbagai SVG, dua tutorial pemula dari Kezz Bracey ini sangat membantu:

Mulai Dengan SVG

Untuk memulai, kita akan membuat elemen svg, memberinya tinggi dan lebar 100% sehingga menempati wadah apa pun yang kita tempati.

Untuk membuat pattern kita harus menempatkannya di bagian defs (definitions) dari svg, seperti:

Sekarang mari tambahkan beberapa atribut ke elemen pola itu. Kita akan memberikannya sebuah ID sehingga kita dapat mereferensikannya nanti, kemudian kita akan menentukan mulai X dan Y koordinat, nilai lebar dan tinggi, dan menyatakan bahwa patternUnits adalah userSpaceOnUse (ini mendefinisikan sistem koordinat, yang dapat Anda baca lebih lanjut tentang di MDN):

Setelah mengatur parameter-parameter itu, kita sekarang perlu mendefinisikan gambar yang akan diulang. Mari buat lingkaran dasar:

Tidak ada pola yang akan terlihat, tetapi itu karena kita telah mendefinisikannya tanpa benar-benar menerapkannya pada apa pun. Mari ubah itu dengan menerapkannya ke <rect> di luar <defs>kita.

Yang terpenting, Anda akan melihat atribut fill (yang mungkin biasanya berupa nilai atau nama warna) menunjuk ke URL yang berisi ID pola kita yang baru didefinisikan: fill="url (#polka-dots)".

Lihat demo di bawah ini:

Pattern SVG Yang Lebih Kompleks

Untuk contoh yang lebih rumit, kita akan meninggalkan hand-coding di belakang dan membuat pola menggunakan tool pihak ketiga. Kita akan menggunakan heropatterns.com, situs web yang memungkinkan Anda memilih pola SVG yang telah ditetapkan, mengubah warna dan atributnya, lalu menyalin kode yang dihasilkan.

Saya akan menggunakan pola jigsaw:

Daripada menyalin CSS yang dihasilkan secara keseluruhan, saya akan menyalin hanya parameter d ="", yang merupakan jalur sebenarnya yang digambar.

Kode svg yang kita siapkan akan hampir sama persis dengan contoh kita sebelumnya. ID di dalam <pattern> akan berbeda tentu saja, dan kami akan memberikannya dimensi yang sedikit berbeda sesuai dengan apa yang digunakan pada heropattern.

Jadi di mana, dalam contoh terakhir kita, kita mendefinisikan <circle>, kali ini kita mendefinisikan <path>. Kita memberinya isi pada warna, lalu kita tempelkan di path yang kita salin beberapa saat yang lalu. Inilah yang memberi kita hasilnya:

3. CSS Tiling Vs. SVG Patterns

😀 CSS tiling pro::

<😀 SVG pattern pro:os:

😡 SVG pattern contra:ons:

    Relatif sulit digunakan use Dukungan browser tidak universalport
4. SVG Pattern ToolsoolsLihatlah keempat sumber daya ini, yang dapat sangat berguna untuk menghasilkan kode dan ide yang sebenarnya!eas!

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.