Har du oplevet problemer med kvaliteten af ikoner, illustrationer og lignende grafik på din hjemmeside? Det har mange, og hvis du er en af dem, så får du her ét af svarende på, hvordan man ganske simpelt kan løse problemstillingen. Svaret på dine bønner hedder SVG filer.
Hvis du gør som mange andre, så benytter du formentlig .png eller .jpg filer til dine ikoner og illustrationer. Der er intet galt med disse formater, men når det gælder grafisk materiale, så er SVG et bedre valg. Det er det fordi, at dine ikoner og illustrationer forhåbentligt vil være lavet som vektorgrafik. Dette vil f.eks. være tilfældet, hvis grafikken er lavet i et program som Adobe Illustrator.
Hvad er forskellen på PNG, JPG og SVG?
Svaret på dette kan hurtigt blive langt og teknisk, men vi vil forsøge at holde det relativt kort, så det er til at forstå. Først og fremmest, så er PNG og JPG, formater som er bygget op af pixels. En pixel er en meget lille del af et billede. Sammensætningen af mange tusinde pixels er det, der giver det samlede billede. Når man gemmer helt normale billeder, som er opbygget af pixels, så vil man typisk benytte JPG og PNG, hvilket er helt efter bogen.
Der er dog et enkelt problem. Når pixels skal skaleres op, så bliver der ikke flere af dem. Dette betyder at kvaliteten forringes og billedet bliver mere uskarpt, især i kanterne. Graden af forringelse i kvaliteten afhænger selvfølgelig af, hvor meget du skalerer dit billede op.
Også tilbage til dét, det her indlæg handlede om. Du har et ikon, lavet i vektorgrafik, som du gerne vil bruge på din hjemmeside. Derfor gemmer du det som en PNG, så du har det med gennemsigtig baggrund. Men når du uploader det til dine hjemmeside og placerer det, hvor du vil have det, så ser det uskarpt ud. Det er irriterende, men løsningen er faktisk simpel – ja, du skal bruge SVG i stedet. Før vi fortæller hvad det præcist er svg filer kan, så får du her en sammenligning af de to formater. Til venstre er ikonet i PNG og til højre er det i SVG.
Du kan nok godt se forskellen (du kan eventuelt zoome ind for rigtigt at se den). På PNG versionen kan man se hvordan de mange pixels giver en “hakket” kant, som fremstår en smule utydelig. SVG versionen fremstår derimod knivskapt og dette ændres ikke, hvis man zoomer ind på det.
Men hvorfor så det?
Scalable Vector Graphics som svg står for, siger lidt hvad det er formatet kan. Det kan nemlig vise vektorgrafik. Det er et XML tekstbaseret filformat, som kan beskrive hvordan et billede skal fremstå. For dig betyder det, at du har et billede, som har en opløsning, der er fuldstændig uafhængig af skaleringen. Du kan altså skalerer ikonet lige så meget du vil, uden at du vil opleve at kvalitet forringes – og det er jo dét, vi er på jagt efter.
Du kan altså bruge svg filformatet, til alle dine vektorbaserede elementer (ikke til “normale” billeder). Du kan eksportere dine ikoner og illustrationer som svg filer, direkte fra Adobe Illustrator. Som man ellers ville med png, jpg og så mange andre formater, så vælger man ikke en størrelse på en svg, når den eksporteres. Størrelsen kan man blot sætte vha. CSS – og dermed lave den ligeså stor eller lille som man vil, uden at kvaliteten ændres.
Det kan være at du har lagt mærke til det, men hvis ikke, så er alle ikoner og illustrationer på vores hjemmeside i SVG format – faktisk så er logoet i headeren også. Så hvis du ønsker samme skarpe kvalitet, så skal du blot gøre det samme.
Tre klare fordele ved at bruge SVG fremfor JPG og PNG:
- SVG filer fylder mindre → Fordi SVG filer er opbygget af vektorer i stedet for pixels, så fylder de mindre. Dette kan i sidste ende betyder hurtigere loadtid på din hjemmeside.
- SVG filer kan skaleres uendeligt → Du kan lave en SVG fil så stor eller lille du vil, uden at det ændrer på kvalitet eller filstørrelsen. Det kan du ikke med PNG og JPG.
- SVG filer kan animeres med CSS → Fordi SVG filer er vektorgrafik, så kan det animeres via CSS, og det kan gøre din hjemmeside endnu mere unik og fed.
Jeg kan ikke uploade SVG filer i WordPress?
Nej, det kan du faktisk ikke – som udgangspunkt. Du kan uploade filer som JPG, PNG, GIF osv. men WordPress tillader ikke upload af SVG filer. Det er der dog også en meget simpel løsning på. Faktisk skal du blot installere et lille plugin, som klarer det hele for dig. Efter installationen af dette plugin, så kan du uploade SVG filer til WordPress og bruge dem alt det du vil, på din hjemmeside.
Det plugin vi normalt bruger, og som fungerer fuldstændigt upåklageligt, hedder “SVG Support.” Hvis du søger på “SVG” inde under “Add plugins” så vil det være det første, der kommer frem.
Alternativt kan du tilføje en funktion til dit temas functions.php fil. I bunden af functions.php filen skal du indsætte følgende stykke kode:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');
Det var alt for denne lille “guide” til hvordan du bruger SVG filer på din hjemmeside. Hvis du har spørgsmål eller brug for hjælp til brug af SVG filer eller design af ikoner/illustrationer, så er du naturligvis meget velkommen til at kontakte os.