Vill du lära dig hur man laddar upp SVG till WordPress? Vi kommer att presentera i denna handledning metoderna för att uppnå detta..
Webbadministratörer och webbdesigners är skyldiga att använda olika mediefilformat i sitt arbete. Ett av de mest populära formaten idag är SVG, ett XML-baserat vektorformat. Tyvärr stöder inte alla webbläsare och plattformar SVG, så du måste aktivera SVG-stöd manuellt först.
Den här artikeln kommer att täcka stegen för att ladda upp SVG-filer till en WordPress-webbplats med SVG Support-plugin. Vi kommer också att svara på några frågor om säkerhetsproblemen kring just detta mediefilformat och varför SVG är värt att använda.
För att komma igång, låt oss bekanta oss med SVG och hur det fungerar.
Men innan du börjar, ta reda på om du aldrig har installerat WordPress Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg
Tillbaka till varför vi är här.
Vad är SVG?
Scalable Vector Graphics (SVG) är ett XML-textbaserat vektorgrafikbildformat. Även om vanliga bildformat som JPG och PNG består av massor av små kvadrater som kallas pixlar, förlitar sig detta format på XML-markeringsspråk för att beskriva bildattribut.
I januari 2022, 42 % av alla webbplatser världen över använd SVG. Denna andel har ökat sedan januari 2021, då endast 29,4 % av webbplatserna har använt den. I likhet med PNG- och JPG-format är SVG populärt bland högtrafikerade webbplatser som Google, Wikipedia och YouTube.
En annan bra sak med SVG är att det stöds brett av alla större webbläsare.
Här är lista över webbläsare som stöder SVG-filformat:
| navigatör | Partiellt stöd | Fullt stöd |
| Bord | - | Versionerna 12-18, 79-96, 97 |
| Firefox | version 2 | Versionerna 3-94, 95, 96-97 |
| Firefox för Android | - | version 95 |
| krom | - | Versionerna 4-96, 97, 98-100 |
| Chrome för Android | - | version 96 |
| Safari | version 3.1 | Version 3.2-15.1, 15.2, TP |
| Opera | - | Versionerna 10-81, 82 |
| Mini Opera | - | Alla versioner |
| Opera Mobile | - | Release 12-12.1, 64 |
| Safari på iOS | - | Release 3.2-15.1, 15.2 |
| Android Browser | version 3-4.3 | Release 4.4-4.4.4, 96 |
| UC webbläsare för Android | - | version 12.12 |
| Samsung Internet | - | Release 4-14.0, 15.0 |
| QQ webbläsare | - | version 10.4 |
| Baidu webbläsare | - | version 7.12 |
| KaiOS webbläsare | - | version 2.5 |
Hur fungerar SVG?
SVG:er använder XML för att producera tvådimensionella vektorbilder. Till skillnad från JPG och PNG har vektorgrafik inga pixlar. Istället beskrivs deras beteende i XML-textfiler.
Av denna anledning kan SVG:er sökas, indexeras, skriptas, modifieras och komprimeras som kod. Som ett resultat kan vem som helst skapa dem med hjälp av en textredigerare eller vektorgrafikprogramvara.
Stöder WordPress SVG?
Det finns inget SVG-stöd i WordPress som standard på grund av säkerhetsriskerna det medför – vi kommer att täcka säkerhetsfrågor kring SVG mer djupgående senare.
Här är ett felmeddelande som visas när du laddar upp en SVG-grafik till en WordPress-webbplats:
Det finns en aktuell diskussion om att göra SVG till en del av WordPress kärnfunktioner. Tills dess måste vi vara kreativa och använda andra lösningar för att ladda upp SVG-bilder till WordPress.
Varför använda WordPress SVG?
Trots säkerhetsproblemen använder många användare fortfarande detta bildformat eftersom det har olika fördelar. Här är några av fördelarna med att använda SVG-filer:
- Evolutivitet: Eftersom SVG är ett vektorbildsformat håller SVG-filer samma kvalitet över alla skärmupplösningar. Denna fördel finns också efter att ha förstorat dem, vilket är anledningen till att många använder detta skalbara bildformat för ikoner och logotyper.
- Mindre filstorlek : SVG-filer gör det enkelt att förbättra webbplatsens prestanda eftersom de tar upp mindre webblagringsutrymme och laddas mycket snabbare än andra bilder.
- SEO Friendly : Google indexerar SVG-filer, så att de kan visas på Google Bildsökning och förbättrar dina sökinsatser. SEO. Med andra typer av bilder är du begränsad till att optimera deras alt-attribut.
- Kodbaserade SVG:er kan redigeras med hjälp av en textredigerare eller redigeringsprogram för vektorgrafik. Du kan optimera SVG-filer för webbplatser eller till och med lägga till animationer för att göra grafik interaktiv.
SVG på WordPress och säkerhet
Eftersom SVG i huvudsak är en XML-textfil har den exploateringsbara sårbarheter som inte påverkar andra bildformat. Därför kan människor enkelt kapa den med skadlig kod för att starta Cross-Site Scripting (XSS) och XML External Entity (XXE) attacker på ditt system.
Av denna anledning bör du vara försiktig när du hanterar SVG-filer och lägger till dem i WordPress.
För att minimera säkerhetsrisker, se till att sanera SVG-filer innan du laddar upp dem till WordPress mediebibliotek. Denna process tar bort misstänkt kod och fel, vilket gör bilderna säkra för din webbplats.
Du kan rensa upp uppladdade SVG-filer med hjälp av ett SVG-plugin – vi tar upp stegen senare. Vi rekommenderar dock att du desinficerar den två gånger med SVG Sanitizer Test -
Ett annat sätt att säkra din WordPress-webbplats är att begränsa SVG-uppladdningar till endast betrodda användare. Utvalda användare bör vara medvetna om säkerhetsproblemen kring SVG-formatet – detta kommer att avskräcka dem från att skaffa SVG-filer från tvivelaktiga källor.
Hur man laddar upp SVG-filer till WordPress i 2 säkra metoder
Tekniskt sett finns det två sätt att lägga till SVG-stöd till WordPress: med en Wordpress plugin eller genom att aktivera den manuellt. Oavsett vilket du väljer rekommenderar vi starkt att du begränsar nedladdningsprivilegier till administratörer och betrodda användare endast för att minimera skadliga nedladdningar.
Använd ett WordPress-plugin
I den här handledningen kommer vi att använda SVG-stöd. detta Wordpress plugin använder ett SVG-desinfektionsbibliotek som automatiskt aktiveras när SVG-filer laddas upp till mediebiblioteket. Det är också enkelt att installera och gratis att använda.
Här är stegen för att konfigurera SVG-stöd:
- IInstallera plugin-programmet och aktivera den.
- Tillgång till inställningar -> stödja SVG från din WordPress-instrumentpanel.
- Markera rutan bredvid alternativet Begränsa till administratörer för att begränsa uppladdningsprivilegier. Gör samma sak för alternativet Aktivera avancerat läge om du vill ha tillgång till avancerade funktioner, såsom inline SVG-rendering och CSS-styling.
- När du har sparat ändringarna kan du säkert börja ladda upp SVG-filer till mediebiblioteket.
Lägg till WordPress SVG-stöd manuellt
Denna metod involverar redigering av fil functions.php på din WordPress-webbplats. Därför rekommenderar vi starkt att du följer dessa steg om du är bekant med PHP och till fullo förstår SVG-säkerhetsproblemet.
Se till att du säkerhetskopiera din WordPress-webbplats innan du gör ändringar för att undvika dataförlust i händelse av felkonfiguration.
Följande steg kommer att förklara hur man aktiverar SVG i WordPress manuellt med hjälp av en FTP-klient som filezilla.
- Gå till din webbplats filkatalog hos din värd
- Tillgång till public_html -> wp-omfattar. Scrolla ner tills du hitta functions.php.
- Högerklicka på den här filen och välj Visa/Redigera för att öppna den och klistra in följande kodavsnitt i den:
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_filter('upload_mimes', 'add_file_types_to_uploads');- Spara ändringarna och försök ladda upp en ny SVG-fil. Om processen lyckas bör ditt mediebibliotek acceptera filuppladdningen.
De många fördelarna med SVG-filer bidrar till den växande populariteten för denna filtyp. Tyvärr är XML-textfiler utsatta för kodinjektion, vilket är huvudorsaken till att WordPress inte inkluderar SVG-stöd som standard.
Som sagt, det finns två sätt att få din WordPress-webbplats att acceptera SVG-filer: med en Wordpress plugin eller redigera filen functions.php. Förutom att begränsa uppladdningsprivilegier kommer du att kunna ladda upp SVG-filer på ett säkert sätt till webbplatsens mediebibliotek.
Andra rekommenderade resurser
Vi inbjuder dig också att konsultera medel nedan för att ta mer ägande och kontroll över din webbplats och blogg.
- Hur man skapar ett enkelt WordPress-plugin
- Hur man skapar ett enkelt Gutenberg Block WordPress-plugin
- Hur du ställer in din hemsida i WordPress
- Hur man förstår WordPress Dashboard
- Hur man skapar ett enkelt WordPress-plugin
Slutsats
Det är allt för den här guiden som visar hur du laddar upp SVG:er till WordPress. Vi hoppas att den här artikeln har gett dig lite insikt i fördelarna och riskerna med att ladda upp SVG-filer till en WordPress-webbplats. Om du har några funderingar eller förslag, vänligen meddela oss inom detta område commentaires.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
under tiden, dela den här artikeln på dina olika sociala nätverk.
.
