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 |
---|---|---|
gedraaide tekst | 'polygon' driehoek | 'ellipse' ovaal |
---|---|---|
- 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