Alat ini menyusun corak sebagai markup SVG biasa, jadi hasilnya kekal tajam pada sebarang tahap zum atau ketumpatan skrin, dan biasanya hanya beberapa ratus bait, jauh lebih ringan daripada jubin PNG. Salin CSS untuk memasukkan background-image berulang terus ke dalam helaian gaya, atau salin fail SVG berasingan untuk digunakan sebagai aset. Tiada apa yang anda cipta dihantar ke mana-mana pelayan: corak itu dilukis sepenuhnya pada peranti anda, jadi ia terus berfungsi walaupun luar talian selepas halaman dimuatkan.
Penjana Corak SVG Percuma
Berjalan sepenuhnya dalam pelayar anda - tanpa muat naik, tanpa pendaftaran.
Corak
Gaya
Latar Depan
Latar Belakang
Apakah penjana corak SVG?
Penjana corak SVG membina latar belakang berulang tanpa kelim daripada bentuk geometri seperti titik, garisan, grid dan zigzag. Anda pilih bentuk, warna, saiz jubin serta ketebalan garisan, dan alat ini menghasilkan fail SVG kecil yang tajam pada sebarang saiz, lengkap dengan kod CSS sedia tampal. Semuanya dijana dalam pelayar, jadi tiada apa-apa dimuat naik.
Cara guna
- 1Pilih corak. Pilih bentuk - titik, gelang, grid, pepenjuru, silang, tambah, zigzag dan banyak lagi - daripada senarai contoh.
- 2Tetapkan warna dan bentuk. Pilih warna latar depan dan latar belakang (atau jadikan latar belakang lut sinar), kemudian laraskan penggelangsar saiz, ketebalan dan kelegapan sambil pratonton dikemas kini secara langsung.
- 3Salin atau muat turun. Tukar antara tab CSS dan SVG, salin kod, atau muat turun fail .svg berasingan untuk digunakan di mana-mana.
Untuk siapa
- Pembangun web yang ingin menambah tekstur latar belakang yang ringan pada bahagian hero, kad atau seksyen tanpa memuat naik fail imej.
- Pereka UI dan jenama yang membuat prototaip tekstur seamless mengikut warna jenama dan mengeksportnya sebagai aset SVG yang tajam.
- Pembina emel dan slaid yang memerlukan corak kecil boleh diubinkan yang kekal tajam pada sebarang paparan.
- Pelajar dan peminat yang ingin memahami cara elemen
<pattern>SVG dan pengubinan latar belakang CSS berfungsi dengan mengubah nilai dan menyemak hasilnya. - Pencipta kandungan yang mahu menghasilkan latar belakang hiasan pantas untuk thumbnail, sepanduk dan mockup.
Soalan lazim
Adakah penjana corak SVG ini percuma?
Ya, ia sepenuhnya percuma tanpa perlu daftar dan tiada had. Setiap corak dijana dalam pelayar anda, jadi anda boleh cipta dan salin sebanyak mana yang anda mahu, malah luar talian selepas halaman dimuatkan.
Adakah corak ini benar-benar tanpa kelim?
Ya. Setiap bentuk dilukis supaya tepinya sejajar tepat dengan jubin bersebelahan, dan corak itu berulang mengikut grid tetap. Kedua-dua background-image CSS dan elemen <pattern> SVG mengubinkan sel yang sama tepi ke tepi tanpa kelim yang kelihatan.
Patutkah saya guna output CSS atau SVG?
Guna CSS untuk menampal latar belakang berulang terus ke helaian gaya - ini paling pantas untuk laman web. Guna muat turun SVG apabila anda perlukan fail berasingan, contohnya sebagai aset imej, dalam alat reka bentuk, atau disematkan terus dalam HTML.
Mengapa guna corak SVG berbanding PNG?
SVG ialah vektor, jadi ia kekal tajam pada sebarang tahap zum atau ketumpatan skrin dan tidak pernah pecah piksel. Jubin SVG geometri biasanya hanya beberapa ratus bait, jauh lebih kecil daripada PNG setara, dan anda boleh tukar warnanya bila-bila masa tanpa eksport semula.
Bolehkah saya jadikan latar belakang lut sinar?
Boleh. Tanda pilihan Lut Sinar dan isian latar belakang akan digugurkan, jadi corak hanya menunjukkan bentuk latar depan. Ini membolehkan anda meletakkan corak di atas warna, imej atau gradien sedia ada.
Adakah reka bentuk saya dimuat naik ke mana-mana?
Tidak. Keseluruhan corak dibina secara tempatan dalam pelayar anda menggunakan markup SVG biasa dan tiada apa yang dihantar ke pelayan, jadi warna dan tetapan anda kekal peribadi pada peranti anda.