SVG păstrează marginile clare la orice densitate de pixeli și poate adapta culorile la temă. Această flexibilitate are o condiție: fișierul trebuie să rămână autonom, simplu și lizibil într-un spațiu minuscul.
Construiește un pătrat cu viewBox
Folosește un viewBox pătrat, de exemplu 0 0 64 64, și lasă spațiu în jurul simbolului. viewBox definește sistemul de coordonate fără să impună o dimensiune fizică de afișare.
Redu desenul la formele sale distinctive. Detaliile fine, spațiile interioare minuscule ale literelor și cuvintele întregi dispar adesea la 16 pixeli, chiar dacă fișierul vectorial rămâne tehnic clar.
| Element | Motiv | Test |
|---|---|---|
| viewBox pătrat | Decupare previzibilă | Previzualizare 16×16 |
| Trasee simple | Lizibilitate | File luminoase și întunecate |
| Fără dependențe | Încărcare autonomă | Rețea offline |
| ICO de rezervă | Clienți mai vechi | URL de la rădăcină |
Fă fișierul autonom
Include stilurile necesare în SVG. Transformă textul în trasee când simbolul depinde de un anumit font, deoarece un font web extern nu este o dependență fiabilă în acest context.
Elimină scripturile, legăturile la distanță și metadatele inutile ale editorului. Formele și stilurile simple ușurează și analiza de securitate și reduc dimensiunea fișierului.
La final, deschide fișierul singur într-un browser și testează-l offline. Dacă desenul se schimbă sau dispare, încă depinde de o resursă externă care trebuie inclusă în fișier sau înlocuită.
Declară SVG-ul cu o variantă de rezervă
Adaugă link rel icon cu type image/svg+xml și un URL relativ la rădăcină. Păstrează și favicon.ico la rădăcină pentru clienții care nu selectează SVG sau solicită direct ICO.
SVG nu înlocuiește pictograma Apple Touch sau pictogramele manifestului. Exportă fișiere PNG opace sau maskable pentru acele interfețe.
Adaptează culorile la temă
O regulă prefers-color-scheme într-un element style poate schimba fill sau stroke în modul întunecat. Definește mai întâi o culoare implicită robustă, apoi adaugă varianta ca îmbunătățire progresivă.
Testează fișierul în file reale și la mai multe niveluri de zoom. Inspectează și varianta de rezervă când SVG nu este selectat: un ICO care dispare pe fundal întunecat rămâne o problemă pentru acei clienți.
Surse primare
Întrebări frecvente
Un SVG are nevoie de width și height?
Un viewBox pătrat este elementul esențial pentru redimensionare. Poți include explicit width și height, dar browserul dimensionează pictograma în funcție de context.
Poate încărca un font extern?
Nu te baza pe asta. Transformă literele în trasee pentru un fișier autonom și previzibil.
Este suficient SVG pentru iOS?
Nu. Oferă separat o pictogramă Apple Touch în format PNG opac pentru ecranul de pornire.