Interfețele web folosesc pictograme pentru meniuri, acțiuni, rețele sociale și indicii vizuale. Dacă fiecare icon este încărcat separat, proiectul poate ajunge să conțină multe fișiere mici. Un SVG sprite grupează mai multe simboluri într-un singur document SVG, iar fiecare pictogramă poate fi reutilizată în pagină.
Ce este un SVG sprite?
Un sprite SVG este un fișier care conține mai multe elemente symbol, fiecare cu un identificator propriu. În pagină, pictograma este afișată printr-un element use care indică simbolul dorit. Astfel, același desen poate fi folosit în mai multe locuri fără să repeți tot codul SVG.
<svg aria-hidden="true"> <use href="/assets/icons.svg#search"></use> </svg>
În exemplu, browserul caută simbolul cu identificatorul search din fișierul extern. Sprite-ul poate conține și alte simboluri, precum menu, cart, user sau arrow.
Avantaje în dezvoltarea unui website
- Centralizează pictogramele și simplifică actualizarea lor.
- Permite reutilizarea aceluiași simbol în mai multe componente.
- Oferă control prin CSS asupra dimensiunii și culorii, dacă SVG-ul este pregătit corespunzător.
- Poate reduce numărul de fișiere individuale solicitate de pagină.
Accesibilitate și organizare
Nu toate pictogramele au nevoie de descriere. Dacă iconul este pur decorativ și textul din apropiere explică acțiunea, poate fi ascuns tehnologiilor asistive. Dacă transmite singur o informație, oferă-i un nume accesibil printr-o etichetă potrivită. Verifică și comportamentul în browserele vizate, mai ales când sprite-ul este găzduit pe alt domeniu.
Păstrează simbolurile simple, cu identificatori consecvenți și un viewBox corect. Nu include în sprite pictograme care au nevoie de animații sau comportamente foarte diferite fără să verifici impactul asupra întreținerii.
Coerența pictogramelor dintr-un website poate fi completată de o identitate vizuală clară în spațiul fizic. Descoperă stickere decorative pentru vitrine și amenajări interioare.
SVG sprites sunt o soluție practică pentru proiecte care folosesc multe pictograme și au nevoie de o bibliotecă vizuală ușor de administrat.
