Inline SVG i stylesheet
Ingen kommentarer Guide, Webdesign

Nu hvor jeg sidder og opfrisker Psylicium.dk, har jeg opdaget noget nyt, og må hellere få dokumenteret det, inden jeg glemmer det igen. Jeg foretrækker jo SVG til ensfarvede ikoner og den slags responsive, skalérbare elementer, og hidtil har jeg brugt separate eksterne SVG-filer. Nu fandt jeg lige et trick til at implementere dem i mit stylesheet, og det ser ud til at virke i møgungen Internet Explorer 11 samt de nyeste versioner af Edge, Chrome og Safari.

Lav et ikon i f.eks. Illustrator eller andre editorer, som kan gemme som SVG – eller bare nap ét fra nettet. Jeg bruger Illustrator CS3, og kan få vist SVG-koden i stedet for at gemme det. Mine indstillinger er som følger:

SVG Profiles sat til “SVG Tiny 1.2”, Type sat til “SVG”, Subsetting sat til “None” og Location sat til “Embed”. Decimal Places og alt det andet bruger standardværdierne.

Når jeg trykker “Show SVG Code…”, åbner browseren en kode nogenlunde som denne:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<svg version="1.2" baseProfile="tiny" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" xml:space="preserve">
<path d="M170,0H30C13.432,0,0,13.432,0,30v140c0,16.568,13.432,30,30,30h67.949v-81.671H71.567V87.775h26.382v-22.53 c0-26.141,15.967-40.386,39.289-40.386c11.17,0,20.77,0.833,23.556,1.199v27.324l-16.176,0.008 c-12.681,0-15.127,6.024-15.127,14.869V87.76h30.26l-3.948,30.554h-26.312V200H170c16.568,0,30-13.432,30-30V30 C200,13.432,186.568,0,170,0z"/>
</svg>

Der skal rettes lidt i koden for at den virker optimalt, så for at kunne skalere ikonet med CSS starter vi med at fjerne width="200px" height="200px" i koden. Vi har egentlig heller ikke brug for id="Layer_2", så det bliver også kasseret. Dernæst skal vi angive en farve, og selvom mit facebook-ikon er sort, ved jeg ikke hvorfor farveværdien ikke er med i min kode. For at kunne virke i IE 11, skal vi bruge rgb-værdier i stedet for hex. Tilføj fill="rgb(255,0,0)" i slutningen af <path>-tagget, lige før den afsluttende />. Nu burde vi ha’ et flot rødt ikon.

Der skal lidt mere til for at gøre IE tilfreds, så vi skal også fjerne encoding="utf-8" øverst i koden, så der kun står <?xml version="1.0"?>. Og nu vi er ved det, kan vi lige så godt fjerne kommentarlinjen nedenunder, altså den der starter med <!-- Generator: Adobe blabla....

Nu skulle vi være færdige, og den endelige kode ser således ud:

<?xml version="1.0"?>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve">
<path d="M170,0H30C13.432,0,0,13.432,0,30v140c0,16.568,13.432,30,30,30h67.949v-81.671H71.567V87.775h26.382v-22.53 c0-26.141,15.967-40.386,39.289-40.386c11.17,0,20.77,0.833,23.556,1.199v27.324l-16.176,0.008 c-12.681,0-15.127,6.024-15.127,14.869V87.76h30.26l-3.948,30.554h-26.312V200H170c16.568,0,30-13.432,30-30V30 C200,13.432,186.568,0,170,0z" fill="rgb(255,0,0)"/>
</svg>

Lad os prøve at teste det (IKKE i IE!) ved at lave en div med SVG’en som baggrund:

<div class="fb-icon"></div>

I vores stylesheet sættes SVG’en som baggrund (og hvis ikonet skal være klikbart, kan man sætte et usynligt link henover med height og width til 100%). Start med at lave class’en .fb-icon. Mellem tuborgklammerne skrives først background: url('data:image/svg+xml,');, og vi angiver 200 pixels som bredde og højde:

.fb-icon {
background: url('data:image/svg+xml,');
width: 200px;
height: 200px;
}

Umiddelbart efter xml, (altså efter kommaet) indsættes hele vores SVG-kode, så det kommer til at se sådan ud:

.fb-icon {
background: url('data:image/svg+xml,<?xml version="1.0" encoding="utf-8"?><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve"><path d="M170,0H30C13.432,0,0,13.432,0,30v140c0,16.568,13.432,30,30,30h67.949v-81.671H71.567V87.775h26.382v-22.53 c0-26.141,15.967-40.386,39.289 40.386c11.17,0,20.77,0.833,23.556,1.199v27.324l-16.176,0.008 c-12.681,0-15.127,6.024-15.127,14.869V87.76h30.26l-3.948,30.554h-26.312V200H170c16.568,0,30-13.432,30-30V30 C200,13.432,186.568,0,170,0z" fill="rgb(255,0,0)"/></svg>');
width: 200px;
height: 200px;
}

Vær sikker på, at hele SVG-koden står på EN linje, ellers kan det skabe problemer i stylesheet’et. Nu burde vi gerne være endt op med et fint rødt facebook-ikon på 200 x 200 pixels. Mission accomplished 🙂 – og dog. Atter en gang skal vi ta’ os af den utilpassede møgunge IE, og derfor URL-encode koden. Det gøres nemmest ved at gå til f.eks. https://meyerweb.com/eric/tools/dencoder/, indsætte koden og trykke “Encode”. Nu får vi en lang og kringlet kode, som skal erstatte den letlæselige i .fb-icon-classen:

.fb-icon {
background: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.2%22%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20200%20200%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M170%2C0H30C13.432%2C0%2C0%2C13.432%2C0%2C30v140c0%2C16.568%2C13.432%2C30%2C30%2C30h67.949v-81.671H71.567V87.775h26.382v-22.53%20c0-26.141%2C15.967-40.386%2C39.289%2040.386c11.17%2C0%2C20.77%2C0.833%2C23.556%2C1.199v27.324l-16.176%2C0.008%20c-12.681%2C0-15.127%2C6.024-15.127%2C14.869V87.76h30.26l-3.948%2C30.554h-26.312V200H170c16.568%2C0%2C30-13.432%2C30-30V30%20C200%2C13.432%2C186.568%2C0%2C170%2C0z%22%20fill%3D%22rgb(255%2C0%2C0)%22%2F%3E%3C%2Fsvg%3E');
width: 200px;
height: 200px;
}

Nu burde ikonet også virke i IE, så vi skulle være dækket godt ind. Selvom det ser uoverskueligt ud, kan man stadig godt ændre farven. Henimod slutningen af koden står der fill%3D%22rgb(255%2C0%2C0) – og det er jo dér vores farve er angivet. Kommaerne er dog blevet til %2C, men hvis man kan abstrahere fra det, kan man se at der stadig står 255 0 0. For at give logoet sin rigtige blå farve (som har RGB 59,89,152), skal fill-værdien simpelthen bare være (59%2C89%2C152).