16: Sistem Ikon SVG - Sumber Eksternal - Trik CSS

Menempatkan blok def SVG di bagian atas dokumen pasti berfungsi. Ini memiliki beberapa keuntungan juga, seperti fakta bahwa tidak ada permintaan HTTP yang perlu dibuat, semua informasi untuk menggambar grafik ada tepat di halaman. Tapi, itu juga memiliki beberapa kekurangan. Semua informasi itu perlu diurai oleh browser di setiap halaman, dari dokumen. Ini bukan dokumen terpisah yang mungkin sudah di-cache oleh klien, seperti aset lain. Dan berbicara tentang cache, jika situs Anda menyimpan HTML (biasanya merupakan ide yang bagus), Anda dapat mempertimbangkan "pembengkakan cache halaman" ini karena setiap halaman cache menyertakan blok kode berulang yang besar ini - bukan penggunaan cache server yang sangat efisien.

Kabar baiknya adalah kita dapat memindahkan blok def SVG ke file eksternal, dan menggunakannya seperti yang kita lakukan pada gambar atau aset lainnya.

Saat kami menggunakannya, jalur file akan berada di atribut, seperti ini:

Penting untuk diketahui: Pembatasan lintas domain sangat ketat dalam hal ini. Bahkan header CORS tidak akan membantu Anda dalam pengalaman saya. Jadi tidak ada CDN (bahkan tidak bisa diputar di CodePen, dan pasti tidak bisa diputar di file: // URL).

Hal penting lainnya untuk diketahui: Anda pasti perlu atribut xmlns agar ini berfungsi. Seperti, blok defs SVG Anda harus dimulai dengan:

Saya mendapat kesan bahwa Anda tidak membutuhkannya dalam dokumen HTML5 (dengan cara yang sama Anda tidak memerlukan tipe ), tetapi mungkin karena file ini tidak lagi dalam batas-batas dokumen HTML5 (itu direferensikan secara eksternal), Anda membutuhkannya.

Untuk alasan itu, demo untuk ini ada di sini.

Sama pentingnya untuk diketahui: Tidak ada versi IE yang mendukung ini (hingga 11 versi pada saat penerbitan ini). Tapi ada cara untuk membuatnya bekerja, dengan pada dasarnya Ajaxing dalam bit SVG yang Anda butuhkan dan memasukkannya di tempat yang diinginkan, membuatnya menjadi SVG inline “normal” yang didukung. Kami membutuhkan beberapa menit untuk membuatnya berfungsi dan diuji di Internet Explorer menggunakan BrowserStack, tetapi pada akhirnya kami mendapatkannya.