14: Sistem Ikon SVG - Membangun Defs - Trik CSS

Anonim

The elemen kopling untuk seluruh ide tentang sistem ikon SVG inline. Kami belajar bahwa cara bersih untuk melakukannya adalah dengan meletakkan semua yang ingin Anda gambar nanti ke dalam blok sehingga tidak dirender dan kami dapat mereferensikannya nanti (beri tahu mereka browser untuk menggambar ikon itu).

Dalam video ini kita akan menghabiskan waktu untuk membuat blok kita sendiri dengan tangan. Ini tidak terlalu sulit dan, saya pikir, mengingatkan bagaimana semua ini bekerja.

Kami akan membuatnya dari SVG yang kami temukan di berbagai tempat di seluruh web. Kami mengambil satu dari The Noun Project, satu dari IcoMoon, dan satu dari Shutterstock. Kami melakukan uji tuntas kami dalam membuka SVG, memperbaiki bentuk aneh apa pun, menyesuaikan ukuran kanvas, dan yang lainnya. Tidak ada batasan di sini dari mana informasi vektor ini dapat berasal. Ketiga sumber ini hanya untuk menunjukkan bahwa SVG bisa berasal dari mana saja vektor.

Nanti kami berharap dapat menyederhanakan proses ini, tetapi memahami mur dan baut tentang cara kerjanya selalu berguna. Anda tidak pernah tahu kapan Anda perlu menggali lebih dalam (misalnya untuk mencari tahu mengapa sesuatu tidak bekerja dengan benar).