Wat is SVG?
"Scalable Vector Graphics, afbeelding die niet zoals een bitmap elke pixel beschrijft, maar alle lijnen, bogen etc opslaat om telkens de afbeelding opnieuw te genereren als deze wordt geladen. " - http://www.pc-tutorials.nl/computerwoordenboek.php?lijst
Waarom zou je SVG gebruiken?
Het verschil tussen SVG en, bijvoorbeeld, Jpeg is te
vergelijken met het verschil tussen werken in Photoshop en werken in
Illustrator. Met Photoshop werk je in pixels. Wanneer je inzoomt worden de
pixels vergroot, waardoor je een korrelige afbeelding krijgt. Bij illustrator
wordt er gewerkt met vectoren. De lijnen worden berekent waardoor je oneindig
kunt inzoomen zonder dat je losse pixels gaat zien. Bij SVG werkt dat min of meer op dezelfde manier. Er wordt
gekeken naar de lijnen waaruit de afbeelding is opgebouwd.
Voordelen van SVG ten opzichte van Jpeg:
Met SVG hoef je niet alle lagen die je apart wilt animeren
ook apart in je HTML te zetten. Één code zorgt ervoor dat alle onderdelen bij
elkaar staan, maar wel los van elkaar te animeren zijn. Sommige dingen zoals kleur en lijndikte zijn alleen aan te passen met SVG.
Je kunt zo ver inzoomen als je wilt zonder verlies van
kwaliteit.
Nadelen:
De code klopt niet meer wanneer je een klein deel wilt aanpassen.
Wanneer je allemaal losse afbeeldingen zou gebruiken, kun je gewoon één
afbeelding vervangen. Ook is de code lastiger te lezen dan losse afbeeldingen. In
verschillende browsers kan het effect anders zijn. SVG is niet geschikt voor
gecompliceerde afbeeldingen.
Hoe werkt het?
Je maakt een vector-afbeelding in bijvoorbeeld Illustrator. Deze
afbeelding exporteer je als SVG bestand. Hierdoor wordt er een code geschreven
voor jou afbeelding. Deze code kun je in een HTML bestand zetten.
De lagen van je afbeeldingen worden verwerkt en krijgen in
SVG een class. Je kunt deze classes aanpassen. Het is ook mogelijk
om meerdere onderdelen in een groep te zetten en deze een class of ID te geven.
Met <translation> kun je de x en y aanpassen. Bijvoorbeeld:
<circle cx="0" cy="0" r="100" transform="translate(100 300)" /><circle cx="0" cy="0" r="100" transform="translate(100 300)" />
Met
scale(<sx> [<sy>]) kun je de grootte aanpassen. Wanneer alleen de X wordt aangepast blijven de verhoudingen gelijk.
Met skewX(<skew-angle>) skewY(<skew-angle>) kun je de helling bepalen.
Met
rotate(<rotate-angle> [<cx> <cy>]) kun je roteren.
Wanneer je met GreenSock werkt kun je in een TweenLite of TweenMax de eigenschappen aanpassen zoals je dat ook zou doen van een afbeelding of tekst.
Mijn code
Ik een SVG-bestand gemaakt met Illustrator en deze in HTML gezet. Hiervan heb ik van een paar classes met een onduidelijke naam de naam veranderd. Vervolgens heb ik de grootte van de SVG aangepast in CSS. Met GreenSock heb ik het rondje vergroot in een TweenLite.
Geen opmerkingen:
Een reactie posten