SVG on vektori-kuvamuoto (XML-pohjainen), joten se skaalautuu mihin tahansa kokoon ilman häilöitymistä. Voit sisällyttää sen kahdella pääasiallisella tavalla, joilla molemmilla on omat kompromissit.
Inline SVG — markup suoraan HTML-koodissa
html
SVG on vektori-kuvamuoto (XML-pohjainen), joten se skaalautuu mihin tahansa kokoon ilman häilöitymistä. Voit sisällyttää sen kahdella pääasiallisella tavalla, joilla molemmilla on omat kompromissit.
Edut: voit muotoilla sitä CSS:llä (fill, stroke), animoida sen osia, muuttaa väriä currentColor-arvolla (perii tekstin värin) ja reagoida tapahtumiin — koska se on todellinen DOM. Ei ylimääräisiä HTTP-pyyntöjä.
Haitat: paisuttaa HTML-koodia, ei välimuistoideta erikseen, toistetut kuvakkeet monistuvat markup-koodeissa.
<img>:n kautta — viitattu tiedostona<img src="logo.svg" alt="Company logo" width="120" />
Edut: selaimen välimuistissa, pitää HTML-koodin puhtaana, yksinkertainen. Haitat: et voi muotoilla tai komentaa sen sisäisiä osia CSS/JS:llä — se on läpinäkymätön kuva.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
Valinta inline SVG:n ja <img> SVG:n välillä riippuu siitä, tarvitsetko muotoilla/animoida grafiikkaa (inline) vai vain näyttää se tehokkaasti (<img>).
Kuvakkeet, jotka muuttavat väriä kursorin kohdistuessa tai teeman muuttuessa, ovat inline-muotoisia (usein komponentteina); staattiset tuotemerkin kuvat menevät <img>:n kautta.
Joka tapauksessa vektorit pysyvät terävöinä kaikissa resoluutioissa — ihanteellisia kuvakkeille ja logoille.