Example SVG

SVG

Voordeel

'100% schaalbaar
en resolutievast'

Zie verder »

Example SVG

SVG

Voordeel

'Logo's en iconen in SVG
veel kleiner dan in Bitmaps'

Zie verder »

Example SVG

SVG

Nadeel

'Niet bruikbaar
voor foto's'

Zie verder »


Opmerkingen

Grafische weergave in XML
SVG (Scalable Vector Graphics) is een op XML gebaseerde techniek voor zogenaamde vectorafbeeldingen.

Vectoren zijn denkbeeldige oneindige lijnen uit de wiskunde.

En daar zit hem ook de kneep. Een afbeelding in SVG kan van heel klein tot heel groot haarscherp worden afgebeeld en geprint, afhankelijk hoe groot je het canvas van de afbeelding definieert.
Een bitmap-afbeelding die op een pixelraster wordt afgebeeld, kan worden vergroot maar dat gaat ten koste van de scherpte. Het raster wordt dan als het ware uiteengetrokken. Hier heeft een SVG geen last van.

Beperking
De beperking van SVG is wat je wilt afbeelden. Voor logo's en iconen die uit strakke lijnen en vastomlijnde (gekleurde) vlakken bestaan, is SVG meer dan geschikt.
Voor het weergeven van foto's met de vele details is SVG totaal ongeschikt. Dan ben je aangewezen op Bitmaps als JPEG, PNG en GIF.

Voordeel
Een voordeel van SVG ten opzichte van GIF en JPG is de geringe omvang qua bytes van de afbeeldingen (logo's en iconen).

Kenmerken
SVG kan als zelfstandig SVG-bestand afgebeeld worden maar kan ook modulair ingevoegd worden in een HTML-pagina.

SVG is een open formaat gebaseerd op XML.

SVG beschikt over lijnen ('line') + de basisvormen cirkel, ellips, driehoek, vierhoek ('circle', 'ellipse', 'polygon', 'rect'), CSS-opmaak: kleuren ('fill'), filters ('filter'), tekst ('text') en hyperlinks ('a>).

Editors
Voor wie niet wil of kan werken met de SVG-broncode, is de gratis editor Inkscape beschikbaar.
Ook kun je online SVG bewerken en maken: Mediamodifier's Free SVG Editor.

Achtergrondinformatie
- Wikipedia - Scalable Vector Graphics
- W3schools.com - SVG Tutorial

Voorbeelden van objecten in SVG

groene cirkel rode cirkel + rand tekst in 1 regel
Dit is een tekstje in SVG
gedraaide tekst 'polygon' driehoek 'ellipse' ovaal
Dit is een ander tekstje in SVG

- Verder Voorbeelden van SVG en
- Afbeelding, tekst, hyperlinks in SVG, ingebed in HTML, in een webpagina
- Vormen en vervormde tekst in SVG, in een webpagina


Example SVG

SVG

Nadeel

'Ongeschikt voor beginners:
ingewikkelde codering'

Zie verder »

Example SVG

SVG

Bron: W3schools.com

'SVG defines vector-based
graphics in XML ...
'

Zie verder »

Example SVG

SVG

Bron: W3C

'SVG is a markup language for
describing two-dimensional graphics...
'

Zie verder »