Pereka Dapatkan Corak Latar Belakang SVG Percuma dari Corak Hero

Semua pelayar web moden menyokong SVG dan ia format imej yang paling fleksibel anda boleh gunakan. Tetapi merancang SVG adat dari awal bukanlah tugas yang mudah.

Itulah sebabnya alat seperti Corak pahlawan boleh jadi sangat berharga kepada pereka. Ia adalah perpustakaan percuma corak SVG berulang yang anda boleh menyesuaikan dengan gaya, warna dan opacities yang berlainan.

Corak Hero telah baik lebih 40+ corak yang berbeza untuk memilih dari dan semuanya disenaraikan di laman utama. Seperti yang anda tatal ke bawah, anda akan melihat demo secara langsung untuk setiap orang dan anda boleh mengklik salah satu daripada mereka untuk melihat bagaimana rupa mereka.

Di bahagian atas halaman, anda akan menemui bar tetap dengan tetapan ke menukar latar depan dan warna latar belakang. Warna latar belakang terpakai kepada permukaan rata dan warna latar depan terpakai kepada corak dalam SVG.

Terima kasih kepada gaya campuran semulajadi, ia sukar untuk menghasilkan kombo warna yang buruk (walaupun sudah tentu masih boleh dilakukan). Corak pelbagai dari dam kepada ikon pengulangan terperinci seperti sauh.

Apabila anda mencari corak yang anda suka klik blok itu untuk tingkap modal dengan maklumat lanjut. Dari sini, anda boleh menyesuaikannya warna latar hadapan / latar belakang, bersama dengan latar belakang keaslian untuk ikon.

Tetapi keajaiban sebenar berlaku dalam kotak coretan kod di mana anda boleh salin CSS untuk membenamkan SVG semata-mata melalui kod. Dalam CSS ada a base64 () kaedah untuk menukar data rentetan kepada data SVG. Ini adalah agak biasa dan ia berfungsi dengan imej lain seperti PNGs juga.

Oleh itu, jika anda tidak mahu fail SVG disimpan secara tempatan, anda boleh semata-mata salin / tampal kod CSS terus ke dalam stylesheet anda. Ini akan membenamkan latar belakang yang berulang dengan warna-warna yang betul ke dalam laman web anda. Betapa sejuknya!

Atau, jika anda lebih suka edit SVG itu sendiri awak boleh muat turun salinan imej SVG yang tidak diedit. Dengan cara ini anda boleh lakukan semua suntingan secara manual dalam perisian reka bentuk seperti Illustrator.

Corak Hero adalah salah satu alat yang membolehkan para pereka mengambil kawalan penuh terhadap SVGs betul dari penyemak imbas. Mengulangi latar belakang yang digunakan semata-mata bergantung pada PNG tetapi piawaian web telah maju cukup jauh SVG boleh mengambil tempat mereka.

Untuk mulakan, lawati laman utama Corak Hero dan semak imbas perpustakaan corak mereka. Corak baru tambah kerap, jadi pastikan anda menyemak semula setiap kerap.