Wat is SVG?

SVG, of Scalable Vector Graphics, is een vectorafbeeldingsformaat op basis van XML voor tweedimensionale grafieken.

Belangrijkste kenmerken:

• Schaalbaarheid: Afbeeldingen blijven scherp op elke schaal, omdat ze worden beschreven door wiskundige formules, niet door pixels.
• XML-formaat: De structuur van SVG-bestanden wordt beschreven met tags, vergelijkbaar met HTML. Dit maakt ze leesbaar en bewerkbaar in tekst.
• Interactiviteit: Mogelijkheid om interactieve elementen toe te voegen met JavaScript.
• Animatie: Ondersteuning voor animatie van elementen met CSS of JavaScript.
• Toegankelijkheid: Mogelijkheid om inhoud te beschrijven voor mensen met beperkingen.
• Lichtgewicht: SVG-bestanden kunnen kleiner zijn dan rasterafbeeldingen van dezelfde kwaliteit.

Manieren om SVG te gebruiken:

• Inbedden in HTML via de <svg>-tag:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Gebruik als achtergrondafbeelding in CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Via de <img>-tag:

  <img src="image.svg" alt="Mijn SVG-afbeelding">
  

• Via de <object>- of <iframe>-tag.

SVG is ideaal voor logo’s, pictogrammen, illustraties, grafieken en diagrammen, waar scherpte op verschillende maten en interactiviteit belangrijk zijn.