Att lägga till SVG-filer på din WordPress-webbplats kan göra dina bilder skarpa och tydliga.
Men även om WordPress låter dig ladda upp många filtyper, som bilder, ljud och video, stöder det inte SVG-filer direkt ur lådan.
Detta beror på att SVG-filer kan utgöra säkerhetsrisker. Men oroa dig inte. Det finns säkra sätt att använda SVG.
I den här artikeln visar vi hur du enkelt och säkert kan lägga till SVG-bildfiler i WordPress.
Vad är SVG?
SVG, eller Scalable Vector Graphics, är ett filformat som definierar vektorgrafik med hjälp av XML-märkspråket. Dess främsta fördel är att det låter dig förstora bilder utan att förlora kvalitet eller få pixligheter.
Hur fungerar SVG?
Scalable Vector Graphics (SVG) är en teknik som visar tvådimensionella ritningar med hjälp av XML. Det skiljer sig från vanliga bildformat som PNG, GIF eller JPG.
Om du tar en PNG- eller JPG-bildfil och zoomar in, kommer du att märka att bilden blir suddig och pixlig.
Vektorgrafik använder inte pixlar.
Istället använder de en 2-dimensionell karta som definierar grafiken du tittar på som koordinater. Bilden pixlar inte när du zoomar in eftersom den helt enkelt inte kan det.
Detta gör att du kan förstora vektorgrafik utan kvalitetsförlust. Viktigast av allt är att SVG-bilder kan ha en mycket mindre filstorlek än PNG- eller JPG-filer, vilket gör dem till ett utmärkt val för bildformatering.
Vektorgrafik används vanligtvis för ikoner, ikonfonter, webbplatslogotyper och varumärkesbilder. Du kanske vill lägga till SVG-filer i WordPress för din företagslogotyp, ikoner eller annan grafik.
SVG-filer kan dock vara lite osäkra. Därför stöder WordPress inte uppladdning av SVG-filer som standard.
Om du laddar upp en SVG-bild i WordPress kommer du att se följande felmeddelande: 'Tyvärr är den här filtypen inte tillåten av säkerhetsskäl.'
Säkerhetsproblem gällande SVG i WordPress
SVG-filer innehåller kod i markeringsspråket XML, vilket liknar HTML. Din webbläsare eller SVG-redigeringsprogram tolkar XML-markeringsspråket för att visa utdata på skärmen.
Dock öppnar detta upp din webbplats för möjliga XML-sårbarheter. Det kan användas för att få obehörig åtkomst till användardata eller utlösa brute force-attacker eller cross-site scripting-attacker.
Metoderna vi kommer att dela i den här artikeln kommer att försöka sanera SVG-filer för att förbättra deras säkerhet. Dessa plugins kan dock inte helt förhindra att skadlig kod laddas upp eller injiceras.
Den bästa lösningen är att endast använda SVG-filer skapade av pålitliga källor och begränsa SVG-uppladdningar till betrodda användare. För att lära dig mer om säkerhet kan du ta en titt på vår kompletta WordPress-säkerhetsguide för nybörjare.
Med det i åtanke visar vi hur du enkelt och säkert kan använda SVG-filer i WordPress med 3 metoder. Använd helt enkelt snabblänkarna nedan om du är intresserad av en specifik metod:
- Metod 1. Tillåt SVG-filer i WordPress med WPCode (Rekommenderas)
- Metod 2. Ladda upp SVG-filer i WordPress med SVG Support
- Metod 3. Ladda upp SVG-filer i WordPress med Safe SVG
Experttips: Innan du bestämmer dig för att använda SVG-bildfiler, låt oss inte glömma att du också kan använda bildredigeringsverktyg för att komprimera filstorlekar och förbättra din WordPress hastighet och prestanda.
Redo? Låt oss börja med en videoguide.
Videohandledning
Om du föredrar skriftliga instruktioner, fortsätt bara att läsa.
Metod 1. Tillåt SVG-filer i WordPress med WPCode (Rekommenderas)
Det enklaste sättet att säkert tillåta SVG-uppladdningar till WordPress är att använda WPCode, det mest kraftfulla pluginet för kodavsnitt som finns.
WPCode har ett stort bibliotek med förkonfigurerade kodavsnitt som kan ersätta många engångs-plugins på din webbplats. Det inkluderar avsnitten för att inaktivera bilagesidor, behålla klassiska inläggsredigeraren, och tillåta uppladdning av SVG-filer, allt utan risk att bryta din webbplats.
För att komma igång måste du installera och aktivera det kostnadsfria WPCode-pluginet. För detaljerade instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering vill du navigera till Kodavsnitt » Lägg till avsnitt i ditt WordPress adminpanel. Sök bara efter 'svg' och för muspekaren över 'Tillåt uppladdning av SVG-filer'.
Klicka bara på 'Använd kodavsnitt' när det visas.
Därefter hamnar du på sidan 'Redigera kodsnutt', där WPCode redan har konfigurerat alla inställningar som koden behöver för att köras.
Allt du behöver göra är att klicka på omkopplaren till 'Aktiv' och sedan trycka på knappen 'Uppdatera'.
Nu kan du ladda upp SVG-filer utan att WordPress ger dig ett fel- eller varningsmeddelande.
Du kan sedan behandla den som vilken annan bild som helst på din WordPress-webbplats.
Som standard tillåter WPCode-kodsnutten endast användare med rollen 'Administratör' att lägga till SVG-filer i WordPress.
Du kan också ge tillstånd till alla andra användarroller genom att ta bort rader 14-16 i kodavsnittet. Sedan kan du 'kommentera ut dem' genom att lägga till två snedstreck, '//', i början av raderna 11-13, vilket gör dem ljusbruna.
WPCode kommer inte att köra någon del av snippeten som den ser som en kommentar snarare än kod. Du kan se detta exempel i bilden nedan.
Oavsett vilket, när koden har tagits bort kan alla användare ladda upp SVG-filer till din webbplats. Se bara till att klicka på 'Uppdatera' för att spara eventuella ändringar du gör.
Metod 2. Ladda upp SVG-filer i WordPress med SVG Support
Den här andra metoden använder pluginet SVG Support. Det låter dig visa SVG:er i WordPress-inlägg och sidor och styra vem som kan ladda upp dem.
Först måste du installera och aktivera pluginet SVG Support. För mer information kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering vill du gå till Inställningar » SVG Support för att konfigurera pluginets inställningar.
På inställningssidan markerar du helt enkelt rutan bredvid alternativet 'Begränsa till administratörer?'. Detta gör att endast en webbplatsadministratör kan ladda upp SVG-filer i WordPress.
Nästa steg är att aktivera avancerat läge. Du behöver bara markera detta alternativ om du vill använda avancerade funktioner som CSS-animationer och rendering av inline SVG.
Glöm inte att klicka på knappen ‘Spara ändringar’ för att spara dina inställningar.
Du kan nu skapa ett nytt inlägg eller redigera ett befintligt. I inläggsredigeraren kan du ladda upp din SVG-fil precis som du skulle ladda upp vilken annan bildfil som helst.
Lägg helt enkelt till ett bildblock i redigeraren och ladda sedan upp SVG-filen.
Metod 3. Ladda upp SVG-filer i WordPress med Safe SVG
Den här metoden använder också ett plugin och låter dig sanera SVG-filer som laddas upp till WordPress.
Det första du behöver göra är att installera och aktivera pluginet Safe SVG. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Pluginet fungerar direkt ur lådan, och det finns inga inställningar du behöver konfigurera. Du kan helt enkelt börja ladda upp SVG-filer.
Nackdelen är att detta plugin tillåter SVG-uppladdningar av alla användare som kan skriva inlägg på din WordPress-webbplats. För att kontrollera vem som kan ladda upp filer, måste du köpa pluginets premiumversion.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du säkert lägger till SVG-filer i WordPress. Du kanske också vill se vår guide om hur du lägger till en widget i din webbplats sidhuvud och våra experttips på användbara kodavsnitt för nybörjare.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Dennis Muthomi
Jag bytte en klient från PNG till SVG-logotyper. Hastighetsskillnaden var fantastisk, särskilt på mobilen!
Ett snabbt tips från min erfarenhet: Skapa alltid en PNG-backup och använd 'picture'-elementet i din kod. På så sätt är du täckt med äldre webbläsare samtidigt som du får alla SVG-fördelar på moderna.
Jag uppskattar verkligen säkerhetstipsen också – de är superviktiga när man arbetar med klientwebbplatser!
Jiří Vaněk
Jag läste en gång en intressant artikel om varför SVG-filer kan vara farliga. Men innan jag hade den informationen kämpade jag ständigt med WordPress, som vägrade att ladda upp SVG:er, och jag var ganska frustrerad. Jag har ikoner för webben i SVG-format. WPCode och ett enkelt kodavsnitt hjälpte mig dock verkligen. Det är en enkel och funktionell lösning som vem som helst kan hantera, även en komplett nybörjare.
Eugene Velasquez
Jag har lagt till alla SVG-plugins men jag blockeras fortfarande från att lägga till SVG, som jag har skapat själv så det finns ingen risk eller skadlig kod. Finns det något annat sätt att lägga till SVG-filerna till WordPress?
WPBeginner Support
Om inte ens plugins tillåter dig att lägga till SVG-filer på din webbplats, rekommenderar vi att du kontaktar din webbhotell för att säkerställa att de inte har en säkerhetsinställning som kan åsidosätta din WordPress.
Admin
Felix Krusch
Sedan starten av Blocks kan du bara lägga till SVG-kod i ett "Anpassat HTML-block". Ingen snippet-plugin behövs längre.
WPBeginner Support
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Admin
sn
Hej,
Tack för dina artiklar.
Vanligtvis refererar jag till din webbplats och jag lär mig många saker från den.
Här skrev du att det inte är säkert att använda svg-filer på webbplatser.
Min fråga är om jag skapar SVG-filen själv från Adobe Illustrator eller liknande program,
är det då återigen osäkert att lägga den på min webbplats?
och bör jag använda pluginet "safe svg"?
Tack!
WPBeginner Support
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Admin
sn
Menar du att det inte kommer att finnas några sårbarheter i sådana fall?
WPBeginner Support
Sårbarheterna att oroa sig för skulle vara om du lägger till en SVG från en okänd källa som kan ha lagt till skadlig kod.
sn
Tack så mycket för ditt svar.
mr waghela
tack sir för att du delar bästa informationen
WPBeginner Support
Glad our guide was helpful
Admin
Alan Smith
Thanks a lot
WPBeginner Support
You’re welcome
Admin
Amandine
Hej, jag har laddat upp SVG-pluginet framgångsrikt och kan ladda upp min SVG-fil, men när det gäller att beskära logotypen kan jag inte beskära den och därför visas den inte på min webbplats. Den ser fin och skarp ut i anpassningspanelen till vänster, men inte på webbplatsen. Om jag däremot laddar upp en PNG-fil fungerar beskärningen och den visas i anpassningspanelen såväl som på webbplatsen. Kan du vänligen låta mig veta om det är något jag behöver göra för att min SVG-logotyp ska visas på webbplatsen? Tack.
WPBeginner Support
Du skulle behöva redigera din SVG med något annat än din WordPress-webbplats för att beskära den till den storlek du önskar
Admin
pushkraj
Jag vill ladda upp en svgz (komprimerad svg) men jag får ett fel av säkerhetsskäl. Även om jag kan ladda upp SVG-format utan problem, behöver jag svgz för att minska filstorleken. Vänligen hjälp mig med min fråga.
Tack.
WPBeginner Support
För att tillåta den filtypen vill du titta på vår guide här: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Admin
Brian
Hej WPBeginner,
Jag lade till plugin Safe SVG på min webbplats men det verkar som att mina SVG-filer blir trasiga när de laddas upp. Jag kan inte använda dem. Hur är detta möjligt?
WPBeginner Support
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Admin
Huu Tai
Tack för en heltäckande information,
Jag undrar om jag kan använda SVG Support för att ladda upp webblogotypen?
WPBeginner Support
Så länge ditt tema inte specifikt åsidosätter detta, bör du kunna det.
Admin
Scott
Jag förstår komplexiteten i att konvertera pixelbilder till matematiska.
Har det kommit en ganska enkel eller automatiserad metod eller program för att konvertera jpegs och .png-bilder till SVG?
Redaktionell personal
Hej Scott,
Inte vad vi känner till ännu.
Admin
Cactoos
Så vitt jag har provat kan Inkscape göra exakt det. Det är gratis och fungerar på Windows, Mac och Linux.
Gimp, illustratör, och jag är inte helt säker, men kanske krita kan göra detta också.
Gimp och krita är också gratis och multi OS.
Jag konverterade faktiskt ett ganska tungt och högkvalitativt foto till SVG (tidigare JPG-bild direkt från kameran) och det fungerade felfritt, det tog sin tid, men det fungerar. Det kan bero på att jag har ett ganska svagt system.
Salman Ravoof
Nästan all vektorredigeringsprogramvara har den funktionaliteten. Både Inkscape och Illustrator kan göra det. Resultaten blir dock inte lika bra om du har komplexa former och många färger (alla verkliga bilder faller under detta). Denna funktionalitet används bäst för bilder som har färre än 4 färger, ju färre desto bättre.