Kuidas sisestada SVG HTML-dokumenti?

SVG-i HTML-i sisestamiseks on mitu viisi:

• Inline SVG: SVG koodi otse sisestamine <svg> sildiga.
• <img> sild: Kasutades <img> silda src atribuudiga, mis näitab SVG faili.
• <object> sild: SVG sisestamine <object> sildiga.
• <embed> sild: SVG sisestamine <embed> sildiga.
• CSS: SVG kasutamine taustpildina CSS-i kaudu.
• <iframe>: HTML lehe sisestamine SVG-iga <iframe> abil.

Igal meetodil on omad omadused ja eelised:

Meetod	Eelised	Puudused	Rakendused
Inline SVG	Täielik kontroll, JS/CSS interaktiivsus	HTML suuruse suurenemine, vahemälu keeruline	Väikesed ja sageli muutuva SVG, ikoonid
<img>	Lihtne, vahemälu	Piiratud kontroll, puudub JS interaktiivsus	Staticsed pildid
<object>	Semantika (väline objekt), JS interaktiivsus	Veidi keerulisem kui <img>, brauseri tugi	Kompleksne SVG, fallback sisu
<embed>	Lihtsam kui <object>, vanemate pluginade tugi	Ei soovitata HTML5-s	Ühilduvus vana koodiga
CSS Background	Paindlik positsioneerimine, ilma täiendavate siltideta HTML-is	JS interaktiivsus puudub, piiratud kontroll	Dekoratiivsed elemendid, mustrid
<iframe>	Täielik isoleeritus, eraldi lehe laadimine	Täiendavad kulud, keeruline suhtlemine	Komplekssete, sõltumatute elementide sisestamine

Inline SVG näide:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<img> sildi näide:

<img src="image.svg" alt="SVG kirjeldus">

<object> sildi näide:

<object data="image.svg" type="image/svg+xml">
  <!-- Asendus sisu -->
  <img src="image.png" alt="Alternatiivne pilt">
</object>

CSS kasutamise näide:

.element {
  background-image: url('image.svg'); /* SVG taustpildina */
  background-size: cover; /* Stiilinäide */
}