Animated SVG's

Een Scalable Vector Graphic ofwel SVG is een bestandsformaat dat wordt gebruikt om logo's, illustraties en iconen oneindig scherp te kunnen tonen op iedere schermgrootte. SVG is ten op zichte van bitmap formaten als JPG en PNG altijd scherp. Ga maar eens met je muis over de onderstaande illustratie en ontdek het verschil zelf.

JPG & PNG vs SVG

png

Geanimeerde SVG's

Zoals je hierboven kunt zien is SVG een mooie oplossing voor illustraties. Maar deze SVG's kunnen we vervolgens ook animeren. Dan wordt het helemaal mooi. We maken dan eerst een ontwerp in Adobe Illustrator en importeren deze in Adobe After Effects. Vandaar kunnen de animatie als script exporteren en in de site zetten. Hierbij blijft de volledige animatie schaalbaar (SVG) zoals je hieronder kunt zien in een gif-animatie

Bitmap example