Kali ini saya akan menerngkan secara rinci membuat SVG,SVG juga menawarkan pendekatan yang lebih fleksibel untuk mengulangi gambar latar belakang pada halaman web dari pada susunan CSS. Mari lihat mengapa itu, dan sekali lagi saya akan mengulas tentang bagaimana Anda dapat menggunakannya.
Tutorial ini tersedia dalam bentuk video dan tekstual - berikut adalah perincian tentang apa yang akan Anda pelajari:
- Kita akan mulai dengan melihat metode CSS tiling yang lebih dikenal.
- Kemudian kita akan membuat beberapa pola SVG, mempelajari sintaks yang tepat saat kita go.
- Kita akan membandingkan kedua pendekatan dan mendiskusikan pro dan kontranya.
- Selanjutnya, kita akan melihat beberapa tool yang dapat Anda gunakan untuk membuat pola SVG.
- 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.
body {
background: url("cuadros.png");}
</b:if> 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.
<svg width="100%" height="100%">
</svg>
</b:if> Untuk membuat pattern kita harus menempatkannya di bagian defs (definitions) dari svg, seperti:
<svg width="100%" height="100%">
<defs>
<pattern>
</pattern>
</defs>
</svg>
</b:if> 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):
<svg width="100%" height="100%">
<defs>
<pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
</pattern>
</defs>
</svg>Setelah mengatur parameter-parameter itu, kita sekarang perlu mendefinisikan gambar yang akan diulang. Mari buat lingkaran dasar:
<svg width="100%" height="100%">
<defs>
<pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="25">
</circle>
</pattern>
</defs>
</svg>
</b:if> 
