Als u inline SVG gebruikt, staat al die SVG-code in de HTML, en dus in de DOM. Je kunt ze stylen zoals je zou doen ,
, of een ander HTML-element. CSS-styling biedt de mogelijkheid van animaties en overgangen.
Een simpel voorbeeld:
Zie het Pen CodePen-logo als Inline SVG door Chris Coyier (@chriscoyier) op CodePen.
A schreef in deze tutorial hoe je een iets complexer ontwerp aanpakt. Hier is die demo.
Zie de Pen Wufoo SVG-advertentie door Chris Coyier (@chriscoyier) op CodePen.
In deze screencast maken we nog een geanimeerde SVG-advertentie voor Wufoo, die bijna helemaal opnieuw begint. Het ontwerp heeft enkele wolken die we animeren om langs te bewegen en soepel en eindeloos herhalen.
In eerste instantie gebruikten we inline SVG en animeerden het met CSS die zojuist aan hetzelfde HTML-document was gekoppeld. Maar om te laten zien hoe het werkt, hebben we die CSS verplaatst naar de SVG zelf, wat volledig geldig is. De reden dat u dat misschien wilt doen, is omdat de animatie kan worden uitgevoerd, zelfs als u de SVG gebruikt als background-image.
Demo:
Zie de Pen kKdDj door Chris Coyier (@chriscoyier) op CodePen.
Browserondersteuning voor die animatie kan variëren. Op het moment van schrijven werkte het alleen in Chrome.
Bestanden
- 22-ad-1.svg