SVG i WordPress - Sådan bruger du SVG filer sikkert

Sådan bruger du SVG-billeder sikkert i WordPress

SVG-filer er små, lynhurtige og altid knivskarpe – uanset skærmstørrelse.

Det gør dem perfekte til logoer, ikoner og grafik i WordPress. Men WordPress blokerer SVG som standard på grund af sikkerhed.

I denne artikel lærer du, hvordan du nemt og sikkert aktiverer SVG-upload, og hvorfor det er en god idé. Vi viser dig fordele som skarpere grafik og hurtigere indlæsningstid – og hvordan du undgår de klassiske faldgruber.

Vi dækker plugins, manuel aktivering, optimering og sikkerhed.

Hvis du arbejder med webdesign, performance eller branding, er SVG et must. Og ja – du får også løsninger, der virker i både klassisk WordPress og med pagebuilders som Elementor og Divi.

Hvad er en SVG-fil?

Brug SVG-billeder sikkert i WordPress

SVG står for Scalable Vector Graphics og er et XML-baseret grafikformat. I modsætning til traditionelle billedformater som JPG eller PNG, er SVG vektorbaseret.

Det betyder, at det kan skaleres uendeligt uden tab af kvalitet – perfekt til logoer, ikoner og UI-elementer.

Skarp grafik uanset skærmstørrelse og opløsning
Lav filstørrelse og hurtig indlæsning
Kan styles og animeres med CSS og JavaScript
SEO-venlig, da teksten i filen kan læses af søgemaskiner
KLIK på billedet og forstør, som det passer dig 😉

Hvorfor blokerer WordPress SVG som standard?

WordPress tillader ikke SVG-upload som standard, fordi formatet kan indeholde scripts og kode, som potentielt kan misbruges til XSS-angreb (Cross-Site Scripting). Derfor er det vigtigt at aktivere SVG på en sikker måde.

Sådan tillader du SVG-upload i WordPress

1. Brug et plugin (den nemme og sikre metode)

Det nemmeste og sikreste valg for de fleste er at bruge et plugin, som både tillader SVG-upload og renser filen for skadelig kode.

SVG Support – giver mere kontrol og understøtter inline SVG (GRATIS) ingen proversion
Safe SVG – populært, simpelt og sikrer at filen er renset (GRATIS) ingen proversion

Sådan gør du:

Gå til Plugins > Tilføj nyt
Søg efter Safe SVG eller SVG Support
Installer og aktivér
Upload nu SVG-filer som normalt i mediebiblioteket

NB: Ved brug af SVG Support skal du aktivere “Advanced Mode” under Indstillinger > SVG Support, hvis du vil bruge inline SVG med styling og animation.

2. Manuel metode via functions.php (til udviklere)

Hvis du foretrækker at gøre det uden plugin, kan du tilføje følgende kode i dit tema eller child theme:

function allow_svg_upload($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'allow_svg_upload');

OBS: Denne metode er usikker uden ekstra validering og sanitering. Brug den kun, hvis du selv kontrollerer filerne og ikke tillader bruger-upload.

Sikkerhed: Sådan beskytter du dit site

Brug kun SVG`er fra pålidelige kilder
Brug plugin som Safe SVG, der automatisk renser filerne
Begræns upload-rettigheder til administratorer
Overvej at konvertere dine SVG`er til “flattened” versioner uden scripts

Bedste praksis for SVG i WordPress

1. Optimer dine SVG-filer

Brug evt. værktøjer som:

SVGOMG “anbefalet herfra ;-)”
SVGO

Du finder begge på github.com

De fjerner unødvendig metadata og reducerer filstørrelsen yderligere.

2. Brug inline SVG til avanceret kontrol

Med inline SVG (indsat direkte i HTML) kan du:

Style dele af grafikken med CSS
Animere med JavaScript eller CSS
Tilføje aria-labels for tilgængelighed

Dette kræver dog lidt mere teknisk viden og bør bruges med omtanke.

3. Brug fallback til ældre browsere

Selvom SVG er bredt understøttet, kan du med fordel inkludere en PNG-version som fallback til ældre e-mailklienter eller nichebrowsere. Det kan gøres med <picture>-tagget eller @supports i CSS.

Hvornår bør du bruge SVG?

SVG er især velegnet til:

Logoer
Ikoner
Diagrammer
Grafiske elementer i UI
Interaktive infografikker

Undgå SVG til fotos – her er JPG eller WebP bedre.

Konklusion: SVG og WordPress hører sammen

Hvis du arbejder med moderne webdesign og ønsker bedre performance, skarpere grafik og maksimal fleksibilitet, er SVG det oplagte valg. Men husk: med stor frihed følger ansvar – brug de rette værktøjer og hold øje med sikkerheden.