Artikel tentang renovasi apartemen , tentang efisiensi penggunaan sumber daya grafis perangkat modern. Dari jam tangan pintar ke televisi ke dinding.
Dongeng tentang cara menyisipkan gambar berulang di dalam halaman, sehingga semua orang akan baik-baik saja.
Nah, apakah Anda siap untuk bermain ..? Lalu melaju
Pendahuluan
Ada tugas untuk membuat halaman situs dengan gambar berulang.
Bagaimana kita memutuskan?
Level 1 Trite primitif
Cara termudah yang akan digunakan sejumlah besar huruf untuk mengambil gambar latar sekaligus (paling sering format png, karena diatur secara default dalam Figma dan Avocode) dan gagal ke blok melalui gambar latar belakang;
(* yah, kamu tidak seperti itu, pembaca mudaku?)
body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }
Jika pengembang sedikit lebih berpengalaman, dan tahu bahwa jpg dikompresi, sebagai aturan, lebih baik daripada png, maka latar belakangnya akan dalam format jpg.
Level 2 Saya tidak peduli dengan kinerja
Jika perancang tata letak tidak peduli dengan kinerja halaman yang dikembangkan, dan dia tahu bahwa di tempat ini Anda dapat secara signifikan menghemat lalu lintas pengguna, ia dapat mengisolasi pola (bagian berulang dari latar belakang) dari gambar ini jika ia beruntung.
Jika tata letak diimplementasikan di PhotoShop, maka Anda harus memotong. Karena latar belakang diatur oleh elemen yang tidak terpisahkan di sana.
Contoh mengambil latar belakang berulang dari Avocode
Dalam Figma, ini diterapkan sedikit lebih mudah. Meskipun itu akan tergantung pada bagaimana perancang menciptakan latar belakang ini untuk Anda.
* Siapa yang ingin bermain, saya akan meninggalkan contoh saya untuk diunduh.
Dalam contoh ini, ada dua opsi dengan pola png dan svg, yang akan dibahas nanti.
Oke, sekarang alih-alih satu gambar latar belakang besar, kami memiliki elemen ubin berulang (CSS Tiling).
body { background: url("bg.jpg"); }
Bagus sekali, bagus sekali. Sekarang, alih-alih (586kB), pengguna mengambil semuanya dari server (~ 24kB); Untung!
Level 3 Aku akan memerasmu hingga maksimal
Mari kita berpikir, mungkinkah memperbaiki situasi entah bagaimana? Hmm, tapi gambarnya tidak rumit, mungkin Anda bisa menyalipnya menjadi vektor?
Dan kemudian iblis pencobaan bersembunyi.
Bertujuan untuk yang terbaik, kita sering merusak William Shakespeare yang baik
Ketika ini tidak dilakukan secara rasional, atau tidak sama sekali:
- Anda memiliki pola pengulangan yang kompleks. Diperlukan waktu berjam-jam untuk menggambar ulang, dan jika Anda juga menekankan perancang dengan tugas ini, maka karma Anda pasti akan berkurang.
- Ada bayangan atau elemen dengan gambar kabur, dan Anda tidak setuju untuk menolaknya.
* Di sini perlu dijelaskan
Jika Anda mengekspor grafis SVG, misalkan dari Figma atau Illustrator, tetapi jangan kode sendiri di editor, maka kemungkinan besar elemen blur atau bayangan akan dimasukkan ke dalam SVG dalam format base64 dan ini tidak akan meningkatkan kinerja Anda, karena file seperti itu, pada kenyataannya, mungkin lebih berat dari format analog jpg.
Selalu periksa apa yang Anda tawarkan. Tentu saja, beberapa elemen ini juga dapat dibuat dengan kode menggunakan filter tag, gunakan, objek ... tetapi untuk bekerja dengannya, Anda memerlukan keterampilan yang dipompa, yang jarang terjadi.
Ok, mari kita buat SVG dan lihat apa yang terjadi.
* Demi kemurnian percobaan, gambar yang ditampilkan tidak dikompres oleh utilitas pihak ketiga dan disimpan dalam kualitas 100% menggunakan PhotoShop, Illustrator dan Avocode.
Oke, svg kami kurang dari jpg / png dari versi aslinya.
Ini tidak mengherankan, karena di dalamnya kita hanya menyisakan warna dasar yang kita lihat, dan bukan yang muncul di persimpangan objek dengan blur.
Perbedaan antara ukuran file png / jpg tampaknya tidak terlalu signifikan, dan mulai memainkan peran hanya jika gambarnya besar.
* Saya lebih suka png, dan mengatur warna latar belakang ke properti warna latar belakang, tapi ini dari tugas.
Saya agak bingung bahwa png / jpg yang dihasilkan dibuat dari svg lebih kecil dari SVG dalam ukuran (bahkan dibersihkan dari sistem sampah (pola-bg_cleared.svg) menggunakan SVGO )
Tapi kemudian, saya sadar bahwa jika saya ingin mengurangi / menambah ukuran ubin latar belakang untuk ponsel atau TV, ini akan membutuhkan menghubungkan pola-pola baru (pola-bg_min) dan SVG akan tetap sama (15kB - selalu), dan tidak ada pengaburan diamati
Ini adalah nilai tambah yang signifikan, terutama jika pengguna melihat halaman dari ponsel mahal dengan resolusi yang baik, dan perancang tata letak, mendukung Google Page Speed, menyengat semua gambar sebelum serigala muncul. Ini dia tabungan =)
body { background-image: url(picture.svg); }
Terlihat sangat akrab.
Ok, rumit. Misalkan gaya yang tubuh akan sertakan dalam CSS kritis, lalu mari kita render vektor langsung dalam gaya. * Agar tidak membuang sampah sembarangan pada halaman, saya akan mengambil pola yang berbeda, yang lebih kecil.
body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }
Ada banyak CSS dan berhenti berfungsi
Jadi, sekarang perlu untuk menyandikan semua ini dengan benar. Penyisipan SVG yang tidak terenkripsi hanya didukung oleh browser Webkit. Terima kasih, Julia Bukhvalova, atas sumber kode yang berguna yang akan membantu kami dalam hal ini.
body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
Contoh untuk ilustrasi, Bagaimana SVG dapat dikemas dalam CSS.
Kursor adalah SVG
Semuanya tampak baik-baik saja, tetapi saya yakin saya akan menggunakan pola ini di semua halaman situs saya? Tentunya perlu dimasukkan ke dalam CSS kritis, atau mungkin itu akan lebih benar di biasa - plug-in CSS dan berharap bahwa browser cache itu? Mungkin semua sama, Anda dapat menghubungkannya hanya untuk halaman tertentu? Seseorang yang pintar mengatakan bahwa kode yang ditempatkan dalam HTML dikumpulkan oleh browser lebih cepat dan memiliki prioritas lebih tinggi dalam hal kecepatan rendering. Begitu banyak pertanyaan ... Anda harus mencoba.
Level 4 Saya akan memeras semua jus dari Anda
Pertama, kita akan membuat elemen svg yang akan memiliki tinggi dan lebar 100% dari unit luar sehingga menempati setiap wadah tempat kita meletakkannya.
<svg width="100%" height="100%"> </svg>
Untuk membuat pola, kita harus meletakkannya di tag svg defs (definition), misalnya seperti ini:
<svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>
Sudah tidak buruk, maka Anda perlu menambahkan atribut dengan bantuan yang kami dapat berinteraksi dengan pola dan entah bagaimana menyebutnya.
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>
Kami akan memberikannya sebuah pengenal sehingga dapat direferensikan nanti, kami juga akan menunjukkan koordinat awal dari referensi X dan Y, lebar dan tinggi yang kami atur di editor grafis, atur lingkup ViewBox (Anda dapat mengambilnya dari svg yang sudah selesai)
... dan atur atribut patternUnits ke userSpaceOnUse (ini mendefinisikan sistem koordinat, yang dapat Anda pelajari lebih lanjut tentang MDN )
Singkatnya, dengan patternUnits = "userSpaceOnUse", bentuk pada kanvas SVG sepenuhnya diisi dengan ubin pola. Jika ubin terakhir tidak sepenuhnya cocok dengan panjang atau lebar, maka dipangkas.
Sekarang kita perlu memutuskan gambar yang akan diulang
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>
Semuanya hampir siap, tetap memanggil pola kita pada objek tertentu, yah, misalnya, membuat area persegi panjang untuk diisi.
<svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>
Anda dapat melihat bahwa atribut fill (yang biasanya berisi warna isian sekarang menunjuk ke URL yang berisi pengenal pola baru kami: fill = "url (# pattern-bg)".
Pola kami yang berulang menempati semua ruang dengan lebar, tapi saya juga menginginkan ketinggiannya, semuanya akan memakan waktu. Untuk melakukan ini, bungkus svg kami dengan ketinggian tinggi: 100vh;
<div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>
sekarang bagus. Tentu saja, dalam tag Anda harus mencoba memasukkan gambar yang lebih serius, tetapi saya mengarahkan Anda ke arah yang benar.
Metode penyisipan ini, tidak seperti metode melalui latar belakang, memungkinkan Anda untuk mengontrol detail elemen SVG. Ada kebebasan tertentu tentang apa yang harus diberikan kepada pengguna dan apa yang tidak. Dan jika ada keinginan untuk bereksperimen, dan menambahkan sedikit JS, maka Anda juga dapat mencapai morphing (mengubah bentuk).
Dari masalah metode ini memasukkan ubin berulang, saya menemukan bahwa tidak ada cara (baik, atau saya tidak bisa menemukannya, dan mereka yang tahu akan menulis di komentar) bagaimana mengubah ukuran ubin ketika mengubah ukuran layar browser. Faktanya, atribut width / height dari tag pola bertanggung jawab untuk ini, tapi saya tidak bisa menjangkau mereka melalui CSS dan media. Yah, selalu ada JS jika Anda benar-benar perlu
Curang saya tidak tahu grafisnya, tapi saya ingin menyentuh yang indah
Jika karena alasan tertentu Anda tidak tahu cara menggambar elemen berulang pola dalam editor grafis, atau Anda tidak punya waktu untuk ini. Berikut adalah situs-situs dengan solusi siap pakai di mana orang-orang baik berbagi hal-hal baik dengan dunia.
* suplemen kecil (di mana tanpa porno saat ini)
https://svgporn.com/
Dukungan Tim. Ada apa dengan dukungan?
Di awal artikel saya menulis bahwa semua orang akan baik-baik saja, saya akui, itu bohong.
Pengguna IE dari usaha Anda tidak akan melihat dukungan dari tag ini ke IE dan tidak datang, dan tidak akan datang, tetapi sebaliknya dengan SVG semuanya tidak begitu buruk, bahkan hingga 9 IE caniuse.com
Saya juga merekomendasikan untuk memeriksa pekerjaan yang sudah selesai di Firefox, kadang-kadang ada insiden.
Agar penggemar membaca dokumentasi, tinggalkan juga beberapa tautan
https://developer.mozilla.org/en/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/patternhttps://developer.mozilla.org/en/docs/Web/SVG/Tutorial/PatternsBagi mereka yang pergi sampai akhir, saya akan meninggalkan contoh saya tentang bagaimana bersenang-senang dengan SVG bawaan, dari awal
Mari buat web lebih baik.PS Terima kasih khusus kepada Alexandr_TT dan situsnya https://svg-art.ru/ dalam mempromosikan SVG di Internet luas berbahasa Rusia