Sådan uploader du SVG'er til WordPress: 2 metoder

Vil du lære, hvordan du uploader SVG'er til WordPress? Vi vil i denne tutorial præsentere metoderne til at opnå dette..

Webadministratorer og webdesignere er forpligtet til at bruge forskellige mediefilformater i deres arbejde. Et af de mest populære formater i dag er SVG, et XML-baseret vektorformat. Desværre er det ikke alle browsere og platforme, der understøtter SVG, så du skal først aktivere SVG-understøttelse manuelt.

Denne artikel vil dække trinene til at uploade SVG-filer til et WordPress-websted ved hjælp af SVG Support plugin. Vi vil også besvare et par spørgsmål vedrørende sikkerhedsproblemerne omkring dette særlige mediefilformat, og hvorfor SVG er værd at bruge.

For at komme i gang, lad os blive fortrolige med SVG, og hvordan det virker.

Men inden du starter, hvis du aldrig har installeret WordPress, skal du finde ud af det Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

Hvad er SVG?

Scalable Vector Graphics (SVG) er et XML-tekstbaseret vektorgrafikbilledformat. Selvom almindelige billedformater som JPG og PNG består af tonsvis af bittesmå firkanter kaldet pixels, er dette format afhængig af XML-markeringssprog til at beskrive billedattributter.

I januar 2022, 42 % af alle hjemmesider på verdensplan brug SVG. Denne procentdel er steget siden januar 2021, hvor kun 29,4% af websteder har brugt det. Svarende til PNG- og JPG-formater er SVG populær blandt websteder med høj trafik som Google, Wikipedia og YouTube.

En anden stor ting ved SVG er, at det er bredt understøttet af alle større browsere.

Her er liste over browsere der understøtter SVG filformat:

navigator	Delvis støtte	Fuld støtte
Bord	-	Version 12-18, 79-96, 97
Firefox	Version 2	Version 3-94, 95, 96-97
Firefox til Android	-	Version 95
Chrome	-	Version 4-96, 97, 98-100
Chrome til Android	-	Version 96
Safari	Version 3.1	Version 3.2-15.1, 15.2, TP
Opera	-	Version 10-81, 82
Mini Opera	-	Alle versioner
Opera Mobile	-	Udgivelse 12-12.1, 64
Safari på iOS	-	Udgivelse 3.2-15.1, 15.2
Android browser	Udgivelse 3-4.3	Udgivelse 4.4-4.4.4, 96
UC browser til Android	-	Version 12.12
Samsung Internet	-	Udgivelse 4-14.0, 15.0
QQ browser	-	Version 10.4
Baidu-browser	-	Version 7.12
KaiOS browser	-	Version 2.5

Hvordan virker SVG?

SVG'er bruger XML til at producere todimensionelle vektorbilleder. I modsætning til JPG og PNG har vektorgrafik ingen pixels. I stedet er deres adfærd beskrevet i XML-tekstfiler.

Af denne grund kan SVG'er søges, indekseres, scriptes, ændres og komprimeres som kode. Som et resultat kan enhver oprette dem ved hjælp af en teksteditor eller vektorgrafiksoftware.

Understøtter WordPress SVG?

Der er ingen SVG-understøttelse i WordPress som standard på grund af de sikkerhedsrisici, det påfører – vi vil dække sikkerhedsproblemer omkring SVG mere i dybden senere.

Her er en fejlmeddelelse, der vises, når du uploader en SVG-grafik til et WordPress-websted:

Der er en aktuelle diskussion om at gøre SVG til en del af kerne WordPress-funktionalitet. Indtil da skal vi være kreative og bruge andre løsninger til at uploade SVG-billeder til WordPress.

Hvorfor bruge WordPress SVG?

På trods af dets sikkerhedsproblemer bruger mange brugere stadig dette billedformat, da det har forskellige fordele. Her er nogle af fordelene ved at bruge SVG-filer:

• Evolutivitet: Da SVG er et vektorbilledformat, bevarer SVG-filer den samme kvalitet på tværs af alle skærmopløsninger. Denne fordel er også til stede efter at have forstørret dem, hvilket er grunden til, at mange bruger dette skalerbare billedformat til ikoner og logoer.
• Mindre filstørrelse : SVG-filer gør det nemt at forbedre webstedets ydeevne, fordi de optager mindre weblagerplads og indlæses meget hurtigere end andre billeder.
• SEO Friendly : Google indekserer SVG-filer, så de kan vises på Google Billedsøgning og forbedrer din søgeindsats. SEO. Med andre typer billeder er du begrænset til at optimere deres alt-attributter.
• Kodebaserede SVG'er kan redigeres ved hjælp af en teksteditor eller vektorgrafikredigeringssoftware. Du kan optimere SVG-filer til websteder eller endda tilføje animationer for at gøre grafik interaktiv.

SVG på WordPress og sikkerhed

Da SVG i bund og grund er en XML-tekstfil, har den sårbarheder, der kan udnyttes, og som ikke påvirker andre billedformater. Derfor kan folk nemt kapre det med ondsindet kode for at starte Cross-Site Scripting (XSS) og XML External Entity (XXE) angreb på dit system.

Af denne grund bør du være forsigtig, når du håndterer SVG-filer og tilføjer dem til WordPress.

For at minimere sikkerhedsrisici skal du sørge for at rense SVG-filer, før du uploader dem til WordPress mediebibliotek. Denne proces fjerner mistænkelig kode og fejl, hvilket gør billederne sikre for dit websted.

Du kan rydde op i uploadede SVG-filer ved hjælp af et SVG-plugin – vi dækker trinene senere. Vi anbefaler dog, at du desinficerer den to gange med SVG Sanitizer Test -

En anden måde at sikre dit WordPress-websted på er at begrænse SVG-uploads til kun betroede brugere. Udvalgte brugere bør være opmærksomme på sikkerhedsproblemerne omkring SVG-formatet – dette vil afskrække dem fra at hente SVG-filer fra tvivlsomme kilder.

Sådan uploades SVG-filer til WordPress på 2 sikre metoder

Teknisk set er der to måder at tilføje SVG-understøttelse til WordPress: ved at bruge en WordPress plugin eller ved at aktivere den manuelt. Uanset hvad du vælger, anbefaler vi kraftigt, at du begrænser downloadprivilegier til administratorer og betroede brugere kun for at minimere ondsindede downloads.

Brug et WordPress-plugin

I denne tutorial vil vi bruge SVG-support. Det WordPress plugin bruger et SVG sanitizer-bibliotek, der automatisk aktiveres, når SVG-filer uploades til mediebiblioteket. Det er også nemt at sætte op og gratis at bruge.

Her er trinene til at konfigurere SVG-understøttelse:

1. IInstaller plugin'et og aktivere den.

2. Adgang til indstillinger -> support SVG fra dit WordPress-dashboard.

3. Marker afkrydsningsfeltet ud for indstillingen Begræns til administratorer for at begrænse uploadrettigheder. Gør det samme for muligheden Aktiver avanceret tilstand hvis du vil have adgang til avancerede funktioner, såsom inline SVG-gengivelse og CSS-styling.

4. Når du har gemt ændringerne, kan du trygt begynde at uploade SVG-filer til mediebiblioteket.

Tilføj WordPress SVG-understøttelse manuelt

Denne metode involverer redigering af fil functions.php af din WordPress hjemmeside. Derfor anbefaler vi kraftigt, at du følger disse trin, hvis du er fortrolig med PHP og fuldt ud forstår SVG-sikkerhedsproblemet.

Vær sikker på at du sikkerhedskopiere din WordPress hjemmeside før du foretager ændringer for at undgå tab af data i tilfælde af fejlkonfiguration.

De følgende trin vil forklare, hvordan du aktiverer SVG i WordPress manuelt ved hjælp af en FTP-klient som FileZilla.

1. Gå til dit websteds filmappe hos din vært
2. Adgang til public_html -> wp-inkluderer. Rul ned, indtil du find funktioner.php.

3. Højreklik på denne fil og vælg Vis/Rediger for at åbne den og indsæt følgende kodestykke 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');

4. Gem ændringer, og prøv at uploade en ny SVG-fil. Hvis processen lykkes, bør dit mediebibliotek acceptere filuploaden.

De mange fordele ved SVG-filer bidrager til den voksende popularitet af denne filtype. Desværre er XML-tekstfiler tilbøjelige til kodeinjektion, hvilket er hovedårsagen til, at WordPress ikke inkluderer SVG-understøttelse som standard.

Når det er sagt, er der to måder at få dit WordPress-websted til at acceptere SVG-filer: ved hjælp af en WordPress plugin eller rediger filen functions.php. Ud over at begrænse uploadrettigheder, vil du sikkert kunne uploade SVG-filer til webstedets mediebibliotek.

Andre anbefalede ressourcer

Vi inviterer dig også til at konsultere ressourcer nedenfor for at tage mere ejerskab og kontrol over din hjemmeside og blog.

• Sådan opretter du et simpelt WordPress-plugin
• Sådan opretter du et simpelt Gutenberg Block WordPress-plugin
• Sådan indstiller du din hjemmeside i WordPress
• Sådan forstår du WordPress Dashboard
• Sådan opretter du et simpelt WordPress-plugin

Konklusion

Det er det for denne guide, der viser dig, hvordan du uploader SVG'er til WordPress. Vi håber, at denne artikel har givet dig lidt indsigt i fordelene og risiciene ved at uploade SVG-filer til et WordPress-websted. Hvis du har nogen bekymringer eller forslag, så lad os det vide inden for kommentarer.

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

En medarbejder, del denne artikel på dine forskellige sociale netværk.   

...