Hoe u veilig vectorafbeeldingen kunt gebruiken met WordPress

Het toevoegen van aangepaste afbeeldingen en illustraties aan het ontwerp van uw Divi- website kan de visuele aantrekkingskracht aanzienlijk vergroten. Maar het vinden van de juiste beeldmiddelen of het inhuren van een ontwerper is niet altijd haalbaar. Gelukkig maakt Divi het gemakkelijk om uw eigen vectorafbeeldingen en illustraties rechtstreeks in de bouwer te maken.

In deze handleiding onderzoeken we hoe u SVG daadwerkelijk kunt implementeren zonder uw website in gevaar te brengen.

Zelfs als u geen ontwerpervaring heeft, kunt u professionele vectorafbeeldingen van hoge kwaliteit maken om uw Divi-website visueel echt naar een hoger niveau te tillen.

Inleiding tot SVG en het gebruik ervan

SVG staat voor Scalable Vector Graphics. Het is een veelgebruikt XML-gebaseerd vectorbeeldformaat dat is ontworpen om tweedimensionale vectorafbeeldingen te beschrijven. In tegenstelling tot rasterafbeeldingsformaten (zoals JPEG of PNG) die pixels gebruiken om afbeeldingen weer te geven, gebruikt SVG wiskundige vergelijkingen om vormen, lijnen en kleuren te definiëren, waardoor het een resolutie-onafhankelijk en zeer schaalbaar formaat wordt.

Hier zijn enkele belangrijke toepassingen van SVG bij het ontwerpen van websites:

1. Responsieve graphics: SVG-afbeeldingen zijn resolutie-onafhankelijk, wat betekent dat ze omhoog of omlaag kunnen worden geschaald zonder kwaliteitsverlies. Dit maakt ze perfect voor responsief webontwerp, waarbij de inhoud wordt aangepast aan verschillende schermformaten en resoluties.
2. Pictogrammen en logo's: SVG wordt vaak gebruikt voor pictogrammen, logo's en andere grafische elementen op websites. Omdat SVG-bestanden klein van formaat zijn en gemakkelijk kunnen worden aangepast en geanimeerd met CSS en JavaScript, zijn ze een populaire keuze voor het creëren van interactieve en visueel aantrekkelijke gebruikersinterfaces.
3. Retina- en hoge-DPI-beeldschermen: SVG is ideaal voor het weergeven van heldere en scherpe afbeeldingen op hoge-DPI-schermen (dots per inch), zoals Retina-beeldschermen, waar traditionele rasterafbeeldingen korrelig kunnen lijken als ze worden opgeschaald.
4. Animatie: SVG maakt het mogelijk om complexe animaties rechtstreeks binnen de XML-code te maken met behulp van tools zoals CSS-animaties of JavaScript-bibliotheken zoals Snap.svg en GreenSock Animation Platform (GSAP). Dit maakt het mogelijk om dynamische en interactieve elementen aan een website toe te voegen.
5. Toegankelijkheid: SVG-afbeeldingen zijn gemakkelijk toegankelijk voor schermlezers en ondersteunende technologieën, omdat de onderliggende XML-structuur kan worden geannoteerd met beschrijvende tekst, waardoor websites inclusiever en bruikbaarder worden voor mensen met een handicap.
6. SEO-voordelen: Zoekmachines kunnen de inhoud in SVG-bestanden parseren en indexeren, wat de zoekmachineoptimalisatie (SEO) kan verbeteren door meer context te bieden aan de crawlers van zoekmachines.
7. Interactieve gegevensvisualisatie: SVG kan worden gebruikt om interactieve gegevensvisualisaties te maken, zoals diagrammen en grafieken, die kunnen helpen informatie effectief over te brengen op een website.

Samenvattend is SVG een veelzijdig en krachtig formaat voor het maken en weergeven van vectorafbeeldingen op websites. Het vermogen om naadloos te schalen, goed te werken met verschillende schermformaten en resoluties en de ondersteuning voor animaties en interactiviteit maken het tot een waardevol hulpmiddel in modern webontwerp en -ontwikkeling.

Manieren om veilig vectorafbeeldingen te gebruiken met WordPress

In dit deel bekijken we twee methoden om veilige SVG in WordPress te gebruiken: handmatig en via plug-ins. De beste keuze voor uw behoeften wordt vervolgens ter selectie aan u voorgelegd. Laten we nu beginnen!

Voeg SVG-ondersteuning handmatig toe en zuiver uw code

Met een klein stukje code kan SVG-ondersteuning binnen enkele minuten aan WordPress worden toegevoegd. Dit zou u blootstellen aan de mogelijke veiligheidsproblemen die we al hebben benadrukt. De volgende acties zijn vereist om SVG op een veiligere manier te implementeren:

1. Breng wijzigingen aan in uw function.php-bestand om SVG-ondersteuning in te schakelen.
2. Sta niet toe dat de gewenste gebruikersrollen SVG-bestanden uploaden naar WordPress.
3. Voordat u SVG-bestanden uploadt, moet u ze allemaal opschonen.

Over het algemeen is het niet moeilijk om de stappen één en twee uit te voeren. De eerste stap is om verbinding te maken met uw website via File Transfer Protocol (FTP) en de hoofdmap voor WordPress te vinden. Zoek daar uw function.php-bestand, open het en plak de volgende code erin.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Hiermee kunt u SVG-bestanden uploaden naar WordPress en deze in uw mediabibliotheek bekijken, wat twee doelen dient. Nadat u de code heeft toegevoegd, sluit u uw function.php-bestand en slaat u de wijzigingen op.

Nu we moeten voorkomen dat mensen wier uploads we niet vertrouwen beschadigd raken, worden de zaken een beetje uitdagender. U kunt er bijvoorbeeld op vertrouwen dat uw redacteuren en auteurs nauwkeurige bestanden zullen uploaden, maar niet in uw bijdragers. Er zijn twee benaderingen die u hier kunt volgen:

1. Creëer unieke gebruikersrollen voor gebruikers met beperkte of geen toegang tot de Mediabibliotheek.
2. Om het soort bestanden dat elke gebruikersrol kan uploaden te beperken, installeert u een plug-in zoals WP Upload Restriction .

Het is waar dat beide strategieën nadelen hebben, wat een van de redenen is waarom handmatige SVG-implementatie een uitdaging kan zijn. Maar als u een strategie kiest om kwaadaardige SVG-uploads te stoppen, moet u er ook voor zorgen dat u deze niet per ongeluk gebruikt.

Idealiter zou u een ontsmettingstool moeten gebruiken voordat u een SVG naar uw website uploadt. Hiermee wordt uw bestand genomen, gecontroleerd of het iets twijfelachtigs bevat en vervolgens verwijderd als dat het geval is. Uiteindelijk heb je een opgeruimd SVG-bestand dat je eindelijk kunt indienen bij WordPress.

Veilige SVG-plug-in gebruiken

We wilden laten zien hoe moeilijk een veilige SVG-implementatie kan zijn door de bovengenoemde methode te gebruiken. Dit is nodig zodat u volledig kunt begrijpen wat de Safe SVG-plug-in doet.

de plug-in voor Safe SVG. In een notendop worden de problemen die we eerder noemden allemaal opgelost door deze plug-in, waaronder:

1. Waardoor het voor u mogelijk wordt om SVG's te uploaden.
2. Controleren of uw SVG's zichtbaar zijn in de mediabibliotheek.
3. Het opschonen van de broncode van elke SVG die u uploadt om beveiligingsfouten te voorkomen. Deze plug-in is in wezen plug-and-play van aard en neemt de eenvoudigste route om SVG-implementatie in WordPress te beveiligen. We raden u aan het te proberen als u vastbesloten bent SVG's te gebruiken.

SVG's animeren met CSS en plug-ins

Als u SVG’s in WordPress gaat integreren, wilt u ongetwijfeld uw rendement op uw investering maximaliseren. Dit betekent dat u, indien nodig, uw SVG's moet animeren met behulp van CSS. Er zijn twee benaderingen die u kunt volgen, die we eerder hebben besproken:

• SVG's kunnen net als elk ander element handmatig worden geanimeerd met CSS.
• Gebruik programma's zoals SVGator om SVG's te maken en te animeren.

Als u bereid bent wat nieuwe dingen te proberen, kunt u door hier en daar een paar animaties toe te voegen de gebruikerservaring op uw website aanzienlijk verbeteren. Het toevoegen van video's of GIF's zou echter aanzienlijk slechter zijn voor mobiele apparaten dan het gebruik van SVG's en CSS om dit te bereiken.

Conclusie

Met de mogelijkheid om rechtstreeks in de Divi-builder aangepaste vectorafbeeldingen te maken, beschikt u over een krachtige manier om illustraties en pictogrammen voor uw site te maken zonder dat enige ontwerpexpertise nodig is. Door deze originele afbeeldingen te implementeren, kunnen uw pagina's en berichten een uniekere, gepersonaliseerde esthetiek krijgen. U zult verrast zijn hoe professioneel uw DIY-vectorafbeeldingen eruit kunnen zien!