Jonglant quotidiennement entre trois langues, Iris est connue pour son amour de la linguistique, des arts, du web design et de la typographie, ainsi que pour sa mine d'or de… En savoir plus sur
Iris
↬
Dans une nouvelle série d'articles, nous mettons en évidence certains des outils et techniques utiles pour les développeurs et les concepteurs. Les semaines dernières, nous avons abordé les outils d'audit CSS générateurs CSS et composants frontaux accessibles . Cette fois-ci, examinons les générateurs SVG – pour tout, des formes et arrière-plans aux visualiseurs de chemins SVG et aux générateurs SVG → JSX.
Table des matières
Vous trouverez ci-dessous une liste alphabétique de tous les générateurs SVG répertoriés ci-dessous. Passer la table des matières ou simplement faire défiler vers le bas pour les explorer un par un. De plus, abonnez-vous à notre newsletter pour ne pas manquer les prochaines.
Générateurs d'arrière-plan SVG
Un arrière-plan sympa peut attirer l'attention sur un article de blog, améliorer votre profil sur les réseaux sociaux ou simplement rafraîchir l'écran d'accueil de votre téléphone. Pour rendre la création d'arrière-plans abstraits et colorés un jeu d'enfant, le projet de Moe Amaya Cool Backgrounds réunit maintenant les quelques grands générateurs d'arrière-plan en un seul endroit. ]avec des formes superposées lisses. ( Grand aperçu )
Générateur de motifs de griffonnage génératif
Que pouvez-vous créer à partir de formes géométriques de base? Selon Sy Hong et Ye Joo Park, des mondes entiers! Les concepteurs se sont réunis pour créer Tabbied un petit outil qui génère des griffonnages géométriques colorés à partir de préréglages déjà prédéfinis. imagerie. ( Grand aperçu )
Tout d'abord, vous sélectionnez un préréglage; vous pouvez ensuite personnaliser les couleurs et choisir des paramètres tels que la fréquence d'un motif, la grille et les couleurs réelles, et enfin télécharger le dessin sous forme de fichier PNG. Besoin d'être plus avancé? Patternpad Paaatterns Repper et MagicPattern vous soutiennent également.
SVG Filters Color Matrix Mixer
Les filtres SVG (et les filtres CSS) sont souvent utilisés pour affiner les images bitmap via le flou ou la manipulation des couleurs. Cependant, ils peuvent faire bien plus que cela. Un filtre SVG est défini dans un élément et nous pouvons y utiliser une ou plusieurs primitives de filtre . Mais tout comme les filtres SVG sont très puissants il peut donc être difficile de trouver la bonne combinaison de ces filtres pour obtenir l'effet visuel souhaité.
SVG Color Matrix Mixer est un petit outil de Rik Schennink qui vous permet de générer visuellement des filtres matriciels couleur complexes pour tout composant de la page, puis utilisez le filtre SVG feColorMatrix comme valeur de la propriété CSS filter pour changer la couleur de vos éléments HTML. L'outil fournit également un extrait de code que le filtre doit appliquer immédiatement.
SVG Filters Builder un outil visuel pour à peu près tous les besoins de filtrage SVG ringard.
Besoin de quelque chose de bien plus sophistiqué? Eh bien, vous pouvez également utiliser JustCode SVG Filters pour les effets basiques et complexes et SVG Filters Builder un outil visuel pour à peu près tous les besoins de filtrage SVG ringards.
SVG Repeating Patterns Generators
Maintenant, il existe de nombreuses autres options pour les modèles SVG – par exemple pour répéter des images d'arrière-plan. HeroPatterns fournit des dizaines de motifs répétitifs qui fonctionneraient bien comme des images d'arrière-plan, des carreaux ou des textures. Vous pouvez également ajuster les couleurs de premier plan et d'arrière-plan.
Wowpatterns propose littéralement des milliers de motifs vectoriels thématiques. Disponible gratuitement. ( Grand aperçu )
Wowpatterns présente littéralement des milliers de motifs vectoriels libres, basés sur des formes, des formes organiques ainsi que des thèmes tels que les animaux, la plage, la ville et les gens, les festivals, les fleurs, etc.
PatternMonster comprend 180 motifs, et vous pouvez les filtrer par mode et couleur, et même rechercher des motifs spécifiques.
Plain Pattern vous permet de télécharger une forme SVG (ou d'utiliser l'une des formes existantes) et crée un motif répétitif qui peut être exporté au format SVG.
Patternify est un générateur de motifs CSS qui vous permet de définir un motif dans une grille 10 × 10 de prévisualiser le résultat et de télécharger PNG ou CSS. Si vous avez besoin d'un peu d'inspiration.
MagicPattern fournit une bibliothèque de motifs d'arrière-plan CSS purs comme ZigZag ou diagonaux.
Il y a des carrés, il y a des cercles, et apparemment, il y a aussi des carrés! Squircley de George Francis est un générateur de formes organiques pour tout type de visuel ou d’image d’arrière-plan. Vous choisissez la rotation, l'échelle, la «courbure» et la couleur de remplissage, et l'outil s'occupe du reste.
Le générateur exporte des SVG qu'ils peuvent être déposés directement dans votre code HTML / CSS, ou utilisés dans votre application de conception. Juste une petite application amusante à utiliser. Si ce n'est pas suffisant, vous pouvez également utiliser GetWaves pour générer des ondes SVG, ou Blobmaker pour générer des blobs sophistiqués.
Haikei ]un outil sophistiqué pour générer des actifs SVG de toute nature. ( Grand aperçu )
Si vous avez besoin d'un éditeur plus avancé pour générer des ressources SVG, des ondes superposées aux vagues empilées et aux scènes de blob, Haikei est un outil à part entière avec tous
Générateur de formes géométriques SVG
Pour nous démarquer de la foule d'une myriade de sites Web, nous pouvons définir une chose unique, la signature ]cela apporte un peu de personnalité à nos produits numériques. Peut-être est-ce un petit effet de pépin ou un gribouillage au crayon un jeu ou des formes inhabituelles . Ou, il pourrait s'agir d'un ensemble de lignes de flux géométriques apparemment aléatoires.
Flow Lines Generator produit des lignes géométriques aléatoires, et nous pouvons ajuster les formules et les distances entre les formes dessinées, puis exporter le résultat au format SVG. Peut-être que chaque page de votre site pourrait avoir une variante de ces lignes d'une manière ou d'une autre? Cela pourrait suffire pour se démarquer de la foule, principalement parce que personne d'autre n'a ce traitement visuel exact.
Générateur de diviseurs de sections SVG
Chaque fois que vous avez quelques sections sur une page, il n'est pas rare de les séparer avec un léger changement de couleur d'arrière-plan. Cependant, nous pouvons utiliser n'importe quel type de forme comme séparateur plus funky entre ces sections. ShapeDivider vous permet de générer des diviseurs de formes personnalisées et de les exporter au format SVG. Vous pouvez choisir l'un des 10 cadeaux, définir la couleur, ajuster la largeur et la hauteur et quelques autres paramètres et prévisualiser les résultats en temps réel sur des écrans étroits et grands.
Apparemment, les diviseurs de section nécessitent un peu d'attention ces jours-ci – au point qu'une énorme éclaboussure de générateurs d'ondes a été libérée au cours des deux derniers ans, méritant à lui seul une section distincte. SVGwave en fait partie. Vous pouvez ajuster les couleurs, les calques et quelques paramètres, choisir également une option générée aléatoirement et l'exporter au format SVG ou PNG. Getwaves est similaire, mais fournit un peu plus de granularité avec les formes.
SVGwave une solution sophistiquée pour une tâche pas si sophistiquée: générer des ondes. [19659015] Besoin de quelque chose d'un peu plus sophistiqué? Wavelry vous permet de choisir entre des ondes nettes, linéaires et lisses, et SVG Gradient Wave Generator va encore plus loin en permettant d'ajuster les amplitudes, la douceur, la saturation et les teintes. Enfin, Loading.io fournit non seulement une option pour générer des vagues, mais aussi les animer. Donc, si vous avez besoin de vagues dans vos conceptions, vous devriez être à peu près couvert.
Générateur d'ondes de dégradé SVG avec des options pour ajuster la douceur et les amplitudes.
Modèles de travail du bois SVG
Amelie Wattenberger a publié un petit outil Générateur Kumiko qui permet de générer des motifs dits kumiko, des modèles utilisés dans une ancienne technique de travail du bois japonaise, qui consiste à insérer de nombreux de minuscules morceaux dans un treillis. Une fois que vous avez téléchargé votre image, vous pouvez jouer avec un certain nombre de motifs prédéfinis et exporter un résultat SVG.
Maks Surguy a collectionné des générateurs SVG comme celui-ci également, donc si vous recherchez des générateurs similaires, ou peut-être quelque chose autour de la grille isomorphe, de la mosaïque, des graphiques de ligne de crête ou des routes de la ville, vous trouver un certain nombre de ces outils dans la collection de Maks.
SVG Warping Generator
Si vous souhaitez jouer avec le texte SVG en déformant, pliant ou déformant, le faire manuellement pourrait être assez long. Warp SVG vous permet d'ajuster le nombre de points d'ancrage pour les faire glisser pour le gauchissement, mais vous pouvez également ajuster le niveau de fluidité pour vous assurer que le résultat ne semble pas brisé. En maintenant Espace vous pouvez ajuster le texte autour du canevas. Le code complet est également disponible sur GitHub .
Warp SVG vous permet de plier, déformer et déformer le texte SVG, si nécessaire.
SVG Visualiseurs de chemin
Pouvez-vous lire et visualiser SVG? Probablement pas. Mais si vous devez corriger quelque chose rapidement sans avoir à utiliser un éditeur SVG, ou ajuster la couleur d'une forme, ou supprimer complètement une forme, il peut être très judicieux de comprendre comment une illustration SVG est réellement dessinée à l'écran. C’est là que SVG Path Visualizer peut vous aider. Vous pouvez entrer des données de chemin SVG (c'est la chaîne à l'intérieur de l'attribut d ) et l'outil explique la magie qui se passe dans les coulisses dans un langage compréhensible par l'homme.
SVG Path Visualizer explique exactement comment une illustration SVG est dessinée par le navigateur.
Une fois que vous avez compris comment les chemins SVG sont dessinés, vous pouvez utiliser un SVG Path Editor pour ajuster légèrement les chemins. Alternativement, si vous avez besoin d'ajuster les chemins SVG par programme, vous pouvez utiliser svgpathtools une collection d'outils pour manipuler et analyser les objets SVG Path et les courbes de Bézier.
SVG Cropping Tools
Et si vous ' J'ai reçu quelques fichiers SVG d'un illustrateur ou d'un tiers, mais je me rends compte qu'il contient un peu d'espace vide autour de l'illustration, ce qui crée un espace vide inutile autour de l'illustration une fois placé sur une page ? Ou peut-être que les images sont toutes de tailles légèrement différentes et que vous devez les normaliser? Bien sûr, il existe un outil juste pour cela.
Steve Dennett SVG Crop vous permet de supprimer automatiquement les espaces . Vous téléchargez un fichier SVG et l'outil trouve les dimensions du contenu SVG et manipule la viewBox du SVG en conséquence. Vous pouvez télécharger plusieurs SVG à la fois, puis copier le SVG dans un presse-papiers ou télécharger des SVG rognés sous forme de fichier .zip. Parfois, nous avons vu d'étranges artefacts autour des couleurs lorsque plusieurs images ont été téléchargées, mais même dans ce cas, vous saurez exactement comment régler la zone de visualisation pour supprimer l'espace vide autour de l'image.
] Lorsque vous avez besoin d'ajuster le recadrage manuellement: SVG Cropper .
si vous avez besoin d'un contrôle raffiné du recadrage avec des options supplémentaires pour le style de recadrage – cercle, polygone , forme personnalisée, pour n'en nommer que quelques-uns – le Cropper SVG de Maks Surguy est une excellente alternative. Vous pouvez faire glisser les poignées du canevas pour définir juste la bonne boîte de visualisation mais aussi opter pour les chemins fermés uniquement, ainsi que pour nettoyer les chemins, les alléger et les simplifier.
Générateurs de polygones SVG
] Par rapport aux vagues, les polygones sont légèrement plus faciles à construire – mais vous n'avez pas non plus à les construire vous-même. SVG Polygon Generator vous permet de définir le nombre de côtés, le rayon, l'espacement et il génère un élément SVG pour vous.
Vous avez donc collecté beaucoup de données, maintenant confortablement installé dans des pages et des pages de feuilles de calcul. Pour donner un sens aux données et les explorer plus confortablement, il est probablement judicieux de les transformer en une sorte de visualisation . C’est exactement là que les RAWgraphs peuvent nous aider. Vous insérez les données, choisissez l'un des modèles visuels disponibles – sunburst, dendrogramme circulaire ou coque convexe multiple, par exemple, ou créez le vôtre – réglez votre carte et voilà, le SVG sera généré pour vous.
] Rawgraphs.io se charge de visualiser les feuilles de calcul avec une série de préréglages prédéfinis.
L'équipe RAWGraphs propose également une série de didacticiels vidéo sur l'utilisation de l'outil, un utilitaire de ligne de commande et une galerie des visualisations créées avec RAWGraphs. Sous le capot, l'outil utilise D3.js qui à lui seul est une remarquable bibliothèque JavaScript pour manipuler des documents basés sur des données.
JPG / PNG → Transformation SVG
Et si vous avez un image bitmap, et vous aimeriez la transformer en une contrepartie vectorielle peut-être pour l'animer légèrement? Il est impossible de «convertir» l’une en une autre, mais nous pouvons les retracer pour produire une alternative vectorielle. Heureusement, les outils qui vous permettent de faire exactement cela ne manquent pas – et chaque éditeur vectoriel aura une sorte de fonctionnalité comme celle-là. Par défaut, beaucoup de ces outils utiliseront Potrace ou une bibliothèque similaire.
SVGurt un outil de transformation d'image open source vers SVG avec beaucoup de boutons
PicSVG est l'un des nombreux outils en ligne disponibles. Vous pouvez télécharger une image d'une taille maximale de 4 Mo et l'outil essaiera de tracer l'image pour vous. SVGurt fournit en outre de nombreux boutons et commandes pour régler le SVG en supprimant un peu de bruit, en remplissant les espaces et en affinant les traits. Il est également disponible en tant qu'outil CLI .
Vous pouvez même aller plus loin avec espaces réservés SVG dynamiques en générant petits espaces réservés SVG en les animant et passer d'eux à une image réelle avec une transition CSS en fondu. Également disponible en tant que composant d'image gatsby . Un peu trop de frais généraux? Eh bien, Blurhash est également une excellente alternative.
SVG → Transformation JSX
Pour utiliser les SVG dans React, nous devons remplacer les attributs SVG par leurs équivalents valides JSX. De toute évidence, il existe quelques outils qui prennent en charge cette transformation pour vous. SVG to JSX est l'un des outils en ligne simples qui est disponible hors ligne et peut être installé en tant que PWA à partir de la barre d'URL. De plus, SVG2JSX vous permet de choisir entre la saveur fonctionnelle / de classe de votre composant, des guillemets simples ou doubles et quelques autres paramètres.
SVG2JSX transforme les SVG en JSX -équivalents valides.
SVGR fournit des saveurs supplémentaires pour React Native et TypeScript permet de remplacer les valeurs d'attributs et d'ajouter des accessoires SVG, de fournir une configuration plus jolie et d'optimiser SVG le long du façon. Bien sûr, il est également disponible à partir de la ligne de commande pour Node Webpack et sous VS Code Extension . Et juste au cas où vous auriez besoin d'un didacticiel complet, Comment utiliser les SVG dans React fournit tous les détails dans un seul article.
SVG Favicon Generator
La création d'un favicon simple à base de lettres nécessite généralement plus de temps qu'il ne le devrait. Hossein Sham le sait par expérience, alors pour faciliter sa vie – et la vôtre aussi – il a construit un Favicon Maker gratuit qui permet de créer un favicon en quelques secondes.
Le Favicon Maker vous aide à créer des favicons à base de lettres et d'emojis, au format SVG ou PNG, selon vos préférences. Vous pouvez sélectionner une lettre ou un emoji, une police (les polices Google sont prises en charge), la taille de la police, une variante en gras ou en italique, ainsi que la couleur et la forme de l'arrière-plan. Une fois que vous êtes satisfait du résultat, vous pouvez soit copier le code directement dans votre projet, soit télécharger le fichier SVG ou PNG. Besoin d'un peu plus de conseils? Comment Favicon en 2021 vous couvrira.
Générateur de sprites SVG
À l'époque de HTTP / 2 et de HTTP / 3 imminent, les conversations sur les sprites CSS peuvent sembler un peu dépassées, pour dire le moins. Cependant, si vous avez littéralement des dizaines d’icônes dans votre interface, il peut être essentiel de les charger rapidement et de les charger en même temps – et c’est à ce moment que de bons vieux sprites CSS pourraient encore être utiles. Probablement pas pour les PNG, mais pour les SVG – puis utilisez à pour éviter que de nombreux SVG ne bloquent votre balisage .
svg spreact aussi disponible comme chargeur pour Webpack et module npm autonome.
Avec svg spreact vous pouvez déposer des fichiers SVG pour créer un sprite, et l'outil va ranger le SVG, l'optimiser, produire un sprite avec le balisage et une démo sur CodePen. Vous pouvez également utiliser un chargeur de sprite SVG avec le module Webpack ou svg-sprite npm .
Générateur de transitions d'icônes SVG
Vous avez donc deux icônes SVG et voulez créer une transition entre eux ? Alors le Icon Transition Generator est fait pour vous. Vous téléchargez vos icônes SVG et l'outil basé sur le navigateur exporte un seul fichier SVG contenant le code JavaScript de l'animation. Pour ajuster la transition aux besoins de votre projet, vous pouvez sélectionner le type d'interaction (survoler ou cliquer) et le type d'animation (échelle ou rotation).
SVG Animation Tools
La beauté du SVG réside dans sa nature: avec du texte brut devant vous, vous pouvez animer, transformer et transformer des chemins ainsi que des animations composites en travaillant directement avec le code. Cependant, nous n'avons pas besoin d'écrire chaque animation à partir de zéro. Vivus Instant est un outil simple qui vous permet d'animer des traits SVG (merci pour le conseil, Chris Mickens ).
SVGArtista est un outil gratuit de Sergej Skrjanec et Ana Travas qui comprend déjà quelques animations de base de remplissage et de contour. Vous pouvez définir un assouplissement d'animation et une direction, une durée et des délais d'animation. Le code généré peut être réduit et il utilise également le préfixeur automatique par défaut.
SVGator un outil sophistiqué avec de nombreuses fonctionnalités et préréglages.
SVGator est un éditeur dédié aux animations SVG avec de nombreux panneaux dédiés pour tout, de l'inclinaison au chemin de trait et aux filtres, mais dans une version gratuite, la chronologie est limitée à 10 secondes, et seules les fonctions d'accélération sont disponibles.
Si vous 'aimerait jouer directement avec le code, GSAP est un outil fantastique pour animer avec JavaScript – que ce soit SVG, propriétés CSS, React, Canvas ou autre. De plus, vous pouvez également consulter SVG.js qui est léger et dédié spécifiquement à manipuler et animer SVG . Et si vous recherchez la qualité d'animations After Effect, Lottie vaut vraiment le coup d'œil – à la fois pour le Web et pour iOS, Android et React Native.
Éditeurs SVG en ligne simples [19659003] Si vous avez juste besoin de corriger quelque chose dans un fichier SVG, mais que vous ne voulez pas utiliser de grandes applications, Boxy SVG ou Editor Method peut être exactement ce que vous recherchez. Ce sont des applications Web avec des fonctionnalités d'édition SVG de base et un éditeur visuel.
L'un des nombreux, mais fait bien son travail: Boxy SVG un éditeur SVG en ligne gratuit. [19659126] Vecta est légèrement plus avancé, avec des outils de collaboration pour les équipes, et prend également en charge les diagrammes, les dessins Autocad, les pochoirs Vision et les dessins.
MacSVG est une application macOS open source légère pour l'édition et les animations SVG
SVG-Edit est un éditeur SVG à part entière pour l'édition SVG sophistiquée.
SVG Compression
Par défaut, les SVG exportés peuvent contenir de nombreuses méta-informations et des détails inutiles, qu'il s'agisse d'éléments vides, commentaires, chemins cachés ou duplications. Le SVGOMG de Jake Archibald nettoie définitivement les fichiers SVG . Vous pouvez spécifier le niveau de précision et choisir la fonction que vous souhaitez supprimer des SVG (il y en a beaucoup) et celle que vous souhaitez conserver.
Si vous devez utiliser l'outil à partir de la ligne de commande, SVGO est un outil Node.js qui peut être configuré et utilisé dans le cadre de votre processus de construction, avec toutes les fonctionnalités disponibles en tant que plugin par défaut. Il existe également d'autres manières d'utiliser SVGO par ex. comme une action GitHub webpack-loader VS Code Plugin Sketch plugin ou Figma plugin . [19659135] Gestionnaire des ressources SVG
Vous avez donc beaucoup de SVG dispersés sur toute votre machine. Comment les suivez-vous? Comment savez-vous où se trouve et comment en trouver un facilement? SVGX est un gestionnaire de ressources SVG de bureau gratuit qui vous permet de conserver tous les SVG au même endroit. Vous pouvez ajouter des signets, rechercher et prévisualiser les icônes SVG, modifier en direct le balisage SVG, prévisualiser les icônes en mode sombre et copier / coller le balisage et le CSS en un seul clic. Par défaut, il utilise également SVGO pour les optimisations SVG. Disponible pour Mac et Windows.
Si vous avez besoin d'une alternative, Iconset est similaire , mais sans la partie de code. Vous pouvez faire glisser les icônes de Iconset directement dans Sketch, Figma, Adobe XD et à peu près tout le reste, sans installation de plugin ou d'extension. De plus, vous pouvez également synchroniser les icônes entre les appareils via Dropbox ou des services similaires, et publier et partager vos jeux d'icônes. Disponible pour Mac et Windows.
Et bien sûr, si vous avez besoin des bonnes icônes, vous les trouverez probablement sur SVGRepo Iconfinder et Vecteezy . Tous ces sites fournissent littéralement des milliers et des milliers d'icônes, gratuites et commerciales, pour à peu près tous les besoins que vous pourriez avoir.
Générateur d'extraits de code
Ce n'est pas vraiment un outil pour tout ce qui concerne SVG, mais assez pratique quand vous le souhaitez. pour partager un extrait de code – et assurez-vous qu'il a l'air… beau. Ray.so s'occupe de la plupart des tâches. Vous pouvez choisir entre quelques préréglages, le mode sombre ou le mode clair, le remplissage et la langue (qui peut également être détectée automatiquement). Le résultat est un PNG haute résolution que vous pouvez insérer directement dans le canal Slack.
Ray.so génère des images haute résolution pour vos extraits de code.
Conclusion
Il existe littéralement des centaines de ressources, et nous espérons que certaines de celles énumérées ici vous seront utiles dans votre travail quotidien – et surtout vous aideront à éviter certaines tâches routinières chronophages. Bonne génération!
