SVG

SVG står for Scalable Vector Graphics og er et XML-baseret format til todimensionel grafik. Det bruges blandt andet til logoer, ikoner, illustrationer, diagrammer og andre grafiske elementer på websites. SVG er ikke et tegneprogram. Det er selve formatet og den struktur, som et program som Adobe Illustrator, Figma eller et kodeværktøj kan eksportere og arbejde med.

Den store forskel på SVG og almindelige pixelbilleder er, at store dele af grafikken kan beskrives som former, kurver, tekst og egenskaber i stedet for et fast gitter af pixels. Derfor hænger SVG tæt sammen med vektorgrafik. En enkel stregtegning kan skaleres fra et lille ikon til en stor skærm uden den klassiske pixellering, som opstår, når et lille rasterbillede bliver blæst for langt op.

W3C's SVG 2-specifikation beskriver formatet som et XML-baseret sprog til både vektorgrafik og blandet vektor/raster-grafik. Det er værd at bemærke, fordi en SVG-fil godt kan indeholde eller referere til rasterindhold. Filendelsen alene garanterer altså ikke, at alt i filen er “ægte vektor”.

På nettet har SVG en særlig fordel: browseren forstår formatet som grafik med en dokumentstruktur. Elementer kan styles med CSS, og SVG kan indgå i DOM'en, når det bruges inline. Det åbner for farveskift, animation og interaktion, som ikke fungerer på samme måde med et almindeligt JPG- eller PNG-billede.

Det betyder dog ikke, at SVG altid er det bedste billedformat. Fotos med millioner af farvevariationer hører normalt hjemme i rasterformater. SVG er stærkest til grafik, der kan beskrives forholdsvis effektivt med former og kurver. Et komplekst fotografi konverteret til tusindvis af vektorobjekter kan blive større og mere besværligt end et almindeligt optimeret billede.

Til logoer er SVG ofte særligt nyttigt. Et logo skal kunne fungere i mange størrelser, og en ren vektorversion gør det lettere at bruge samme grundgrafik på både website og højopløselige skærme. Til tryk vil man dog ofte også gemme andre originale vektorformater og en korrekt PDF afhængigt af produktionen.

SVG-filer kan indeholde farver på flere måder. Til web arbejder man typisk i skærmfarver som RGB eller CSS-farveværdier. CMYK hører derimod til trykproduktion og er ikke den normale måde at styre farver i en SVG, der skal vises i en browser.

Formatet er derfor både grafisk og teknisk. Designeren skal levere rene paths og passende struktur. Udvikleren skal vælge, hvordan filen indlejres. Og virksomheden skal have styr på, om filen faktisk er egnet til den sammenhæng, den bliver brugt i.

Brug SVG til grafiske elementer, hvor skalerbarhed og skarpe kanter giver mening: logo, simple ikoner, grafiske symboler, kurver, diagrammer og visse illustrationer. Brug ikke formatet mekanisk til alle billeder på en hjemmeside.

En praktisk arbejdsgang kan være:

1. Bevar en original redigerbar vektorfil hos designeren.
2. Eksportér en webversion med korrekt viewBox og uden unødvendige skjulte objekter.
3. Fjern overflødig metadata og kompleksitet, men kontrollér resultatet visuelt bagefter.
4. Vælg om SVG'en skal bruges som almindelig billedfil eller inline i HTML.
5. Tilføj relevant tilgængelig information, når grafikken bærer et budskab.
6. Test filen i de browsere og størrelser, hvor den faktisk skal bruges.

Et almindeligt logo kan ofte bruges som en ekstern SVG-fil i et billedelement. Det er simpelt og fungerer godt, når grafikken bare skal vises. Hvis enkelte dele skal ændre farve med CSS eller indgå i avanceret interaktion, kan inline SVG være mere fleksibelt, fordi elementerne bliver en del af dokumentstrukturen. Men mere fleksibilitet betyder også mere kode at holde styr på.

W3C specificerer, at SVG-indhold kan styles med CSS. Fill, stroke og andre egenskaber kan derfor styres med styles. Det er praktisk til eksempelvis ikoner, der skal følge tekstfarven i en knap eller skifte udtryk i forskellige temaer. Det bør dog designes bevidst. Hvis en logo-SVG indeholder 37 hårdkodede farver og tilfældige gruppenavne, er den ikke automatisk nem at theme.

Filens viewBox er vigtig for skaleringen. Den beskriver det interne koordinatsystem og gør det muligt at tilpasse grafikken til forskellige visningsstørrelser. Et ikon kan eksempelvis have et lille fast koordinatsystem og stadig vises i mange forskellige CSS-størrelser. Når viewBox mangler eller eksporten har mærkeligt ekstra lærred, opstår der ofte uventede luftmellemrum.

På en hjemmeside bør SVG bruges sammen med almindelige performanceprincipper. En enkel SVG kan være meget lille. En illustration med tusindvis af punkter, masker og filtre kan være tung. Se på filens reelle indhold frem for bare at antage, at “vektor er let”.

Tilgængeligheden afhænger af, hvordan grafikken bruges. W3C's SVG 2-specifikation beskriver blandt andet title- og desc-elementer som beskrivende elementer, og tilgængelighedsafsnittet beskriver understøttelse af navne, roller og WAI-ARIA. En dekorativ grafik og en informationsbærende grafik skal ikke nødvendigvis behandles ens. Hvis et ikon allerede ledsages af tydelig tekst, skal det ikke skabe en dobbelt og forvirrende oplæsning.

Et SVG-logo bør også have en fallback-strategi i selve hjemmesidens struktur. Virksomhedens navn og navigation må ikke være afhængig af, at en bestemt grafisk fil kan læses som tekst. Grafikken er en del af præsentationen, mens HTML-strukturen skal give den nødvendige mening.

Hvis du får lavet grafisk design, er det en god idé at bede om de relevante originalfiler og webformater. Et PNG-logo kan være nyttigt i nogle sammenhænge, men det bør ikke være den eneste fil, hvis logoet oprindeligt er lavet som vektor. Det gør fremtidige formater og størrelser unødigt besværlige.

På webdelen hænger SVG også sammen med responsivt design. Grafikken kan skaleres, men placering, maksimal bredde og forhold til teksten skal stadig være defineret i layoutet. Et logo, der teknisk kan blive 2.000 pixels bredt, bør ikke nødvendigvis gøre det.

Forestil dig en virksomhed, der kun har sit logo som en 420 pixels bred PNG med transparent baggrund. Det ser acceptabelt ud i desktop-headeren, men på en retina-skærm er kanterne ikke helt skarpe. Da virksomheden senere skal have logoet på en stor messevæg, er PNG-filen helt utilstrækkelig.

Designeren finder den oprindelige vektorfil og laver en ren SVG-version til web. Unødvendige hjælpelag og objekter fjernes, og viewBox tilpasses selve logoet. Den nye fil kan bruges i headeren i flere størrelser uden den samme pixellering. Til tryk bruges samtidig den oprindelige vektorfil og en trykegnet PDF, fordi web-SVG ikke er hele produktionsarkivet.

På hjemmesiden er der også 24 simple ikoner. De ligger først som separate PNG-filer i både mørk og lys version. I stedet laves de som SVG-ikoner, og farven styres i den konkrete komponent. Det reducerer antallet af grafiske varianter, fordi samme grundikon kan bruges i flere kontekster.

I et tænkt regneeksempel har hvert PNG-ikon to farveversioner, så 24 ikoner giver 48 filer. Med en passende SVG-struktur kan de 24 grundikoner genbruges og styles efter konteksten. Det er ikke automatisk den bedste løsning i alle systemer, men det viser forskellen mellem at gemme hver visuel variant som en ny fil og at lade præsentationen være en del af webdesignet.

Et af ikonerne bruges i en knap med teksten “Download brochure”. Her er ikonet dekorativt, fordi teksten allerede fortæller handlingen. Et andet SVG-element er et lille diagram uden ledsagende forklaring. Her skal man tage aktivt stilling til, om grafikken skal have en tekstlig beskrivelse eller om informationen bør præsenteres som rigtig tekst ved siden af.

Virksomheden får til sidst en enkel filpakke med original vektor, SVG til web, PNG til de systemer der kræver raster og en kort note om farver og brug. Det er langt mere robust end en mailtråd med “logo-final2-ny.png”. Du kan se et konkret eksempel på et logo, der skal fungere på tværs af flader, i vores case med logo til Schiøtt Flyt.

Den første faldgrube er at tro, at alle SVG'er er små. En fil kan indeholde ekstremt mange punkter, filtre, masker, embedded billeder eller metadata fra designprogrammet. En simpel form kan være effektiv, mens en automatisk vektorisering af et foto kan blive voldsomt tung. Mål filen og se på indholdet.

En anden fejl er at konvertere al tekst i SVG til kurver uden at tænke over formålet. Outlines kan være nødvendige i nogle grafiske workflows, men de gør teksten til geometri og fjerner den almindelige tekststruktur. Hvis teksten reelt er vigtig information på en hjemmeside, er rigtig HTML-tekst ofte et bedre valg.

Pas også på med SVG-filer fra ukendte kilder. Formatet er mere end et passivt bitmap og kan indeholde avanceret markup. Et CMS bør derfor have en bevidst politik for SVG-upload og ikke bare åbne filtypen ukritisk for alle brugere. Brug godkendte filer, og håndtér upload efter platformens sikkerhedsmodel.

En fjerde faldgrube er at bruge inline SVG overalt, bare fordi det giver mere kontrol. En ekstern billedfil kan være langt enklere at cache, genbruge og administrere. Brug inline, når du faktisk har brug for at style eller manipulere elementerne. Ellers kan en almindelig fil være den renere løsning.

Endelig bør SVG ikke forveksles med et komplet brandarkiv. Et logo kan være perfekt som SVG på web, men virksomheden bør stadig have originale filer og retningslinjer for brug. Én webfil er ikke det samme som en ordentlig visuel identitet.

SVG er et åbent webformat specificeret af W3C. Det kan stå alene som fil, indlejres i HTML og styles med CSS. Det er netop kombinationen af grafik, struktur og webteknologi, der gør formatet anderledes end almindelige rasterfiler.

Et SVG-element kan have title og desc som beskrivende elementer. De bør bruges med omtanke og i sammenhæng med den måde grafikken faktisk indlejres på. Tilgængelighed kan ikke løses ved mekanisk at skrive filnavnet ind som beskrivelse. Informationen skal give mening for brugeren.

Farver kan styres på en måde, der passer til webmiljøet, og nogle SVG'er kan bruge CSS til at følge et designs tema. Det gør formatet velegnet til ikonsystemer og interfacegrafik. Det gør det ikke nødvendigvis til det rigtige valg for en kompleks illustration, der aldrig skal ændre farve eller interagere.

Hvis SVG indgår i en større designproces, kan værktøjer som Figma og Adobe Illustrator bruges til at skabe og eksportere grafikken. Den endelige webfil bør stadig kontrolleres separat. Det, der ser rigtigt ud på designerens lærred, skal også være rent, hurtigt og forståeligt i den færdige løsning.

Det afgørende er derfor ikke, om filendelsen er SVG, men om grafikken er lavet og implementeret til den konkrete opgave. På web er det ofte et fremragende format til logoer og ikoner. Brugt tankeløst er det bare endnu en filtype.