HTML5 Inline SVG

HTML5 ondersteunt inline SVG

Wat is SVG?

  • SVG staat voor Scalable Vector Graphics
  • SVG wordt gebruikt om vectorgraphics voor het web te definiëren
  • SVG definieert grafieken met het XML-formaat
  • 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 Voordeel

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

  • 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 op elke resolutie met hoge kwaliteit
  • SVG kan worden vergroot zonder dat de beeldkwaliteit afneemt

Browserondersteuning

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

SVG direct inbedden in HTML-pagina

In HTML5 kun je 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 Handleiding

Voor meer informatie over SVG, bezoek onze SVG Handleiding.