Comment utiliser SVG dans WordPress

Regardez son fonctionnement: https:\/\/codepen.io\/iamjoshellis\/pen\/KVdQqm En termes de performance, les images SVG ont tendance à être beaucoup plus petites que n’importe quelle image correspondante. Par conséquent, vous pouvez généralement voir des illustrations, des logos et des icônes construits sous forme de graphiques vectoriels. Cela a également conduit au développement de nombreuses polices d’icônes, dont nous parlerons brièvement dans les articles suivants.
En bref, SVG offre flexibilité, une petite taille d’image et une base solide pour améliorer les performances d’image des sites WordPress. Comment créer une image SVG? Les images SVG peuvent être créées de deux façons: en écrivant du Code et en utilisant un logiciel de conception graphique moderne. La première approche consiste à écrire des scripts XML, une méthode traditionnelle de création de fichiers SVG, mais il peut s’agir d’une technique lente et inefficace. Un simple ensemble de blocs peut ressembler à ceci dans un format XML: Comme vous pouvez le voir, écrire à plusieurs reprises pour des graphiques complexes équivaut à vous tirer dans le pied.
Une autre façon est d’utiliser le logiciel, qui est le moyen le plus rapide et le plus efficace de créer des graphiques SVG. Avec un logiciel vectoriel, vous pouvez vous concentrer sur la création d’un dessin et l’exportation vers un fichier SVG prêt à l’emploi. Le logiciel de conception de diagrammes vectoriels est un programme d’édition vectorielle professionnel bien connu, mais il en va de même pour les logiciels tels que Adobe illustrator, sketch, Figma et Inkscape. Quel que soit le logiciel que vous décidez d’utiliser, la seule chose qui compte vraiment est le plan du type de dessin que vous créez. La fonction d’exportation fonctionne de la même façon dans tous les programmes modernes.
Il va sans dire que SVG a toujours la même structure XML. Par conséquent, vous pouvez soit utiliser l’image SVG comme fichier de texte, soit l’insérer en ligne. WordPress prend – il en charge SVG? Aussi étrange que cela puisse paraître, une plateforme avec une portée wordpress ne pense pas vraiment
Format de fichier RTA SVG. Mais c’est juste à cause de graves problèmes de sécurité. Voir, contrairement au type de fichier PNG \/ JPG \/ GIF, SVG n’est pas une image rastérisée, mais un vecteur. Par conséquent, SVG risque de profiter de JavaScript et WordPress a choisi de ne pas autoriser SVG à apparaître dans WordPress par défaut. Cela a un sens à tous égards. Bien que les auteurs de WordPress parlent de SVG depuis de nombreuses années, il y a trop d’angles à aborder pour prévenir les problèmes de sécurité à grande échelle. Par conséquent, la seule façon de contourner ce problème est d’activer SVG comme format de fichier via un plug – in ou en utilisant des fonctions de sujet. Comment activer les images SVG sur les sites WordPress? Avant d’entrer dans la section plugins, vous pouvez en fait activer SVG dans WordPress via un fichier de fonctions. Php dans le répertoire des sujets. C’est certainement la méthode la plus rapide, mais aussi la moins sûre, puisque vous activez SVG dans son format original.
\/ \/ \/ enable the SVG file format featuradd _ file types to uploads ($$file types) {$new file types = array (); $New filetypes [‘SVG] =’ image \/ SVG + XML ‘; $$file types = array format ($$file types, $$file types) {$new file types = array (); $New filetypes [‘ SVG] = ‘image \/ SVG + XML’; $$file types = array Merge ($$File file types, $$new type, $$new file types) [‘SVG] =’ image \/ SVG + XML ‘; $$File SVG] =’ image \/ SVG + XML ‘; $$File file + XML’; file _ types); renvoie $file types;} Ajouter _ action (‘upload mimes’,’ add file types to uploads’); Une autre option plus sûre est d’utiliser un plug – in. Voici les trois plugins les plus importants pour activer SVG dans WordPress. Support SVG L’ajout du support SVG est la moitié du succès, et vous voudrez peut – être ajouter des styles personnalisés, des effets d’animation et activer les restrictions. Mais pour ce faire, vous avez besoin de soutien.
Avec le support SVG: Vous pouvez commencer à ajouter des fichiers SVG aux messages et aux pages en utilisant des balises d’image traditionnelles. Par exemple, vous pouvez ajouter une nouvelle classe CSS à une image: style SVG, qui récupère l’image SVG téléchargée et affiche son contenu dans une vue en ligne. Principales caractéristiques
Le ncipali du plugin est: activer la gestion de fichiers SVG dans la médiathèque WordPress. Convertit l’image SVG téléchargée en Code inline. Prend en charge les widgets d’image pour ajouter des balises alt et capture à toutes les images SVG. Dessinez une seule image SVG en utilisant un CSS personnalisé. Utilisez CSS3 et Javascript pour l’animation. Page de configuration détaillée dans le tableau de bord du plug – in. Appliquer l’accès fondé sur les droits. E.g. Limiter le téléchargement sur un compte avec les privilèges d’administrateur seulement. Notez que malgré ce que ce plug – in offre, le risque que SVG soit utilisé est réel. N’activez pas la gestion de fichiers SVG pour les utilisateurs non fiables. Par conséquent, idéalement, vous ne pouvez activer cette fonctionnalité que pour les utilisateurs au niveau de l’Administrateur.
Encore une fois, toute personne ayant la permission de télécharger peut télécharger de nouveaux fichiers SVG, mais comme les fichiers SVG sont basés sur XML, ils peuvent être utilisés par injection malveillante, etc. Sécurité SVG Safe SVG est un plug – in qui vous rassure sur les risques potentiels pour la sécurité. Le plug – in a été créé spécifiquement pour éliminer tout nouveau téléchargement SVG et prévenir les intentions malveillantes. De plus, Secure SVG peut voir les types de fichiers SVG téléchargés via la médiathèque. Avec 50 000 utilisateurs actifs, vous pouvez compter sur un SVG sécurisé pour fournir des performances de sécurité de premier ordre. Il convient de noter que ce plug – in est disponible en deux versions différentes; Gratuit et payant.
La version gratuite inclut la possibilité de désinfecter les nouveaux téléchargements et ajoute un support pour la visualisation SVG dans la médiathèque. Si vous choisissez la version pro, vous obtiendrez d’autres fonctionnalités, telles que l’optimisation svgo. Cette technique d’optimisation réduira encore
Téléchargement SVG. De plus, avec pro, vous pouvez choisir qui peut ou non télécharger de nouveaux fichiers SVG. Par conséquent, vous ne pouvez restreindre l’accès qu’à des utilisateurs spécifiques. Enfin, en achetant des plug – ins, vous obtenez un support avancé: obtenez des réponses aux questions lorsque vous en avez le plus besoin. Ajouter un support SVG complet Pour les deux premiers plug – ins que nous avons listés, vous devriez obtenir des résultats raisonnables. Cependant, si vous aimez l’idée d’ajouter SVG à votre site en utilisant un code court, jetez un coup d’oeil à ce plug – in. Le plugin ajoute quelques fonctionnalités SVG à WordPress et utilise la technologie SVG basée sur les idées d’alexey ten. Cette façon d’inclure des images SVG en HTML semble être la meilleure combinaison de performance et de compatibilité à l’heure actuelle. L’ajout d’un support SVG complet prend en charge le chargement SVG et la génération de code court. De plus, vous pouvez personnaliser le style de chaque élément SVG en utilisant Custom CSS. Enfin et surtout, vous pouvez spécifier des photos de sauvegarde pour un ou tous les SVG téléchargés. Quels autres plugins SVG WordPress peuvent être utiles? En plus d’ajouter le support SVG à votre site WordPress, quels autres plugins sont utiles à votre site? Tout le monde et sa grand – mère savent qu’il y a un avantage considérable dans la performance. Que ce soit en termes de taille de fichier ou de capacité du navigateur à rendre des graphiques vectoriels en ligne. Icône SVG WP Les icônes sont des éléments visuels qui apportent souvent une nouvelle vie au design. Fait intéressant, ce plugin est conçu pour des besoins personnels. L’auteur voulait commencer à implémenter plusieurs fichiers SVG dans son projet, mais n’a pas trouvé de solution. Il a donc pris le temps et l’énergie de créer l’icône WP SVG. Ce plugin est très facile à utiliser et vous pouvez remplacer les icônes existantes sur le site en quelques clics. Plus important encore, vous n’avez pas besoin de recréer toutes les images pour l’affichage
Y rétine, l’icône se Redimensionne automatiquement tant que la largeur maximale est définie. Comme l’auteur, ce plug – in est remarquable pour une variété de travaux de développement, multi – sites et clients. S’il n’y a pas de restrictions, vous n’avez pas à vous soucier de la compatibilité des sujets ou de questions similaires. Il semble également y avoir une version avancée du produit qui a la capacité de charger des icônes personnalisées. Par conséquent, vous n’êtes pas limité aux icônes intégrées. Menu social SVG Il s’agit d’un plug – in utilisé comme Widget pour afficher des icônes de médias sociaux via des images SVG. Pour que ce plugin fonctionne, il vous suffit de créer un nouveau menu WordPress avec des liens vers votre profil de médias sociaux. Ensuite, sélectionnez l’emplacement du menu social SVG personnalisé et enregistrez le nouveau menu. Ensuite, vous pouvez utiliser le Widget SVG social menu dans la barre latérale ou d’autres zones pour préparer le Widget blog. Les icônes actuellement disponibles s’appliquent aux sites et plateformes suivants: plus. Google, WordPress, Facebook, Twitter, dribble, Pinterest, github, Tumblr, YouTube, Flickr, Vimeo, Instagram, LinkedIn, Xing \/ feed, mailto. LOGO SVG et effets de texte Slate est un plug – in qui prend en charge l’ajout de code court pour les effets SVG personnalisés. Vous pouvez utiliser ce plug – in pour promouvoir une image de marque forte, mettre en évidence des widgets CTA ou mettre en évidence des éléments à votre façon. L’utilisation intelligente du support de code raccourci signifie que vous pouvez modifier et personnaliser les effets à tout moment. Par exemple, vous pouvez mélanger différentes couleurs, polices, filtres et utiliser de nombreux modèles d’écoutille qui apparaissent comme des effets de conception attrayants. Slate offre la même liberté de création que le logiciel d’édition vectorielle, mais n’a pas besoin d’utiliser de logiciel! Quelles sont donc les principales caractéristiques?
Texte Générer du Code court pour reproduire l’effet d’un effet de texte convaincant compatible avec le référencement. Comme vous pouvez le voir dans l’instantané ci – dessus. Les caractères. Vous ne savez pas où trouver des polices personnalisées? Pas de problème parce que Slate a une énorme bibliothèque de polices Google pré – installée. Mode de remplissage. Ces lettres sont hachurées par votre choix. Le modèle d’écoutille a des paramètres. Contrôlez les différentes tailles, distances et couleurs pour créer des changements uniques ou pour adapter les paramètres par défaut à vous. Et plus encore! Ce plugin est une centrale électrique qui permet d’obtenir un style de texte et de logo très précis. Il en va de même avec SVG. Où puis – je trouver des graphiques SVG? Que pouvez – vous faire si vous n’avez pas d’expérience antérieure dans la conception de graphiques vectoriels? Heureusement, trouver SVG maintenant est simple et simple. Au mieux, vous n’avez qu’à recontacter l’auteur original qui a fait le dessin. De nombreuses plateformes offrent des images gratuites sans exigences de propriété. Voici quelques bons sites Web qui offrent du contenu SVG gratuit: fontawesome – fontawesome la meilleure bibliothèque d’icônes de police au monde. Le projet est puissant depuis de nombreuses années, avec un soutien profond non seulement pour les navigateurs, mais aussi pour des cadres spécifiques et des logiciels de conception. Ce paquet de polices orienté vers l’accessibilité est un tueur absolu et est très facile à utiliser! En fait, je suis sûr qu’il y a une douzaine de plugins WordPress qui supportent de grandes polices! Vectezy – vectezy est probablement la plus grande plateforme graphique vectorielle sur terre. Soutenu par une conception personnalisée, une contribution communautaire et des données Web: vecteezy a des vecteurs disponibles dans n’importe quelle catégorie, forme ou forme. Et il est facile de télécharger des fichiers. Vous n’avez qu’à vous connecter à