PricingLoginStart free
HTML Academy · Oppitunti

Sisäkkäinen SVG vastaan img ja object

Valitse käyttötarkoitukseesi sopiva SVG:n upotusmenetelmä

Oppitunti 1/412 vaihetta

Sisäkkäinen SVG vastaan img ja object on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Kolme tapaa upottaa SVG

SVG (Scalable Vector Graphics) voidaan upottaa kolmella tavalla:

  • <img src="icon.svg"> — yksinkertainen, välimuistissa, ei JS/CSS-käyttöoikeutta
  • <object data="chart.svg"> — mahdollistaa sisäisen vuorovaikutuksen, erillinen dokumentti
  • HTML:n sisäinen SVG — täysi CSS/JS-käyttöoikeus, ei ylimääräistä pyyntöä

SVG img src -attribuutilla

Yksinkertaisin tapa on viitata SVG:hen kuvana:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

SVG CSS:n background-image-ominaisuudella

Käyttäkää SVG:tä CSS-taustakuvana koristeellisissa kuvakkeissa:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

SVG object-elementillä

Upottakaa SVG <object>-elementillä vuorovaikutteista SVG:tä varten:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

Sisäinen SVG

Upottakaa SVG suoraan HTML:ään, jotta voitte hallita sitä täysin:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Sisäisen SVG:n edut

Miksi käyttää sisäistä SVG:tä:

  • Täysi CSS-tyylitys: fill, stroke, siirtymät ja animaatiot
  • JavaScript-vuorovaikutus: valitkaa SVG-elementtejä ja kuunnelkaa tapahtumia
  • currentColor: perii värin ylemmän tason CSS:stä
  • Ei ylimääräistä HTTP-pyyntöä
  • Voi olla osa saavutettavuuspuuta rolen ja titlen avulla

Sisäisen SVG:n haitat

Sisäisen SVG:n haittoja:

  • HTML-tiedostosta tulee suurempi
  • Samaa SVG:tä ei voi helposti käyttää uudelleen useilla sivuilla ilman toistoa
  • Toistuvien kuvakkeiden koodi toistuu

use-elementti spriteä varten

Määritelkää SVG-kuvakkeet kerran ja viitatkaa niihin <use>-elementillä:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

Saavutettava SVG

Tehkää sisäisistä SVG-kuvista saavutettavia:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

currentColor-kikka

Käyttäkää currentColor-arvoa, jotta SVG perii tekstin värin CSS:stä:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Pikatesti

Mikä on sisäisen SVG:n tärkein etu verrattuna img src -SVG:n käyttöön?

Vastaa interaktiivisessa oppitunnissa

Kertaus: SVG:n upottaminen

SVG:n upottamisen perusteet:

  • <img src> — yksinkertainen; ei CSS/JS-käyttöoikeutta; välimuistissa
  • CSS:n background-image — vain koristekäyttöön
  • <object data> — vuorovaikutteinen SVG; jossain määrin eristetty
  • Sisäinen SVG — täysi CSS/JS-hallinta; ei ylimääräistä pyyntöä
  • SVG-sprite, jossa käytetään yhdistelmää <symbol> + <use> — tehokas uudelleenkäyttö
Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
40
Oppitunnit
159
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Sisäkkäinen SVG vastaan img ja object” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Sisäkkäinen SVG vastaan img ja object”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Sisäkkäinen SVG vastaan img ja object”?

Valitse käyttötarkoitukseesi sopiva SVG:n upotusmenetelmä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Sisäkkäinen SVG vastaan img ja object”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Sisäkkäinen SVG vastaan img ja object
  2. SVG:n perusmuodot: rect, circle ja path
  3. SVG:n viewBox ja responsiivinen skaalaus
  4. SVG:n animointi CSS:llä ja SMILillä
← Takaisin: HTML Academy