20 outils SVG utiles pour de meilleurs graphiques
SVG gagne en popularité dans la conception Web ces jours-ci et vous pouvez utiliser des outils tels que Illustrator ou Inkscape pour créer des graphiques SVG. Mais en ce qui concerne la conception Web, nous devons toujours optimiser pour des résultats plus légers..
Ici le 20 outils que vous pouvez utiliser pour travailler avec SVG rapidement et efficacement. Nous avons principalement des outils en ligne, qui peuvent aider à l'optimisation, à la conversion, à la création de modèles, etc..
Système de coordonnées SVG interactif
Lorsque vous travaillez avec SVG, vous ne pouvez pas laisser ses coordonnées. C'est un excellent outil interactif de Sara Souiden, pour vous aider Apprenez comment les coordonnées SVG fonctionnent. En utilisant le viewBox et Conserver les proportions sur SVG, guidé par des lignes orange et violettes et une règle pratique, vous pouvez jouer tout en apprenant le fonctionnement des coordonnées SVG.
b64
b64 est un outil simple pour optimiser les images puis les transformer au format base64. Vous pouvez supprimer vos images SVG (d'autres formats tels que JPG et PNG fonctionnent également), puis saisir le CSS avec l'image d'arrière-plan base64 comme résultat..
SVGO
Les fichiers SVG exportés peuvent contenir informations inutiles qui peuvent être supprimés sans affecter le résultat du rendu. Si tu veux supprimer les métadonnées de l'éditeur, les commentaires ou les éléments cachés, vous pouvez utiliser SVGO.
Vous pouvez installer SVGO via npm, $ [sudo] npm installer -g svgo ou utilisez la version de l'interface graphique qui offre un glisser-déposer pour traiter votre optimisation SVG.
SVG OMG
SVG OMG tourne la ligne de commande de SVGO (l’outil précédent) dans un Version graphique que plus intuitif et facile à utiliser. Juste basculer les boutons activer ou désactiver chaque fonction. En fin de compte, vous pouvez récupérer le résultat sous forme de fichier image et de code..
SVG maintenant
Lorsque vous travaillez sur Illustrator, le fichier SVG exporté contient des informations non nécessaires. Avec cet outil vous allez obtenir la version optimisée de votre fichier SVG exporté directement depuis votre espace de travail Illustrator. Cet outil ajoute un panneau avec quelques options pour optimiser SVG. Vous pouvez obtenir SVG maintenant à partir de la page des add-ons de Creative Cloud..
Convertisseur SVG en PNG
Vouloir exporter des fichiers SVG au format PNG? Sans ouvrir des applications comme Illustrator pour le faire? Utilisez cet outil de conversion SVG en PNG pour obtenir des sorties d’images au format PNG ainsi que l’URI de données PNG Base64 si vous en avez besoin..
SVG Circus
Si vous pensez que les animations du chargeur sont cool, vous pouvez maintenant le créer facilement en utilisant SVG avec SVG Circus. Les outils vous permettent de faire votre propre chargeur, spinner ou quelque chose de similaire en utilisant une animation en boucle. Définissez le 'Acteur', la position, la taille, la couleur et autres du panneau, puis exportez pour obtenir les résultats..
SVG Sprite
SVG Sprite est un module Node.js, qui optimise un tas de fichiers SVG, et les cuire au four en types sprite SVG y compris les sprites CSS traditionnels pour les images d’arrière-plan et / ou de premier plan, les piles SVG, etc..
Quasi
Avec quasi vous pouvez générer des images Quasicrystal comme ce que vous voyez ci-dessous. Ce générateur est expérimental, mais les résultats sont vraiment cool. Vous pouvez jouer en changeant la valeur des options, puis télécharger les résultats avec le bouton 'Enregistrer SVG'.
Modèle simple
Créer des patterns avec SVG n'a jamais été aussi facile et amusant. Téléchargez votre image, réduisez l’échelle ou modifiez l’espacement, faites pivoter et recolorez jusqu’à obtenir un beau motif. Vous pouvez prévisualiser le résultat avant de le télécharger.
Trianglify Generator
Créez de beaux motifs géométriques SVG avec Trianglify Generator. Vous pouvez définir le caractère aléatoire de la couleur / variante, la taille de la granularité, et choisir une palette de couleurs avec laquelle travailler. Cet outil est une version graphique de Trianglify.
Gradient SVG
Vous savez que vous pouvez créer des dégradés avec CSS, mais saviez-vous que vous pouvez faire la même chose avec SVG? Le moyen le plus simple de générer un dégradé sur SVG est en utilisant cet outil. Entrez simplement start et stop color pour obtenir le code correspondant au résultat généré. Un repli sur CSS est également inclus.
Exporter PSD en SVG
Si vous utilisez Photoshop comme éditeur d’images pour votre travail, vous devrez parfois convertir votre conception de l'espace de travail Photoshop en SVG, qui est un format non pris en charge dans Photoshop. Téléchargez le script sur cet outil, puis copiez-le sur le Adobe Photoshop / presets / scripts dossier.
Renommez un nom de couche vectorielle portant l'extension SVG (par exemple, layer1 devient layer1.svg) et vous pouvez maintenant exécuter le script à partir de Fichier> Scripts> PS à SVG.
Filtres SVG
Savez-vous qu'avec SVG, vous pouvez ajouter des effets aux images, notamment avec les options Teinte, Saturation, Flou, Surimpression linéaire, etc. Voici un outil qui visualise ces effets, puis vous donne un extrait pour le rendre facile à intégrer l'effet dans votre projet.
SVG Morpheous
SVG Morpheous est une bibliothèque JavaScript qui vous permet de transformer une icône SVG d'une forme à une autre. Vous pouvez définir l'effet d'accélération, la durée des animations de transition, ainsi que le sens de rotation.
Générateur de chemin de clip
SVG vous permet de cliquer sur le clip d’image avec Forme. Ceci est assez facile si la forme est sous la forme d'un carré ou d'un cercle. Mais quoi si la forme est une avec beaucoup de points ou est une forme polygonale? C'est là que vous avez besoin de cet outil Générateur de chemins de clips.
Chartist.js
Chartist.js est une bibliothèque pour créer des graphiques réactifs hautement personnalisables. Il utilise SVG pour afficher les graphiques, qui peuvent également être animés à l'aide de SMIL. Avec cette bibliothèque, vous pouvez créer un graphique en courbes, un graphique à secteurs, un graphique à barres et d'autres types de graphiques, et même leur ajouter une animation..
Générateur de tirets SVG
C’est un outil simple pour générer des lignes en pointillés en utilisant SVG accident vasculaire cérébral. Choisissez d’abord un type de tiret dans la liste, puis personnalisez-le en termes de largeur, hauteur, rotation ou couleur. Ensuite, vous pouvez saisir le code HTML et CSS pour appliquer cette ligne de tiret à votre projet..
Méthode Draw: Un éditeur SVG simple
Method Draw est un éditeur SVG basé sur le Web, avec un interface intuitive fournie avec des outils des deux côtés de la toile. Vous pouvez dessiner des lignes, des formes, saisir du texte ou utiliser des formes intégrées, puis modifier les propriétés des objets dessinés. Exportez l'image au format SVG (existe également au format SVG base64) ou enregistrez directement au format PNG.
Exporter Flash en SVG animé
Bien que ce n’est plus très populaire, il est possible que certains d’entre vous aient du mal à abandonner Flash. Si oui, vous pouvez Transformez votre animation flash en SVG pour qu'elle continue à fonctionner de manière compatible avec les nouvelles technologies. Cet outil constitue une extension de l’application Flash et peut fonctionner sur CS5, CS6 et CC..
Vous pouvez exporter en SVG en ce qui concerne les formes, les symboles bitmap, les tweens Motion classiques, les tweens Shape (pour d’autres, le succès est discutable).
