SVG files

Een SVG file is een schaalbare vector file. Deze maak je in Illustrator en exporteer je vervolgens naar een stukje script wat je kunt insluiten op je pagina. Het grote voordeel van SVG files is dat ze hun scherpte behouden wanneer de pagina schaalt. SVG’s zijn eigenlijk alleen te gebruiken bij line-art, niet bij foto’s.

Opdracht

Maak een website waarbij de menu-items SVG items zijn. Wil je het moeilijker maken? Animeer de svg afbeeldingen bij een roll-over.
 

Oefening

Stap voor stap

  1. Maak je tekening in Illustrator
  2. Kies dan onder File voor Save as voor svg

    Save as SVG

    Om bij Illustrator je file als SVG op te slaan kies je simpelweg onder “File” > “Save as” > “SVG”

  3. Je krijgt dan een dialoog venster te zien. De instellingen kun je laten staan zoals ze staan.
  4. Echter, onderin is een knop “SVG Code…” te vinden.
  5. Wanneer je daar op klikt opent er een textfile met daarin de XML code van je afbeelding. Kortom: je afbeelding in vectoren.

    svg code

    Je SVG bestandje in XML. Kopieer de gehele tag; dus vanaf de begin tag tot en met de eindtag.

  6. Deze code kun je insluiten in je pagina. De doctype heb je niet nodig wanneer je al een doctype gebruikt.

    De SVG als HTML in Dreamweaver

    Plak deze code in je HTML bestand op de plek waar je je afbeelding wilt krijgen.

svg op 100% in je pagina

Je afbeelding is zichtbaar in de browser. In dit voorbeeld is mijn website fluid en wordt mijn ikoontje 100%. Dit is veel te groot en zullen we nog moeten aanpassen

Bekijk het resultaat in de browser. Je zult zien dat de SVG afbeelding op 100% breedte (en dus ook hoogte) wordt geladen. De afbeelding is fluid, dat wil zeggen dat deze mee schaalt met de breedte van het beeldscherm. Echter, een ikoontje van 100% breed is wellicht niet wat je wilt.

Aan de svg-tag kun je een width en height toevoegen. Hiermee kun je meer specifiek aangeven wat je wilt:

svg met width en height

Voeg in de code van je SVG width en height toe.

<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”  width=”50%” height=”50%” viewBox=”0 0 504 504″ enable-background=”new 0 0 504 504″ xml:space=”preserve”>

Overigens kun je ook pixels aangeven als maat bij de width en height. Maar het mooie aan svg bestanden is de schaalbaarheid waarbij scherpte bewaard blijft.

 

Je svg aanpassen

Wanneer je naar de XML code van je svg kijkt dan zie je voor ieder object een tag <g>. In het voorbeeld van mijn zonnebloem heb ik 4 <g> tags. Een voor iedere layer (gele bladeren, donkergele bladeren, lichtgele bladeren, hart).

In deze <g> tag kan ik aangeven dat de layer geschaald moet worden. Let echter op: dit moet je in iedere layer aangeven! Anders is de afbeelding niet consistent geschaald.

<g id=”Layer_5″ transform=”scale(0.2)”>

Handig? In geval van schalen niet, ik moet dit immers 4x herhalen. Echter, wanneer ik van een enkele layer iets moet wijzigen dan is het wel handig:

translate

Met behulp van de transform functie kun je je SVG schalen. Met behulp van de translate functie kun je je afbeelding verplaatsen.

<g id=”Layer_5″ transform=”scale(0.2) translate(140,0)”>

In dit geval heb ik de achterste layer van de zonnebloem 140 pixels over de x-as verschoven.

Er zijn veel zaken in te stellen bij svg afbeeldingen met betrekking tot positionering en afmeting. svg’s kun je goed animeren. Een tutorial vind je op CSS tricks
 

Links

Duidelijke (Engelstalige) uitleg met voorbeelden vind je op: CSS tricks.
Alle ins en outs over svg vind je op: w3.org.
SVG animeren.