Scalable Vector Graphics zijn Cool!

Het feit dat het nieuwe logo van Google gemaakt is met behulp van Scalable Vector Graphics triggerde mij zo dat ik daar de afgelopen avonden lekker zoet mee ben geweest. Open dit plaatje maar even in een nieuw venster en kijk dan naar de paginabron. Dan zie je dat het logo gewoon is opgebouwd uit een soort van XML code. Wanneer je die code kopieert naar deze pagina kan je er mee gaan spelen. Zo ben ik begonnen en heb in een paar avonden veel bijgeleerd over de mogelijkheden van SVG en het is me duidelijk geworden dat daar echt heel veel mee mogelijk is! Daarbij heb ik veel gehad aan de informatie die ik hier vond.

Natuurlijk heb ik ook een poging gedaan een eigen logo te ontwerpen, maar dit is nog slechts "Spielerei". Het mooie is dat je deze afbeeldingen net zo groot of klein kan weergeven als je wilt, de kwaliteit blijft hetzelfde. Natuurlijk is dit niet geschikt voor foto's, maar voor logo's lijkt het me ideaal. Het is niet voor niets dat Google hier nu ook voor gekozen heeft.

Wil je zelf ook wat oefenen met SVG?

Kopieer dan onderstaande code naar deze pagina en ga gewoon dingen aanpassen. Zo ben ik ook begonnen en binnen een paar uurtjes maakte ik deze animatie.

<svg height="200" width="508" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" fill="#4885ed" r="100"></circle>
<circle cx="100" cy="100" fill="#fff" r="70"></circle>
<rect fill="#ffffff" height="78" transform="rotate(-40 166,67)" width="99" x="117" y="27"></rect>
<rect fill="#ffffff" height="78" transform="rotate(40 180,67)" width="99" x="180" y="67"></rect>
<circle cx="-70" cy="134" r="50" fill="#fff" fill-opacity="0.2" stroke-width="30" stroke="#EA4335">
<animate attributeName="cx" attributeType="XML" from="-70"  to="250" begin="0s" dur="2.5s" repeatCount="2" fill="freeze" />
</circle>
<circle cx="-70" cy="134" fill="#fff" r="50" fill-opacity="0.2" stroke-width="30" stroke="#34A853">
<animate attributeName="cx" attributeType="XML" from="-70"  to="396" begin="2s" dur="2s" repeatCount="2" fill="freeze" />
</circle>
<rect fill="#FBBC05" height="170" width="30" x="-30" y="0">
<animate id="one" attributeName="x" attributeType="XML" from="-30"  to="478" begin="3s" dur="2s" repeatCount="2" fill="freeze" />
<animate attributeName="y" attributeType="XML" from="0" to="30" begin="one.end" dur="0.5s" repeatCount="2" fill="freeze" />
</rect>
</svg>