Cara Menggunakan Pola SVG sebagai Latar Belakang

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:

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");
}

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>

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

<svg width="100%" height="100%">
    <defs>
        <pattern>
            
        </pattern>
    </defs>
</svg>

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>

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.

<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>
    
    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect>
</svg>

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!

5. Dukungan BrowserportSVG adalah teknologi yang didukung secara luas, bahkan di browser yang lebih tua seperti IE9. Beberapa fitur SVG, bagaimanapun, tidak menikmati support sedemikian rupa, dan benar-benar tidak banyak informasi yang tersedia untuk spesifikasi properti <pattern> (seperti patternUnits, patternContentUnits, patternTransform, dll.). Ada beberapa tautan bermanfaat di bawah ini, termasuk dokumentasi oleh Mozilla – mereka akan memberi Anda rasa informasi apa yang saat ini tersedia.ble.
Dari pengujian saya sendiri, saya dapat memberi tahu Anda bahwa browser modern di Windows dan Mac OS semuanya berhubungan dengan pola SVG. Bahkan turun ke IE11.E11.
KesimpulansionMari simpulkan poin-poin penting dari tutorial ini.ial.
Pelajari lebih lanjutMore
- Pattern SVG MDN Web DocsDocs