16: Sistem Ikon SVG - Sumber Luar - Trik CSS

Meletakkan blok defisit SVG di bahagian atas dokumen pasti berfungsi. Ia juga mempunyai beberapa kelebihan, seperti kenyataan bahwa tidak perlu ada permintaan HTTP, semua maklumat untuk melukis grafik ada tepat di halaman. Tetapi, ia juga mempunyai beberapa kekurangan. Semua maklumat itu perlu dihuraikan oleh penyemak imbas di setiap halaman, dari dokumen. Ini bukan dokumen berasingan yang mungkin sudah disimpan dalam cache oleh pelanggan, seperti aset lain. Dan mengenai cache, jika laman web anda menyimpan cache HTML (biasanya idea yang baik), anda boleh mempertimbangkan "halaman cache bloat" ini kerana setiap halaman cache termasuk blok kod berulang yang besar ini - bukan penggunaan cache pelayan yang sangat efisien.

Berita baiknya ialah kita dapat memindahkan defisit SVG ke fail luaran, dan menggunakannya seperti yang kita mahukan gambar atau aset lain.

Ketika kita menggunakannya, jalan fail akan berada di atribut, seperti ini:

Penting untuk diketahui: Sekatan merentas domain sangat sukar dalam hal ini. Malah tajuk CORS tidak akan membantu anda dalam pengalaman saya. Jadi tidak ada CDN (bahkan tidak dapat dimainkan di CodePen, dan pasti tidak dapat dimainkan di fail: // URL).

Perkara penting lain yang perlu diketahui: Anda pasti perlu atribut xmlns agar ini berfungsi. Seperti dalam, blok defisit SVG anda harus bermula dengan:

Saya mendapat kesan bahawa anda tidak memerlukannya dalam dokumen HTML5 (dengan cara yang sama anda tidak memerlukan jenis pada s), tetapi mungkin kerana fail ini tidak lagi berada dalam batasan dokumen HTML5 (itu dirujuk secara luaran), anda memerlukannya.

Atas sebab itu, demo untuk ini ada di sini.

Sama pentingnya untuk diketahui: Tidak ada versi IE yang menyokong ini (hingga 11 pada masa penerbitan ini). Tetapi ada cara untuk membuatnya berfungsi, dengan asasnya Ajaxing pada sedikit SVG yang anda perlukan dan memasukkannya ke mana yang akan ada, menjadikannya SVG sebaris "normal" yang disokong. Kami memerlukan masa yang sangat panas untuk menjadikannya berfungsi dan diuji di Internet Explorer menggunakan BrowserStack, tetapi akhirnya kami berjaya.