Comment utiliser en toute sécurité des images vectorielles avec WordPress

L’ajout de graphiques et d’illustrations personnalisés à la conception de votre site Web Divi peut vraiment contribuer à améliorer l’attrait visuel. Mais trouver les bons éléments d’image ou embaucher un designer n’est pas toujours possible. Heureusement, Divi facilite la création de vos propres images et illustrations vectorielles directement dans le constructeur.

Dans ce guide, nous explorerons comment implémenter réellement SVG sans compromettre votre site Web.

Même si vous n’avez pas d’expérience en conception, vous pouvez créer des images vectorielles professionnelles de haute qualité pour vraiment faire passer votre site Web Divi au niveau supérieur visuellement.

Introduction au SVG et à ses utilisations

SVG signifie Graphiques vectoriels évolutifs. Il s'agit d'un format d'image vectorielle basé sur XML largement utilisé, conçu pour décrire des graphiques vectoriels bidimensionnels. Contrairement aux formats d'images raster (tels que JPEG ou PNG) qui utilisent des pixels pour représenter les images, SVG utilise des équations mathématiques pour définir des formes, des lignes et des couleurs, ce qui en fait un format indépendant de la résolution et hautement évolutif.

Voici quelques utilisations clés du SVG dans la conception de sites Web:

1. Graphiques réactifs: les images SVG sont indépendantes de la résolution, ce qui signifie qu'elles peuvent être agrandies ou réduites sans perte de qualité. Cela les rend parfaits pour la conception Web réactive, où le contenu s’adapte à différentes tailles et résolutions d’écran.
2. Icônes et logos : SVG est couramment utilisé pour les icônes, logos et autres éléments graphiques sur les sites Web. Étant donné que les fichiers SVG sont de petite taille et peuvent être facilement personnalisés et animés avec CSS et JavaScript, ils constituent un choix populaire pour créer des interfaces utilisateur interactives et visuellement attrayantes.
3. Écrans Retina et haute résolution: SVG est idéal pour afficher des graphiques nets et nets sur des écrans haute résolution (points par pouce) comme les écrans Retina, où les images raster traditionnelles peuvent apparaître pixellisées lorsqu'elles sont agrandies.
4. Animation: SVG permet la création d'animations complexes directement dans le code XML à l'aide d'outils tels que les animations CSS ou les bibliothèques JavaScript comme Snap.svg et GreenSock Animation Platform (GSAP). Cela permet d’ajouter des éléments dynamiques et interactifs à un site Web.
5. Accessibilité: les images SVG sont facilement accessibles aux lecteurs d'écran et aux technologies d'assistance, car la structure XML sous-jacente peut être annotée avec un texte descriptif, ce qui rend les sites Web plus inclusifs et utilisables pour les personnes handicapées.
6. Avantages du référencement: les moteurs de recherche peuvent analyser et indexer le contenu des fichiers SVG, ce qui peut améliorer l'optimisation des moteurs de recherche (SEO) en fournissant plus de contexte aux robots des moteurs de recherche.
7. Visualisation de données interactive : SVG peut être utilisé pour créer des visualisations de données interactives, telles que des tableaux et des graphiques, qui peuvent aider à transmettre efficacement des informations sur un site Web.

En résumé, SVG est un format polyvalent et puissant pour créer et afficher des graphiques vectoriels sur des sites Web. Sa capacité à évoluer de manière transparente, à fonctionner avec différentes tailles et résolutions d'écran, ainsi qu'à prendre en charge les animations et l'interactivité, en font un outil précieux dans la conception et le développement de sites Web modernes.

Façons d’utiliser en toute sécurité des images vectorielles avec WordPress

Dans cette partie, nous examinerons deux méthodes pour utiliser SVG sécurisé dans WordPress : manuellement et via des plugins. Le choix le mieux adapté à vos besoins vous sera ensuite présenté pour sélection. Commençons maintenant!

Ajoutez manuellement le support SVG et nettoyez votre code

Avec un petit morceau de code, le support SVG peut être ajouté à WordPress en quelques minutes. Cela vous exposerait aux éventuels problèmes de sécurité que nous avons déjà soulignés. Les actions suivantes sont nécessaires pour implémenter SVG de manière plus sécurisée:

1. Apportez des modifications à votre fichier function.php pour activer la prise en charge SVG.
2. Interdisez aux rôles d'utilisateur souhaités de télécharger des fichiers SVG sur WordPress.
3. Avant de télécharger des fichiers SVG, nettoyez-les tous.

Dans l’ensemble, il n’est pas difficile de suivre les étapes un et deux. La première étape consiste à vous connecter à votre site Web à l’aide du protocole de transfert de fichiers (FTP) et à rechercher le dossier racine de WordPress. Trouvez-y votre fichier function.php, ouvrez-le et collez-y le code suivant.

// 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' );

Avec cela, vous pouvez télécharger des fichiers SVG sur WordPress et les voir dans votre bibliothèque multimédia, répondant à deux objectifs. Après avoir ajouté le code, fermez votre fichier function.php et enregistrez les modifications.

Maintenant que nous devons empêcher la corruption des personnes dont nous ne faisons pas confiance aux téléchargements, les choses deviennent un peu plus difficiles. Vous pourriez, par exemple, faire confiance à vos éditeurs et auteurs pour télécharger des fichiers précis, mais pas à vos contributeurs. Vous pouvez adopter deux approches ici:

1. Établissez des rôles d'utilisateur uniques pour les utilisateurs ayant un accès restreint ou inexistant à la médiathèque.
2. Pour restreindre les types de fichiers que chaque rôle d'utilisateur peut télécharger, installez un plugin tel que WP Upload Restriction .

Il est vrai que les deux stratégies présentent des inconvénients, ce qui est l’une des raisons pour lesquelles la mise en œuvre manuelle du SVG peut s’avérer difficile. Mais si vous choisissez une stratégie pour arrêter les téléchargements SVG malveillants, vous devez également vous assurer de ne pas l'utiliser accidentellement.

Idéalement, vous devriez utiliser un outil de désinfection avant de télécharger un SVG sur votre site Web. Cela prendra votre fichier, vérifiera s'il contient quelque chose de douteux, puis le supprimera si c'est le cas. Au final, vous aurez un fichier SVG bien rangé que vous pourrez enfin soumettre à WordPress.

Utiliser le plugin SVG sécurisé

Nous avions l'intention de démontrer à quel point la mise en œuvre sûre de SVG peut être difficile en utilisant la méthode susmentionnée. Ceci est nécessaire pour que vous puissiez pleinement comprendre ce que fait le plugin Safe SVG .

le plugin pour Safe SVG. En un mot, les difficultés que nous avons évoquées précédemment sont toutes résolues par ce plugin, notamment:

1. Ce qui vous permet de télécharger des SVG.
2. Vérifier que vos SVG sont visibles dans la Médiathèque.
3. Nettoyer le code source de chaque SVG que vous téléchargez pour éviter les failles de sécurité. Ce plugin est essentiellement de nature plug-and-play et emprunte la voie la plus simple pour sécuriser l’implémentation SVG dans WordPress. Nous vous conseillons de l'essayer si vous êtes déterminé à utiliser des SVG.

Animation de SVG à l'aide de CSS et de plugins

Si vous vous lancez dans l’intégration de SVG dans WordPress, vous souhaiterez sans aucun doute maximiser votre retour sur investissement. Cela signifie que, le cas échéant, vous devez animer vos SVG en utilisant CSS. Vous pouvez adopter deux approches, dont nous avons déjà discuté:

• Les SVG peuvent être animés manuellement avec CSS comme n'importe quel autre élément.
• Utilisez des programmes comme SVGator pour créer et animer des SVG.

Si vous êtes prêt à essayer de nouvelles choses, l'ajout de quelques animations ici et là peut grandement améliorer l'expérience utilisateur sur votre site Web. Cependant, l'ajout de vidéos ou de GIF serait bien pire pour les appareils mobiles que l'utilisation de SVG et CSS pour y parvenir.

Conclusion

Avec la possibilité de créer des graphiques vectoriels personnalisés directement dans le générateur Divi , vous disposez d'un moyen puissant de créer des illustrations et des icônes pour votre site sans aucune expertise en conception requise. La mise en œuvre de ces graphiques originaux peut donner à vos pages et publications une esthétique plus unique et personnalisée. Vous serez surpris de voir à quel point vos graphiques vectoriels DIY peuvent être professionnels!