Sprite Simbol SVG: Pertahankan ID, ViewBox, dan Warna

Sprite simbol SVG menyimpan definisi ikon bernama dalam satu file SVG. Setiap ikon terlihat menggunakan elemen <use> untuk merujuk definisi yang dibutuhkannya. Pengemasan bekerja hanya jika ID fragmen, sistem koordinat, dan aturan pewarnaan bertahan saat dipindahkan dari file masing-masing.

Mulailah dengan dua ikon sebelum menggabungkan seluruh folder. Dalam panduan ini, daun menggunakan ruang koordinat persegi dan panah kanan menggunakan ruang lebar. Daun akan muncul dalam dua warna tanpa menduplikasi path-nya. Panah akan mempertahankan proporsinya alih-alih dipaksa masuk ke canvas daun.

Jika ikon sumber masih membutuhkan bentuk, padding, atau ketebalan optis yang konsisten, selesaikan alur kerja persiapan kit UI SVG terlebih dahulu. Sprite mengorganisasi artwork; sprite tidak memperbaikinya.

Buat dua definisi simbol bernama

Simpan contoh orisinal ini sebagai sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

Nama daun adalah pv-leaf; nama panah adalah pv-arrow. Itulah identifier yang akan diminta halaman. MDN menjelaskan symbol sebagai definisi grafis yang dapat digunakan ulang dan dibuat instansnya melalui use. File yang hanya berisi simbol dapat terlihat kosong ketika dibuka sendiri karena definisi tidak dirender langsung.

Pertahankan viewBox bersama artwork yang dideskripsikannya. Di sini, daun menggunakan 0 0 24 24 dan panah menggunakan 0 0 32 16. Angka itu mendefinisikan batas koordinat, bukan ukuran tampilan yang diwajibkan. Mengubah batas panah menjadi 24 kali 24 tanpa menyesuaikan geometrinya bukan normalisasi. Lihat referensi viewBox MDN untuk pemetaan antara koordinat dan viewport.

Untuk keluarga ikon yang sudah ada, pertahankan grid yang disepakati. Bentuk campuran di sini menyampaikan hal berbeda: pengemasan seharusnya mempertahankan sistem koordinat yang sudah Anda setujui. Jika panah harus mengikuti akhir garis atau kurva, gunakan marker SVG untuk kepala panah khusus yang sejajar untuk mendefinisikan titik penempelan dan arahnya.

Rujuk sprite dari halaman

Letakkan sprite.svg, halaman HTML Anda, dan icons.css dalam direktori yang sama dan disajikan server. Mulailah dengan pratinjau HTTP same-origin agar pembatasan file lokal atau host berbeda tidak mengaburkan kesalahan referensi dasar.

Tambahkan aturan ini ke icons.css dan muat stylesheet itu dari halaman:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

Kemudian tambahkan instans ini ke body HTML:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

Bagian sebelum # menemukan file; bagian sesudahnya memilih simbol. Atribut modernnya adalah href. Referensi use MDN mendokumentasikan referensi eksternal dan memperingatkan bahwa browser mungkin menolak pemuatan cross-origin. Jangan menganggap pemindahan sprite yang berfungsi ke CDN sebagai perubahan yang langsung dapat menggantikannya; uji lokasi penyerahan sebenarnya.

Pada ukuran font root default browser, aturan ini memberikan kotak 24 kali 24 piksel CSS pada daun dan kotak 48 kali 24 pada panah. Ukuran menggunakan rem, sehingga ukuran font root berbeda mengubahnya. Bandingkan ikon dalam komponen sebenarnya serta pratinjau diperbesar: kotak yang benar masih dapat berisi artwork dengan padding terlalu banyak.

Tombol di atas memperagakan presentasi dan penamaan ikon. Tambahkan handler tindakan aplikasi sendiri ketika menggunakannya dalam produk.

Pilih aturan pewarnaan sebelum menggabungkan file

Kedua path contoh secara eksplisit menggunakan fill="currentColor". Ini memungkinkan instans pengguna memakai color CSS sekitarnya: tombol menyediakan hijau kebiruan, sedangkan panah menyediakan biru tua. Referensi color menjelaskan bahwa currentColor dapat menyediakan nilai yang digunakan oleh fill dan stroke.

Untuk penampilan kedua daun, gunakan referensi pv-leaf yang sama dan ubah color instans menjadi koral. Jangan menduplikasi path hanya untuk membuat warna tema lain.

Jangan mengganti setiap isian dalam logo multicolor dengan currentColor. Itu membuang palet secara sengaja. Jika file sudah berubah warna sebelum pengemasan sprite, gunakan panduan pemecahan masalah warna SVG untuk mengisolasi masalah sebelumnya tersebut.

Hindari juga membangun API sprite berdasarkan selector halaman sembarang yang menjangkau path yang dirujuk. MDN mencatat keterbatasan gaya untuk konten yang diklon dalam use. Letakkan perilaku pewarnaan yang dimaksudkan dalam artwork sumber dan uji penggunanya.

Cegah ID duplikat di dalam artwork

Nama simbol unik diperlukan, tetapi SVG hasil ekspor mungkin berisi lebih banyak ID di dalamnya: gradien, mask, clip path, atau definisi lain yang dirujuk. MDN mewajibkan setiap id SVG unik dalam pohon node-nya. Dua file yang sebelumnya terpisah dapat melanggar aturan itu ketika digabungkan.

Sebagai contoh, misalkan ekspor daun dan ekspor lencana sama-sama berisi gradien bernama paint0. Berikan prefiks pada ID gradien daun dan referensi yang cocok bersama-sama:

Fragmen harus tetap menunjuk ke definisi yang dimaksudkan. Contoh fill MDN menunjukkan hubungan antara ID gradien dan url(#...). Berikan prefiks sendiri pada lencana alih-alih membuat kedua referensi menunjuk ke gradien daun.

Contoh dua path kami tidak memiliki definisi bersarang, sehingga berguna sebagai pemeriksaan pertama. Untuk ekspor nyata, inventarisasi semua ID dan referensi lokal sebelum menggabungkan file. Setelah optimizer atau generator berjalan, ulangi inventarisasi itu pada sprite yang diserahkan. Mengganti nama simbol luar saja tidak menyelesaikan ID internal duplikat.

Beri nama setiap instans terlihat dalam konteksnya

Daun di samping kata terlihat “Garden” mengulang informasi yang sudah diberikan tombol. SVG-nya menggunakan aria-hidden="true", sehingga teks tombol menyediakan namanya. Pertahankan atribut itu pada SVG dekoratif, bukan tombol interaktif. Panduan aria-hidden MDN membahas konten dekoratif dan memperingatkan agar tidak menyembunyikan elemen yang dapat difokuskan.

Panah mandiri memiliki peran berbeda: panah menyampaikan arah tanpa teks di dekatnya. SVG luarnya menggunakan role="img" dan aria-label="Right direction", mengikuti panduan MDN untuk menamai gambar SVG tertanam.

Tentukan label pada tempat penggunaan. Daun yang dapat digunakan ulang mungkin berarti “Taman”, “Berbasis tanaman”, atau hanya dekorasi dalam antarmuka berbeda. Uji nama aksesibel komponen akhir dengan alat pemeriksaan aksesibilitas browser dan teknologi bantu target Anda; simbol yang dapat digunakan ulang sendiri tidak menetapkan konteks tersebut.

Periksa sprite yang diserahkan, bukan hanya file sumber

Kami memeriksa contoh orisinal ini dalam fixture browser same-origin. Daun dirender dalam hijau kebiruan dan koral, panah lebar mempertahankan bentuknya, dan fragmen yang sengaja hilang menghasilkan kotak ikon kosong. Pohon aksesibilitas browser mengekspos tombol Garden dan panah bernama. Itu adalah pemeriksaan fixture ini, bukan sertifikasi lintas browser atau pembaca layar.

Gunakan kumpulan pemeriksaan kecil yang sama setelah pengemasan:

1. File: pastikan halaman memuat sprite yang dimaksudkan dari URL akhir.
2. Fragmen: bandingkan setiap fragmen href dengan ID simbol yang diserahkan, termasuk kapitalisasi.
3. Batas: bandingkan komponen kecil dan artwork diperbesar untuk clipping, padding, dan rasio aspek.
4. Pewarnaan: render ikon satu warna dalam dua warna tema dan periksa artwork dengan warna tetap secara terpisah.
5. Referensi internal: periksa bahwa referensi pewarnaan, mask, dan clipping yang diberi prefiks masih terselesaikan setelah optimasi.
6. Makna: periksa nama setiap komponen interaktif dan label setiap gambar mandiri bermakna.

Jika file dimuat tetapi satu instans kosong, periksa fragmen sebelum mengubah geometri. Jika artwork yang sama juga kosong sebagai SVG biasa, ikuti pemeriksaan SVG kosong yang lebih luas. Jika terlihat berpiksel ketika diperbesar, periksa gambar raster tertanam sebelum menganggap sprite menyebabkan masalah.

Ketika satu-satunya sumber adalah ikon PNG

Jika ikon sederhana hanya tersisa sebagai PNG, konversikan PNG itu menjadi SVG dengan PerfectVector sebelum mengemasnya. Periksa siluet, lubang, dan wilayah warna yang dihasilkan terhadap sumber, lalu setujui batas koordinat dan aturan pewarnaannya. Terakhir, berikan ID stabil pada artwork yang disetujui dan tambahkan ke sprite. Konversi menyediakan artwork vektor; proses ini tidak memilih nama simbol, semantik komponen, atau arsitektur penyerahan Anda.

Jika SVG asli yang bersih ada, gunakan. Menelusuri ulang memperkenalkan langkah pemulihan bentuk lain tanpa menyelesaikan referensi fragmen rusak. Jelajahi panduan pengeditan dan persiapan SVG ketika masalah yang tersisa ada dalam artwork, bukan pengemasannya.

FAQ

Mengapa sprite SVG saya kosong ketika saya membukanya langsung? Sprite yang hanya berisi definisi symbol tidak langsung menampilkan simbol tersebut. Uji melalui instans use SVG dengan path file dan ID fragmen yang benar sebelum menganggap dokumen kosong sebagai artwork rusak.

Apakah setiap simbol membutuhkan viewBox yang sama? Tidak. Pertahankan setiap sistem koordinat yang disetujui ketika mengemas. Ikon yang berbagi grid sistem desain dapat menggunakan batas yang cocok, tetapi simbol lebar tidak menjadi ikon persegi hanya dengan mengubah angka viewBox-nya.

Mengapa mengubah color halaman tidak mewarnai ulang ikon saya? Periksa aturan pewarnaan sumber. Isian tetap berbeda dari path yang ditulis dengan currentColor. Pertahankan artwork multicolor yang disengaja dan pilih secara eksplisit fill atau stroke mana yang harus mewarisi warna instans.

Dapatkah saya menempatkan sprite pada domain lain? Jangan menganggap referensi use eksternal akan berfungsi lintas origin. Mulailah dengan fixture same-origin, lalu uji host dan browser target sebenarnya sebelum mengubah penyerahan. Contoh lokal yang berhasil tidak membuktikan dukungan cross-origin.

Sources

1. MDN — symbol — Definisi yang dapat digunakan ulang dan rendering tidak langsung.
2. MDN — use — Fragmen eksternal, batasan gaya, dan pembatasan origin.
3. MDN — viewBox — Hubungan antara batas koordinat dan viewport.
4. MDN — color — currentColor sebagai input pewarnaan SVG.
5. MDN — id — Keunikan identifier dalam pohon dokumen.
6. MDN — fill — Referensi paint server seperti URL gradien.
7. MDN — aria-hidden — Konten dekoratif dan peringatan terkait elemen yang dapat difokuskan.
8. MDN — Peran img — SVG luar berlabel untuk gambar bermakna.

Mulailah dengan dua ikon yang disetujui dan uji nama, batas, dan warnanya dalam komponen sebenarnya. Jika satu sumber hanya tersedia sebagai gambar raster yang sesuai, pulihkan path SVG-nya, periksa artwork, lalu tambahkan hasil yang diterima ke sprite Anda.