Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🖼 Hur du laddar upp SVG till WordPress: 3 säkra metoder

🖼 Hur du laddar upp SVG till WordPress: 3 säkra metoder

Du laddar upp en SVG-ikon till din webbplats, och WordPress vägrar tyst att ta emot den. Känns det igen? Som standard blockerar motorn .svg-filer av säkerhetsskäl, och ett försök att ladda upp en logotyp till mediebiblioteket resulterar i felmeddelandet "Tyvärr, denna filtyp är inte tillåten."

WordPress-fel vid försök att ladda upp en SVG-fil via mediebiblioteket

Problemet är inte en felaktig installation eller filrättigheter. WordPress utesluter medvetet SVG från vitlistan eftersom filens XML-struktur kan bära skadlig kod. Men du behöver inte ge upp vektorgrafik: här är tre säkra sätt att ladda upp SVG utan att riskera din webbplats.

💡 Snabb översikt:

  • Lär dig vad SVG är och varför WordPress blockerar det
  • Välj ett av tre säkra plugins för uppladdning
  • Konfigurera pluginet efter dina behov på ett par minuter
  • Jämför funktioner och få en slutlig rekommendation

Vad SVG är och hur det skiljer sig från JPEG och PNG

SVG (Scalable Vector Graphics) är ett vektorformat baserat på XML. Till skillnad från rasterformaten JPEG och PNG, som består av pixlar, beskriver SVG bilder matematiskt med hjälp av linjer, kurvor och former. Resultatet är en bild som förblir skarp på en 4K-skärm eller på en reklambanderoll i väggstorlek.

För en webbplatsägare innebär detta tre saker. För det första ser din logotyp och dina ikoner lika skarpa ut på alla enheter, från en telefon till en stationär bildskärm. För det andra väger en .svg-fil flera gånger mindre än sin PNG-motsvarighet: en typisk ikon tar 1-3 KB istället för 15-30 KB. För det tredje kan SVG animeras via CSS och JavaScript utan tredjepartsbibliotek.

Men det finns en baksida. XML-strukturen läses av webbläsaren som kod, och en angripare kan bädda in ett skript i filen. Det är just därför WordPress inte inkluderar SVG i listan över tillåtna format från början. När du försöker ladda upp en sådan får du samma felmeddelande som i skärmdumpen ovan.

SVG-säkerhet: vad du behöver veta innan du laddar upp

En .svg-fil är ett textdokument med taggar som <svg>, <path> och <circle>. Webbläsaren tolkar det nästan som HTML. Om en <script>-tagg eller en onload-hanterare gömmer sig inuti filen kommer webbläsaren att köra den koden. Detta kallas lagrad XSS: ett skadligt skript lagras på servern och aktiveras varje gång en besökare öppnar sidan.

I praktiken har inga massattacker via SVG mot WordPress registrerats; sårbarheten är känd, och utvecklare lärde sig för länge sedan hur man stänger den. Moderna SVG-plugins kör den uppladdade filen genom en sanerare: ett bibliotek som tar bort alla farliga taggar och attribut och bara lämnar kvar "ren" grafik.

Regeln är enkel: ladda aldrig upp SVG från opålitliga källor. Om filen är gjord av din designer eller nedladdad från en officiell ikonsajt är riskerna minimala. Om filen kom från en okänd klient via e-post, öppna den först i en textredigerare och kontrollera att det inte finns några <script>-taggar eller on*-attribut inuti.

Nedan finns tre plugins som löser SVG-uppladdningsproblemet med olika nivåer av kontroll och inställningar.

Sökresultat för SVG-plugins i WordPress-katalogen

Metod 1: SVG Support, maximala möjligheter

Inställningssida för SVG Support-plugin med säkerhetsalternativ och avancerat läge

SVG Support är det mest populära pluginet för att ladda upp vektorgrafik till WordPress. Över 1 miljon aktiva installationer, 4,5 i betyg på WordPress.org och konsekventa uppdateringar (senast i maj 2026) talar för sig själva.

Installationen är standard: Plugins → Lägg till nytt, skriv "SVG Support" i sökfältet, klicka på Installera nu och sedan Aktivera. Efter aktivering, gå till Inställningar → SVG Support.

Den viktigaste inställningen du bör aktivera direkt är Begränsa till administratörer. Den förhindrar alla utom administratörer från att ladda upp SVG. Om du är den enda som hanterar webbplatsen skyddar denna kryssruta mot oavsiktlig uppladdning av en farlig fil av en redaktör eller SEO-specialist.

Avancerat läge aktiverar CSS-animation och inline-rendering av SVG. Du behöver detta om du planerar att animera ikoner eller ändra deras färg via temastilar. Utan denna kryssruta tar pluginet automatiskt bort potentiellt farliga attribut, och animationen kan sluta fungera.

SVG Support kan också slå in uppladdade filer i en <img>-tagg med korrekta dimensioner; detta är viktigt för Core Web Vitals eftersom webbläsaren reserverar utrymme för bilden innan den laddas och sidan inte "hoppar".

  • Fördelar: finkornig åtkomstkontroll, avancerat läge för animationer, automatisk bildstorlek, regelbundna uppdateringar
  • Nackdelar: inställningar endast tillgängliga i en separat flik (ingen integration med mediebiblioteket)
  • Pris: gratis
  • Nedladdning: 🔗 SVG Support på WordPress.org

Metod 2: Safe SVG, minimalism från 10up-teamet

Installationssida för Safe SVG-plugin från WordPress-panelen

Safe SVG är utvecklat av byrån 10up; det är dessa personer som Microsoft, Adobe och Vita huset litar på. Och det är den bästa rekommendation ett säkerhetsplugin kan ha.

Till skillnad från SVG Support kräver Safe SVG ingen konfiguration. Installera, aktivera, och du är klar; du kan börja ladda upp SVG. Pluginet använder samma saneringsbibliotek som WordPress-kärnan (enshrined/svg-sanitize) och kör varje fil genom det vid uppladdning. Inga extra gränssnitt, inga inställningar; det bara fungerar.

Safe SVG tillåter SVG-uppladdningar för alla användare som har upload_files-behörigheten. Om din webbplats har flera författare bör du dessutom begränsa gruppen, till exempel via ett rollhanteringsplugin. Men för en ensam administratör är detta den enklaste och säkraste vägen.

Pluginet har funnits i flera år, har över 1 miljon aktiva installationer och ett betyg på 4,4. Det uppdateras mindre frekvent än SVG Support (senast i april 2026), men det är faktiskt ett tecken på stabilitet: det finns inget som kan gå sönder.

  • Fördelar: ingen konfiguration behövs, fungerar direkt, sanering på WordPress-kärnnivå, utvecklare med oklanderligt rykte
  • Nackdelar: inga inställningar för åtkomstkontroll, inget avancerat läge för animationer, ingen inline-rendering
  • Pris: gratis
  • Nedladdning: 🔗 Safe SVG på WordPress.org

Metod 3: WP SVG Images, sanering med rollkontroll

WP SVG Images-plugin banner för säker SVG-filuppladdning i WordPress

WP SVG Images är utvecklat av teamet bakom ShortPixel, kända för sina bildoptimeringsverktyg. Pluginet intar en mellanposition mellan SVG Support och Safe SVG: rollinställningar finns, men det finns inga onödiga skärmar.

Efter aktivering tillåter pluginet omedelbart SVG-uppladdningar för alla administratörer och redaktörer. Under Inställningar → WP SVG Images kan du finjustera vilka roller som får ladda upp och aktivera sanering individuellt för varje roll. Till exempel: administratörer laddar upp utan kontroller, redaktörer laddar upp med obligatorisk sanering, författare kan inte ladda upp alls.

Ett extra plus är SVG-förhandsvisning direkt i mediebiblioteket. Standard-WordPress visar en platshållarikon istället för vektorfilen. WP SVG Images renderar en miniatyrbild, så du ser exakt vad du laddade upp utan att öppna filen i en ny flik.

Pluginet tillhandahåller också filter för utvecklare: WPSVG_setAllowedTags och WPSVG_setAllowedAttrs låter dig lägga till anpassade taggar och attribut till sanerarens vitlista.

  • Fördelar: SVG-förhandsvisning i mediebiblioteket, flexibla saneringsinställningar per roll, filter för utvecklare, aktiv support
  • Nackdelar: inget avancerat animationsläge, kräver PHP 5.6.40+
  • Pris: gratis
  • Nedladdning: 🔗 WP SVG Images på WordPress.org

Jämförelsetabell: vilket plugin ska man välja

Plugin

Aktiva installationer

Betyg

Rollinställningar

Förhandsvisning i mediebibliotek

SVG-animationer

SVG Support

1M+

4,5 ★

✅ (admin / alla)

✅ (Avancerat läge)

Safe SVG

1M+

4,4 ★

❌ (endast upload_files)

WP SVG Images

30K+

5,0 ★

✅ (individuellt per roll)

Alla tre plugins är gratis och använder beprövade saneringsbibliotek. SVG Support är valet för dem som behöver animation och maximal kontroll. Safe SVG är för dem som värdesätter enkelhet och inte vill röra inställningar. WP SVG Images är en kompromiss med bekväm förhandsvisning och flexibel behörighetsfördelning.

Hur man installerar ett SVG-plugin och laddar upp en fil: steg för steg

Oavsett vilket plugin du väljer är installationsprocessen densamma:

Steg 1. Öppna Plugins → Lägg till nytt i WordPress adminpanel.

Steg 2. Ange plugin-namnet i sökfältet: SVG Support, Safe SVG eller WP SVG Images.

Steg 3. Klicka på Installera nu på kortet för det önskade pluginet, sedan Aktivera.

Steg 4. Om pluginet har inställningar (SVG Support eller WP SVG Images), gå till motsvarande flik och aktivera rollbegränsningar. För Safe SVG behövs inte detta steg.

Steg 5. Öppna inläggets eller sidans redigerare. I bildblocket klickar du på "Ladda upp"; formatet .svg finns nu på vitlistan.

Innan du laddar upp en SVG-fil, se till att du litar på dess källa. Använd helst filer skapade av din designer i Illustrator, Figma eller Inkscape. Om du fick en SVG från en tredjepartsleverantör, öppna den i Anteckningar och skanna den snabbt: det ska inte finnas något <script> eller onload= inuti.

I praktiken ger en tre sekunders manuell kontroll plus plugin-saneraren dubbel säkerhetsmarginal. Under år av arbete med WordPress har vi inte stött på en enda verklig incident med SVG som laddats upp via något av de tre beskrivna pluginen.

Om du föredrar videoformat visar klippet ovan hela processen från plugin-installation till infogning av SVG på en sida.

⁉️🤔 Vanliga frågor

Kan jag ladda upp SVG utan ett plugin?

Lägg till ett kodstycke med upload_mimes-filtret som registrerar MIME-typen image/svg+xml. Vi rekommenderar dock inte denna metod: utan en sanerare utsätter du din webbplats för lagrad XSS. Ett plugin löser säkerhetsproblemet automatiskt; ett par klick jämfört med ett potentiellt hål i ditt försvar.

Varför är pluginet Enable SVG inte längre tillgängligt?

Orsak: "Författarens begäran." Pluginet uppdaterades inte på 4 år och har permanent tagits bort från WordPress.org. Om du har det installerat, ersätt det med ett av de tre pluginen ovan. De underhålls aktivt och är kompatibla med WordPress 7.0.

Hur kontrollerar jag att en uppladdad SVG är säker?

En säker SVG består av grafiska primitiver som svg, g och path inuti. Inga script, inga foreignObject och inga onload- eller onclick-attribut förekommer i en ren fil. Alla tre plugins i denna artikel tar automatiskt bort farliga element under uppladdningen.

Vilket format är bäst för en logotyp, SVG eller PNG?

SVG är rätt val för de flesta webbplatser. En vektorlogotyp tar bara några kilobyte, blir inte suddig på retinaskärmar och kan ändra färg via CSS. PNG behövs bara om logotypen innehåller ett fotografi eller en komplex gradient som återges dåligt i vektor.

WP SVG Images eller Safe SVG: vilket är mer tillförlitligt?

Skillnaden ligger i bekvämlighet. Safe SVG är "ställ in och glöm" från en elitbyrå. WP SVG Images ger dig förhandsvisningar i mediebiblioteket och individuella rollinställningar. Säkerhetsmässigt är de likvärdiga.

Slutsats: vad du ska installera 2026

Alla tre plugins löser uppgiften med säkra SVG-uppladdningar; valet beror på ditt användningsfall.

Behöver du animation av vektorikoner och inline-rendering? Välj SVG Support; det är det enda pluginet med avancerat läge.

Vill du bara ladda upp en logotyp och glömma problemet? Safe SVG är ditt alternativ. Installera, aktivera, klart.

Behöver du förhandsvisningar i mediebiblioteket och finkornig åtkomstkontroll för ditt team? Välj WP SVG Images; ShortPixel skapade ett bekvämt verktyg med bäst betyg bland SVG-plugins.

Kort sagt: installera Safe SVG för minimalism eller SVG Support för full kontroll. Båda alternativen är gratis och testade på miljontals webbplatser. Och viktigast av allt, efter installation av något av de tre pluginen försvinner felmeddelandet "filtypen är inte tillåten" för gott.