HTML5 Inline SVG
- Vorige pagina HTML5 Canvas
- Volgende pagina HTML5 Canvas vs 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>
Resultaat:
SVG Tutorial
Voor meer informatie over SVG, bezoek onze SVG Tutorial.
- Vorige pagina HTML5 Canvas
- Volgende pagina HTML5 Canvas vs SVG