SVG's uploaden naar WordPress: 2 methoden

Wilt u leren hoe u SVG's uploadt naar WordPress? We zullen in deze tutorial de methoden presenteren om dit te bereiken..

Webbeheerders en webdesigners zullen in hun werk ongetwijfeld verschillende mediabestandsformaten gebruiken. Een van de meest populaire formaten van vandaag is SVG, een op XML gebaseerd vectorformaat. Helaas ondersteunen niet alle browsers en platforms SVG, dus u moet SVG-ondersteuning eerst handmatig inschakelen.

Dit artikel behandelt de stappen voor het uploaden van SVG-bestanden naar een WordPress-website met behulp van de SVG-ondersteuningsplug-in. We zullen ook een paar vragen beantwoorden over de beveiligingsproblemen rond dit specifieke mediabestandsformaat en waarom SVG het gebruiken waard is.

Laten we om te beginnen vertrouwd raken met SVG en hoe het werkt.

Maar voordat we beginnen, als je nog nooit WordPress hebt geïnstalleerd, kom erachter Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

Wat is SVG?

Scalable Vector Graphics (SVG) is een op tekst gebaseerd XML-beeldformaat voor vectorafbeeldingen. Hoewel veelgebruikte afbeeldingsindelingen zoals JPG en PNG bestaan ​​uit tonnen kleine vierkantjes die pixels worden genoemd, vertrouwt deze indeling op XML-opmaaktaal om afbeeldingskenmerken te beschrijven.

In januari 2022, 42% van alle websites wereldwijd gebruik SVG. Dit percentage is gestegen sinds januari 2021, toen alleen 29,4% van de websites heb het gebruikt. Net als de PNG- en JPG-indelingen, is SVG populair bij websites met veel verkeer, zoals Google, Wikipedia en YouTube.

Een ander groot voordeel van SVG is dat het breed wordt ondersteund door alle belangrijke browsers.

Hier is de lijst met browsers die het SVG-bestandsformaat ondersteunen:

navigator	Gedeeltelijke ondersteuning	Volledige ondersteuning
Bord	-	Versie 12-18, 79-96, 97
Firefox	versie 2	Versies 3-94, 95, 96-97
Firefox voor Android	-	versie 95
Chrome	-	Versies 4-96, 97, 98-100
Chrome voor Android	-	versie 96
Safari	versie 3.1	Versie 3.2-15.1, 15.2, TP
opera	-	Versies 10-81, 82
Mini-opera	-	Alle versies
Opera Mobile	-	Versie 12-12.1, 64
Safari op iOS	-	Versie 3.2-15.1, 15.2
Android Browser	Versie 3-4.3	Versie 4.4-4.4.4, 96
UC-browser voor Android	-	versie 12.12
Samsung internet	-	Versie 4-14.0, 15.0
QQ Browser	-	versie 10.4
Baidu-browser	-	versie 7.12
KaiOS-browser	-	versie 2.5

Hoe werkt SVG?

SVG's gebruiken XML om tweedimensionale vectorafbeeldingen te produceren. In tegenstelling tot JPG en PNG hebben vectorafbeeldingen geen pixels. In plaats daarvan wordt hun gedrag beschreven in XML-tekstbestanden.

Om deze reden kunnen SVG's worden doorzocht, geïndexeerd, gescript, gewijzigd en gecomprimeerd zoals code. Als gevolg hiervan kan iedereen ze maken met behulp van een teksteditor of vector grafische software.

Ondersteunt WordPress SVG?

Er is standaard geen SVG-ondersteuning in WordPress vanwege de beveiligingsrisico's die het met zich meebrengt - we zullen later dieper ingaan op beveiligingsproblemen rond SVG.

Hier is een foutmelding die verschijnt bij het uploaden van een SVG-afbeelding naar een WordPress-website:

Er is een huidige discussie over het maken van SVG onderdeel van de kernfunctionaliteit van WordPress. Tot die tijd moeten we creatief zijn en andere oplossingen gebruiken om SVG-afbeeldingen naar WordPress te uploaden.

Waarom WordPress SVG gebruiken?

Ondanks de beveiligingsproblemen gebruiken veel gebruikers dit afbeeldingsformaat nog steeds omdat het verschillende voordelen heeft. Hier zijn enkele voordelen van het gebruik van SVG-bestanden:

• Evolutief : Aangezien SVG een vectorafbeeldingsindeling is, behouden SVG-bestanden dezelfde kwaliteit voor alle schermresoluties. Dit voordeel is ook aanwezig na het vergroten ervan, daarom gebruiken veel mensen dit schaalbare afbeeldingsformaat voor pictogrammen en logo's.
• Kleinere bestandsgrootte : SVG-bestanden maken het gemakkelijk om de prestaties van websites te verbeteren, omdat ze minder opslagruimte op het web in beslag nemen en veel sneller laden dan andere afbeeldingen.
• SEO Friendly : Google indexeert SVG-bestanden, zodat ze kunnen worden weergegeven op Google Image Search en uw zoekinspanningen worden verbeterd. SEO. Bij andere soorten afbeeldingen bent u beperkt tot het optimaliseren van hun alt-attributen.
• Op code gebaseerde SVG's zijn bewerkbaar met een teksteditor of software voor het bewerken van vectorafbeeldingen. U kunt SVG-bestanden optimaliseren voor websites of zelfs animaties toevoegen om afbeeldingen interactief te maken.

SVG op WordPress en beveiliging

Aangezien SVG in wezen een XML-tekstbestand is, bevat het misbruikbare kwetsbaarheden die geen invloed hebben op andere afbeeldingsindelingen. Daarom kunnen mensen het gemakkelijk kapen met kwaadaardige code om Cross-Site Scripting (XSS) en XML External Entity (XXE) aanvallen op uw systeem te starten.

Om deze reden moet je voorzichtig zijn bij het verwerken van SVG-bestanden en het toevoegen ervan aan WordPress.

Om veiligheidsrisico's te minimaliseren, moet u SVG-bestanden opschonen voordat u ze uploadt naar de WordPress-mediabibliotheek. Dit proces verwijdert verdachte code en fouten, waardoor de afbeeldingen veilig zijn voor uw website.

U kunt geüploade SVG-bestanden opschonen met behulp van een SVG-plug-in - we zullen de stappen later bespreken. We raden u echter aan om het twee keer te desinfecteren met de SVG Sanitizer-test -

Een andere manier om uw WordPress-website te beveiligen, is door SVG-uploads te beperken tot alleen vertrouwde gebruikers. Geselecteerde gebruikers moeten zich bewust zijn van de beveiligingsproblemen rond het SVG-formaat - dit zal hen ontmoedigen om SVG-bestanden van dubieuze bronnen te verkrijgen.

SVG-bestanden uploaden naar WordPress in 2 veilige methoden

Technisch gezien zijn er twee manieren om SVG-ondersteuning toe te voegen aan WordPress: met a WordPress Plugin of door het handmatig te activeren. Wat u ook kiest, we raden u ten zeerste aan om de downloadrechten te beperken tot beheerders en vertrouwde gebruikers om schadelijke downloads te minimaliseren.

Gebruik een WordPress-plug-in

In deze zelfstudie gebruiken we SVG-ondersteuning. Deze WordPress Plugin gebruikt een SVG-sanitizerbibliotheek die automatisch wordt geactiveerd bij het uploaden van SVG-bestanden naar de mediabibliotheek. Het is ook eenvoudig in te stellen en gratis te gebruiken.

Hier zijn de stappen om SVG-ondersteuning te configureren:

1. IInstalleer de plug-in en activeer deze.

2. Toegang tot instellingen -> ondersteuning SVG vanuit uw WordPress-dashboard.

3. Vink het vakje naast de optie aan Beperken tot beheerders om uploadrechten te beperken. Doe hetzelfde voor de optie Geavanceerde modus activeren als u toegang wilt tot geavanceerde functies, zoals inline SVG-rendering en CSS-styling.

4. Nadat u de wijzigingen heeft opgeslagen, kunt u veilig beginnen met het uploaden van SVG-bestanden naar de mediabibliotheek.

Handmatig ondersteuning voor WordPress SVG toevoegen

Deze methode omvat het bewerken van het bestand functions.php van uw WordPress-website. Daarom raden we u ten zeerste aan deze stappen te volgen als u bekend bent met PHP en het SVG-beveiligingsprobleem volledig begrijpt.

Zorg ervoor dat je back-up van uw WordPress-website voordat u wijzigingen aanbrengt om gegevensverlies in geval van een verkeerde configuratie te voorkomen.

In de volgende stappen wordt uitgelegd hoe u SVG handmatig in WordPress kunt inschakelen met behulp van een FTP-client zoals FileZilla.

1. Ga naar de bestandsmap van uw website bij uw host
2. Toegang tot public_html -> wp-includes. Scroll naar beneden tot je vind functies.php.

3. Klik met de rechtermuisknop op dit bestand en selecteer Bekijken/Bewerken om het te openen en plak het volgende codefragment erin:

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. Sla de wijzigingen op en probeer een nieuw SVG-bestand te uploaden. Als het proces succesvol is, moet uw mediabibliotheek de bestandsupload accepteren.

De vele voordelen van SVG-bestanden dragen bij aan de groeiende populariteit van dit bestandstype. Helaas zijn XML-tekstbestanden gevoelig voor code-injectie, wat de belangrijkste reden is dat WordPress standaard geen SVG-ondersteuning biedt.

Dat gezegd hebbende, zijn er twee manieren om ervoor te zorgen dat uw WordPress-website SVG-bestanden accepteert: door een WordPress Plugin of bewerk het bestand functions.php. Naast het beperken van uploadrechten, kunt u veilig SVG-bestanden uploaden naar de mediabibliotheek van de website.

Andere aanbevolen bronnen

We nodigen u ook uit om de ressources hieronder om meer eigendom en controle over uw website en blog te krijgen.

• Een eenvoudige WordPress-plug-in maken
• Hoe maak je een eenvoudige Gutenberg Block WordPress-plug-in?
• Hoe u uw startpagina in WordPress instelt
• Hoe het WordPress-dashboard te begrijpen
• Een eenvoudige WordPress-plug-in maken

Conclusie

Dat is het voor deze handleiding die u laat zien hoe u SVG's uploadt naar WordPress. We hopen dat dit artikel u enig inzicht heeft gegeven in de voordelen en risico's van het uploaden van SVG-bestanden naar een WordPress-website. Als u zich zorgen maakt of suggesties heeft, laat het ons dan weten binnen commentaires.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Ondertussen, deel dit artikel op uw verschillende sociale netwerken.   

...