HTML5 Inline SVG

HTML5 ondersteunt inlinede SVG

Wat is SVG?

  • SVG staat voor Scalable Vector Graphics (verplaatsbare vectorgraphics)
  • SVG wordt gebruikt om vectorgraphics te definiëren die op het netwerk worden gebruikt
  • SVG gebruikt het XML-formaat om grafieken te definiëren
  • De grafische kwaliteit van SVG-afbeeldingen blijft onveranderd bij het vergroten of wijzigen van de grootte
  • SVG is een standaard van de World Wide Web Consortium

SVG Voorzieningen

Ten opzichte van andere afbeeldingsformaten (zoals JPEG en GIF), liggen de voordelen van het gebruik van SVG in:

  • SVG-afbeeldingen kunnen worden gemaakt en gewijzigd met een teksteditor
  • SVG-afbeeldingen kunnen worden doorzocht, geïndexeerd, gescriteurd of gecomprimeerd
  • SVG is schaalbaar
  • SVG-afbeeldingen kunnen worden afgedrukt in elke resolutie met hoge kwaliteit
  • SVG kan worden vergroot zonder dat de beeldkwaliteit daaronder lijdt

Browserondersteuning

Internet Explorer 9, Firefox, Opera, Chrome en Safari ondersteunen inline SVG.

SVG direct inbedden in HTML-pagina

In HTML5 kunt u SVG-elementen direct in een HTML-pagina inbedden:

Voorbeeld

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Probeer het zelf

Resultaat:

SVG Tutorial

Voor meer informatie over SVG, bezoek onze SVG Tutorial.