SVG yra vektoriaus vaizdų formatas (XML pagrindu), todėl jis keičiasi į bet kokį dydį be neryškumo. Jį galite įtraukti dviem pagrindiniais būdais, kiekvienas turi savų kompromisų.
Inline SVG — žymėjimas tiesiogiai HTML
html
Privalumai: jį galite stilizuoti CSS (fill, stroke), animuoti jo dalis, keisti spalvą per currentColor (paveldi teksto spalvą) ir reaguoti į įvykius — nes tai tikra DOM. Nereikalingas papildomas HTTP užklausa.
Trūkumai: padidina HTML, nėra talpinamas atskirai, pakartoti piktogramos kartoja žymėjimą.
<img> — nurodomas kaip failas<img src="logo.svg" alt="Company logo" width="120" />
Privalumai: naršyklė jį talpina, HTML lieka gražus, paprastas. Trūkumai: jūs negalite stilizuoti ar skriptuoti jo vidaus su jūsų CSS/JS — tai nepermatomas vaizdas.
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 -->
Inline ir <img> SVG pasirinkimas priklauso nuo to, ar jums reikia stilizuoti/animuoti grafiką (inline), ar tiesiog ją rodyti efektyviai (<img>).
Piktogramos, kurios keičia spalvą užvedus pelę arba tema, naudojamos inline (dažnai kaip komponentai); statiniai prekės ženklo turtai naudojami per <img>.
Bet kuriuo atveju vektoriai lieka ryškūs kiekviename skyrimetyje — idealus piktogramoms ir logotipams.