Sebaik sahaja kita mempunyai apa yang kita sebut sebagai "defs block" SVG - bahagian SVG yang menentukan semua perkara yang ingin kita lukis kemudian - di mana kita meletakkannya? Setakat ini kami memasukkannya terus ke dalam HTML, dan ini betul-betul berfungsi. Sekiranya kami meninggalkannya di bahagian atas halaman, katakan tepat selepas tag pembuka :
Itu akan berfungsi dengan baik di semua penyemak imbas yang menyokong SVG.
Mungkin menggoda untuk menurunkannya. Mungkin ikon tidak terlalu penting untuk halaman, tidak begitu penting dengan kandungan sebenar yang ingin disampaikan oleh halaman mereka, jadi kami memindahkan ikon ke bahagian bawah halaman, menangguhkan pemuatannya seperti yang sering kami lakukan dengan JavaScript. Kami mencuba ini dalam video, tetapi mempunyai masalah dengan Safari membuat ikon yang kemudian kami cuba sama sekali. Sejujurnya, saya telah melihat tingkah laku yang tidak konsisten atau pelbagai jenis di penyemak imbas lain juga melakukannya dengan cara ini, dan nampaknya landskap sedikit berubah dalam hal ini. Oleh itu, saya pernah mendengar: adalah perkara yang sukar untuk dilaksanakan. Paling selamat untuk meletakkan blok di bahagian atas jika anda akhirnya menyimpan kekurangan dalam dokumen anda.
Dalam video ini kita melihat beberapa pengujian asas untuk semua ini, dan kemudian melihat beberapa laman web dunia nyata yang menggunakan sistem ini dan bagaimana / di mana mereka memasukkan blok defen svg.
Lihat Pen 954e71cb5d5e79fb61d3c89bb3f21b8a oleh Chris Coyier (@chriscoyier) di CodePen.
Catatan
Saya suka istilah "SVG defs block" - agar kita dapat menyebutnya sesuatu yang mempunyai tujuan tertentu tetapi tidak mempunyai nama rasmi. Tetapi, anda tidak semestinya perlu menggunakan teg. Apabila anda menggunakan s, mereka tidak memberikannya sendiri, dan memang saya rasa tidak seharusnya ada di dalamnya . Saya pernah mendengar definisi kecerunan dalam SVG adalah sama, dan bahkan tidak akan berfungsi jika mereka berada di . Walau apa pun, ini masih merupakan "blok kod SVG yang baru kita definisikan untuk digunakan kemudian" jadi saya mungkin akan terus memanggilnya sebagai "blok defisit SVG."