SVG-Loader: Cara yang berbeza untuk bekerja dengan SVG luaran

SVGs adalah hebat: mereka kecil, kelihatan tajam pada skala, dan boleh disesuaikan tanpa membuat fail berasingan. Walau bagaimanapun, ada sesuatu yang saya rasa hilang dalam piawaian web hari ini: cara untuk memasukkannya sebagai fail luaran yang juga mengekalkan kuasa penyesuaian format.

Sebagai contoh, katakan anda ingin menggunakan logo laman web anda yang disimpan sebagai web-logo.svg. Anda boleh lakukan:

 <img  src="/image/logo.svg" alt="SVG-Loader: Cara yang berbeza untuk bekerja dengan SVG luaran" >

Tidak mengapa jika logo anda akan kelihatan sama di mana -mana. Tetapi dalam banyak kes, anda mempunyai 2-3 variasi logo yang sama. Slack, sebagai contoh, mempunyai dua versi.

Sekiranya kami mempunyai cara untuk menyesuaikan warna logo kami di atas, kami boleh lulus warna sewenang -wenang untuk menjadikan semua variasi.

Ambil kes ikon juga. Anda tidak mahu melakukan sesuatu seperti ini, kan?

 <img  src="/ikon/hati-blue.svg" alt="SVG-Loader: Cara yang berbeza untuk bekerja dengan SVG luaran" >
<img  src="/ikon/jantung-red.svg" alt="SVG-Loader: Cara yang berbeza untuk bekerja dengan SVG luaran" >

Muatkan SVG luaran sebagai elemen sebaris

Untuk menangani ini, saya telah membuat perpustakaan yang dipanggil SVG-Loader. Ringkasnya, ia mengambil fail SVG melalui XHR dan memuatkannya sebagai elemen sebaris, yang membolehkan anda menyesuaikan sifat -sifat seperti mengisi dan strok, seperti SVG dalam talian.

Sebagai contoh, saya mempunyai logo pada projek sampingan saya, SVGBox. Daripada membuat fail yang berbeza untuk setiap variasi, saya boleh mempunyai satu fail dan menyesuaikan warna mengisi:

Saya menggunakan data-src untuk menetapkan url fail SVG. Atribut mengisi overrides mengisi fail SVG asal.

Untuk menggunakan perpustakaan, satu -satunya perkara yang saya perlu pastikan ialah fail yang disampaikan mempunyai tajuk kors yang sesuai untuk XHRS untuk berjaya. Perpustakaan juga cache fail secara tempatan, menjadikannya lebih cepat. Malah untuk beban pertama, prestasi adalah setanding dengan menggunakan tag .

Konsep ini tidak baru. SVG menyuntik melakukan sesuatu yang serupa. Walau bagaimanapun, SVG-Loader lebih mudah digunakan kerana kami hanya perlu memasukkan perpustakaan di suatu tempat dalam kod anda (sama ada melalui tag , atau dalam bundle JavaScript). Tiada kod tambahan diperlukan.

Unsur-unsur yang dinamik dan perubahan atribut juga dikendalikan secara automatik, yang memastikan ia berfungsi dengan semua kerangka web. Inilah contoh dalam React:

Tetapi mengapa?

Pendekatan ini mungkin merasa tidak ortodoks kerana ia memperkenalkan ketergantungan JavaScript dan sudah ada banyak cara untuk menggunakan SVGs, termasuk dalam talian dan dari sumber luaran. Tetapi ada kes yang baik untuk menggunakan SVGs dengan cara ini. Mari kita periksa mereka dengan menjawab soalan -soalan biasa.

Bolehkah kita bukan hanya dalam talian SVG sendiri?

Inlining adalah cara paling mudah untuk menggunakan SVGs. Hanya salin dan tampal kod SVG dalam HTML. Itulah yang dilakukan oleh SVG-Loader. Jadi, mengapa menambah langkah tambahan untuk memuatkan fail SVG dari tempat lain? Terdapat dua sebab utama:

1. SVG dalam talian menjadikan kod verbose: SVGs boleh berada di mana saja dari beberapa baris hingga beberapa ratus. SVG dalam talian boleh berfungsi dengan baik jika apa yang anda perlukan hanyalah beberapa ikon dan mereka semua kecil. Tetapi ia menjadi kesakitan besar jika mereka cukup besar atau banyak, kerana itu, mereka menjadi rentetan panjang teks dalam kod yang bukan "logik perniagaan." Kod menjadi sukar untuk dihuraikan.
   
   Ia adalah perkara yang sama seperti memilih lembaran gaya luaran melalui tag atau menggunakan imej dan bukannya data URI. Tidak hairanlah bahawa dalam Codebase React, pendekatan pilihan adalah menggunakan SVG sebagai komponen yang berasingan, dan bukannya menentukannya sebagai sebahagian daripada JSX.

2. SVG luaran jauh lebih mudah: menyalin dan menampal sering kerja, tetapi SVG luaran boleh menjadi sangat mudah. Katakan anda bereksperimen dengan ikon yang akan digunakan dalam aplikasi anda. Jika anda menggunakan SVGs sebaris, ini bermakna berulang -alik untuk mendapatkan kod SVG. Tetapi dengan SVG luaran, anda hanya perlu mengetahui nama fail.
   
   Lihat contoh ini. Salah satu repositori ikon yang paling luas di GitHub ialah ikon reka bentuk bahan. Dengan SVG-Loader dan UNPKG, kita boleh mula menggunakan mana-mana 5,000 ikon dengan segera.

Bukankah tidak cekap untuk mencetuskan permintaan HTTP untuk setiap SVG berbanding membuat sprite?

Tidak betul -betul. Dengan HTTP2, kos membuat permintaan HTTP menjadi kurang relevan. Ya, masih ada manfaat bundling (contohnya, mampatan yang lebih baik), tetapi untuk sumber-sumber yang tidak menyekat dan XHR, pro hampir tidak wujud dalam senario dunia nyata.

Berikut adalah pen memuat 50 ikon dengan cara yang sama seperti di atas. (Buka dalam mod Incognito kerana fail di -cache secara lalai):

Bagaimana dengan tag (simbol SVG)?

Simbol SVG memisahkan definisi fail SVG dari penggunaannya. Daripada menentukan SVG di mana -mana, kita boleh mempunyai sesuatu seperti ini:

 <svg>
  <gunakan xlink: href="#heart-icon"></gunakan>
</svg>

Masalahnya ialah tiada penyemak imbas yang menyokong menggunakan fail simbol yang dihoskan di domain pihak ketiga. Oleh itu, kita tidak dapat melakukan sesuatu seperti ini:

 <svg>
  <gunakan xlink: href="https://icons.com/symbols.svg#heart-icon"></gunakan>
</svg>

Safari bahkan tidak menyokong fail simbol yang dihoskan di domain yang sama.

Bolehkah kita tidak menggunakan alat binaan yang menggabungkan SVGs?

Saya tidak dapat mencari cara yang jelas untuk mengambil SVG dari URL dan menyamakannya dalam bundlers biasa, seperti Webpack dan Grunt, walaupun mereka wujud untuk membuang fail SVG yang disimpan di dalam negara. Walaupun plugin yang ada ini wujud, menubuhkan bundlers tidak betul -betul mudah. Malah, saya sering mengelakkan menggunakannya sehingga projek itu telah mencapai tahap kerumitan. Kita juga harus menyedari bahawa majoriti internet adalah asing kepada perkara -perkara seperti Webpack dan React. Skrip mudah boleh mempunyai rayuan yang lebih luas.

Bagaimana dengan tag ?

Tag adalah cara asli untuk memasukkan fail SVG luaran yang berfungsi di semua pelayar.:

 <objek data="https://unpkg.com/^ dilindungi] /svg/access-point-network.svg" width="32" height="32"> </objek>

Walau bagaimanapun, kelemahannya adalah kami tidak dapat menyesuaikan atribut SVG melainkan jika ia dihoskan pada domain yang sama (dan tag tidak menghormati tajuk CORS). Walaupun fail itu dihoskan di domain yang sama, kami memerlukan JavaScript untuk memanipulasi mengisi, seperti ini:

 <object data="https://unpkg.com/^ dilindungi] /svg/access-point-network.svg" width="32" height><p> Ringkasnya, menggunakan fail SVG luaran dengan cara ini menjadikannya ultra-convenient untuk menggunakan ikon dan aset SVG yang lain. Seperti yang dilindungi sebelum ini, dengan UNPKG, kita boleh menggunakan mana -mana ikon pada GitHub tanpa memerlukan kod tambahan. Kita boleh mengelakkan membuat saluran paip di bundler untuk memproses fail SVG atau komponen untuk setiap ikon, dan hanya menjadi tuan rumah ikon pada CDN.</p>
<p> Memuatkan fail SVG dengan cara ini membungkus banyak faedah dengan kos yang sangat sedikit.</p></object>

Atas ialah kandungan terperinci SVG-Loader: Cara yang berbeza untuk bekerja dengan SVG luaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!