svg-loader: Cara Berbeda untuk Bekerja dengan SVG Eksternal

SVG luar biasa: kecil, terlihat tajam dalam skala apa pun, dan dapat disesuaikan tanpa membuat file terpisah. Namun, ada sesuatu yang saya rasa hilang dalam standar web saat ini: cara untuk memasukkannya sebagai file eksternal yang juga mempertahankan kekuatan penyesuaian format.

Misalnya, Anda ingin menggunakan logo situs web Anda yang disimpan sebagai web-logo.svg . Anda dapat melakukan:

 <img src="/images/logo.svg" />

Tidak apa-apa jika logo Anda akan terlihat sama di semua tempat. Namun dalam banyak kasus, Anda memiliki 2-3 variasi logo yang sama. Slack, misalnya, memiliki dua versi .

Bahkan warna pada logo utama sedikit berbeda.

Jika kami memiliki cara untuk menyesuaikan warna isian logo kami di atas, kami dapat memberikan warna sembarang untuk membuat semua variasi.

Ambil contoh kasus ikon juga. Anda tidak ingin melakukan hal seperti ini, bukan?

 <img src="/icons/heart-blue.svg" /> <img src="/icons/heart-red.svg" />

Muat SVG eksternal sebagai elemen sebaris

Untuk mengatasi ini, saya telah membuat perpustakaan yang disebut svg-loader . Sederhananya, ini mengambil file SVG melalui XHR dan memuatnya sebagai elemen inline, memungkinkan Anda untuk menyesuaikan properti seperti fill dan stroke , seperti SVG inline.

Misalnya, saya memiliki logo di proyek sampingan saya, SVGBox . Alih-alih membuat file yang berbeda untuk setiap variasi, saya dapat memiliki satu file dan menyesuaikan warna isian:

Saya menggunakan data-src untuk mengatur URL file SVG. Atribut fill fill dari file SVG asli.

Untuk menggunakan perpustakaan, satu-satunya hal yang harus saya pastikan adalah bahwa file yang disajikan memiliki header CORS yang sesuai agar XHR berhasil. Pustaka juga menyimpan file dalam cache secara lokal, membuat proses selanjutnya jauh lebih cepat. Bahkan untuk pemuatan pertama, kinerjanya sebanding dengan menggunakan <img> .

Konsep ini bukanlah hal baru. svg-inject melakukan hal serupa. Namun, svg-loader lebih mudah digunakan karena kami hanya perlu menyertakan pustaka di suatu tempat di kode Anda (baik melalui <script> , atau di bundel JavaScript). Tidak diperlukan kode tambahan.

Elemen yang ditambahkan secara dinamis dan perubahan atribut juga ditangani secara otomatis, yang memastikannya berfungsi dengan semua kerangka kerja web. Inilah contoh di React:

Tapi kenapa?

Pendekatan ini mungkin terasa tidak ortodoks karena memperkenalkan ketergantungan JavaScript dan sudah ada beberapa cara untuk menggunakan SVG, termasuk inline dan dari sumber eksternal. Tapi ada alasan bagus untuk menggunakan SVG dengan cara ini. Mari kita periksa dengan menjawab pertanyaan umum.

Bisakah kita tidak hanya menyebariskan SVG sendiri?

Menyebariskan adalah cara termudah untuk menggunakan SVG. Cukup salin dan tempel kode SVG di HTML. Itulah yang akhirnya dilakukan oleh svg-loader. Jadi, mengapa menambahkan langkah tambahan untuk memuat file SVG dari tempat lain? Ada dua alasan utama:

  1. SVG sebaris membuat kode bertele-tele: SVG dapat terdiri dari beberapa baris hingga beberapa ratus. SVG inline dapat bekerja dengan baik jika yang Anda butuhkan hanyalah beberapa ikon dan semuanya kecil. Namun akan sangat merepotkan jika ukurannya cukup besar atau banyak, karena kemudian, teks tersebut menjadi string teks yang panjang dalam kode yang bukan "logika bisnis". Kode menjadi sulit diurai.

    Ini sama saja dengan memilih stylesheet eksternal daripada <style> atau menggunakan gambar daripada URI data. Tidak heran jika dalam basis kode React, pendekatan yang lebih disukai adalah menggunakan SVG sebagai komponen terpisah , daripada mendefinisikannya sebagai bagian dari JSX.

  1. SVG eksternal jauh lebih nyaman: Menyalin dan menempel sering berhasil, tetapi SVG eksternal bisa sangat nyaman. Misalnya Anda sedang bereksperimen dengan ikon mana yang akan digunakan di aplikasi Anda. Jika Anda menggunakan SVG inline, itu berarti bolak-balik mendapatkan kode SVG. Tetapi dengan SVG eksternal, Anda hanya perlu mengetahui nama filenya.

    Lihat contoh ini. Salah satu tempat penyimpanan ikon paling luas di GitHub adalah Ikon Desain Material . Dengan svg-loader dan unpkg , kita dapat mulai menggunakan 5.000+ ikon secara langsung.

Bukankah tidak efisien untuk memicu permintaan HTTP untuk setiap SVG versus membuat sprite?

Tidak juga. Dengan HTTP2, biaya pembuatan permintaan HTTP menjadi kurang relevan. Ya, masih ada keuntungan dari penggabungan (misalnya, kompresi yang lebih baik), tetapi untuk sumber daya non-pemblokiran dan XHR, kelebihannya hampir tidak ada dalam skenario dunia nyata.

Berikut Pena memuat 50 ikon dengan cara yang sama seperti di atas. (Buka dalam mode penyamaran karena file di-cache secara default):

Bagaimana dengan <use> (simbol SVG)?

Simbol SVG memisahkan definisi file SVG dari penggunaannya . Alih-alih mendefinisikan SVG di mana-mana, kita dapat memiliki sesuatu seperti ini:

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

Masalahnya adalah tidak ada browser yang mendukung penggunaan file simbol yang dihosting di domain pihak ketiga. Oleh karena itu, kami tidak dapat melakukan hal seperti ini:

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

Safari bahkan tidak mendukung file simbol yang dihosting di domain yang sama .

Bisakah kita tidak menggunakan alat build yang menyejajarkan SVG?

Saya tidak dapat menemukan cara yang jelas untuk mengambil SVG dari URL dan memasukkannya ke dalam bundler umum, seperti webpack dan Grunt, meskipun mereka ada untuk menyebariskan file SVG yang disimpan secara lokal . Meskipun ada plugin yang melakukan hal ini, menyiapkan bundler tidaklah mudah. Bahkan, saya sering menghindari penggunaannya hingga proyek mencapai tingkat kerumitan tertentu. Kita juga harus menyadari bahwa mayoritas internet asing bagi hal-hal seperti webpack dan React. Skrip sederhana dapat memiliki daya tarik yang jauh lebih luas.

Bagaimana dengan <object> ?

<object> adalah cara asli untuk menyertakan file SVG eksternal yang bekerja di semua browser .:

 <object data="https://unpkg.com/mdi-svg@2.2.43/svg/access-point-network.svg" width="32" height="32"></object>

Namun, kekurangannya adalah kami tidak dapat menyesuaikan atribut SVG kecuali itu dihosting di domain yang sama (dan <object> tidak menghormati header CORS). Meskipun file dihosting di domain yang sama, kami memerlukan JavaScript untuk memanipulasi fill , seperti ini:

 <object data="https://unpkg.com/mdi-svg@2.2.43/svg/access-point-network.svg" width="32" height="32" onload="this.contentDocument.querySelector('svg').fill = 'red'"></object>

Singkatnya, menggunakan file SVG eksternal dengan cara ini membuatnya sangat nyaman untuk menggunakan ikon dan aset SVG lainnya. Seperti yang dibahas sebelumnya, dengan unpkg, kita dapat menggunakan ikon apa pun di GitHub tanpa memerlukan kode tambahan. Kita dapat menghindari pembuatan pipeline dalam bundler untuk memproses file SVG atau komponen untuk setiap ikon, dan hanya menghosting ikon di CDN.

Memuat file SVG dengan cara ini mengemas banyak manfaat dengan biaya yang sangat sedikit.


Post svg-loader: A Different Way to Work With External SVG muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

May 19, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *