SVG

Nu ik zo bezig ben met mijn site om te zetten naar HTML5 en met mijn jacht om zo weinig mogelijk plaatjes te gebruiken, ben ik er achter gekomen dat vectorafbeeldingen binnen de HTML kunnen worden gedeclareerd door middel van het SVG (Scalable Vector Graphics) formaat. Nu heb ik dat toegepast op mijn logo en dit blijkt te werken in Firefox 4, Chrome en zelfs in Internet Explorer 9, al ontbreekt in laatstgenoemde de schaduw. Het aantal HTTP requests om een blanco pagina te laden is hiermee gereduceerd naar twee: eentje voor de HTML pagina en eentje voor de CSS. Als ik inline CSS zou gebruiken dan kan het zelfs in slechts één request. Echter wordt de CSS gecached, wat met de HTML niet mogelijk is, dus loont het toch om dit in een apart bestand te houden, zodat de CSS alleen tijdens het eerste bezoek ingeladen hoeft te worden. Het maximum aantal paralelle HTTP requests ligt op 6, als er meer bestanden moeten worden gedownload, komen die in de wachtrij te staan. Met twee requests valt het dus nog ruim binnen de marge. De nieuwste versies van Safari en Opera ondersteunen het nog niet, dus het is nog niet verstandig om dit te gebruiken voor bedrijfskritieke afbeeldingen.

SVG is schaalbaar, dus als de pagina wordt ingezoomd, treedt er geen kwaliteitsverlies op, ook kan de schaduw middels een SVG filter worden ingesteld, zodat dezelfde parameters kunnen worden gebruikt als in box-shadow, de CSS variant. Ik hoop dat er nog een moment komt dat dit ook met CSS op te lossen is. Hieronder een code-voorbeeldje:

1
23
45
67
89
1011
1213

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <filter id="shadow" width="150%" height="150%">        <feOffset result="offOut" in="SourceGraphic" dx="8" dy="8"/>
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="6"/>        <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
    </filter>    <g id="logo" fill-rule="nonzero" filter="url(#shadow)" fill="#000000">
        <path id="path1" d="een_hoop_coordinaten"/>        <path id="path2" d="een_hoop_coordinaten"/>
        <path id="path3" d="een_hoop_coordinaten"/>        <path id="path4" d="een_hoop_coordinaten"/>
    </g></svg>

Hier worden nu 5 regels gebruikt om een schaduw te maken, dit kan in CSS met slechts één regel, maar wat natuurlijk nog belangrijker is, dat de opmaak wordt gescheiden van de content. Voor een printversie van de pagina kan dan bijvoorbeeld worden gekozen voor het logo zonder de schaduw. Ook kan in CSS een schaduw aan meerdere elementen worden toegewezen, als ik dan bijvoorbeeld de schaduw van de headerbalk wil veranderen, verandert die van het logo automatisch mee, zo zal het altijd een kloppend geheel blijven.

•  
109 stemmen
•  
•  
•  
•  
•  

Tot dusver hebben 109 lezers dit bericht gewaardeerd.

Stemmen & Reacties

Er zijn nog geen reacties op dit item. Plaats de eerste!