Begitu kita memiliki apa yang kita sebut "blok defs" SVG - potongan SVG yang mendefinisikan semua hal yang ingin kita gambar nanti - di mana kita meletakkannya? Sejauh ini kami telah memasukkannya langsung ke HTML, dan itu benar-benar berfungsi. Jika kita membiarkannya di bagian atas halaman, ucapkan tepat setelah tag pembuka :
Itu akan bekerja dengan baik di semua browser yang mendukung SVG.
Mungkin tergoda untuk menurunkannya. Mungkin ikon tidak terlalu penting untuk halaman, tidak sepenting konten sebenarnya yang dimaksudkan untuk dikirimkan oleh halaman, jadi kami memindahkan ikon ke bagian bawah halaman, menunda pemuatannya seperti yang sering kita lakukan dengan JavaScript. Kami mencoba ini di video, tetapi memiliki masalah dengan Safari yang merender ikon yang kemudian kami coba sama sekali. Sejujurnya, saya telah melihat perilaku yang tidak konsisten atau berbagai jenis di browser lain juga melakukannya dengan cara ini, dan tampaknya lanskap sedikit bergeser dalam hal ini. Jadi yang saya dengar: adalah hal yang sulit untuk diterapkan. Paling aman untuk meletakkan blok di bagian atas jika Anda akhirnya menyimpan def tepat di dokumen Anda.
Dalam video ini kita melihat beberapa pengujian dasar dari semua ini, dan kemudian melihat beberapa situs dunia nyata yang menggunakan sistem ini dan bagaimana / di mana mereka memasukkan blok svg defs.
Lihat Pena 954e71cb5d5e79fb61d3c89bb3f21b8a oleh Chris Coyier (@chriscoyier) di CodePen.
Catatan
Saya suka istilah "SVG defs block" - supaya kita bisa menyebutnya sesuatu yang memiliki tujuan tertentu tetapi sebenarnya tidak memiliki nama resmi. Namun, Anda tidak selalu harus benar-benar menggunakan tag. Ketika Anda menggunakan s, itu tidak merender sendiri, dan memang saya tidak berpikir seharusnya ada di dalam . Saya pernah mendengar definisi gradien di SVG sama, dan bahkan tidak akan berfungsi jika ada di file . Terlepas dari itu, ini masih merupakan "blok kode SVG yang baru saja kami definisikan untuk digunakan nanti" jadi saya mungkin akan terus menyebutnya sebagai "blok def SVG".