Créez des animations et des effets SVG avec ces sites Web gratuits
Pour commencer, nous allons vous dire que le type de fichier SVG ou Scalable Vector Graphics est un format axé sur les graphiques vectoriels XML qui peuvent en même temps être convertis en une animation , comme nous le verrons dans ces mêmes lignes.
En même temps on dira qu’il existe plusieurs méthodes pour animer un SVG , soit via des scripts pour ajouter des animations, avec JavaScript , etc. C’est pourquoi, dans ces lignes, nous allons vous montrer une série d’ applications Web gratuites qui seront d’une grande aide pour ce type de tâche, c’est-à-dire ajouter des animations et des effets à des fichiers au format SVG , le tout pour votre prochaine décharge .
Nous dirons que la plupart de ces applications Web proposent des boutons et des contrôles pour ajouter des animations, laissant de côté toute la partie codage , ainsi que rapidement et facilement.
Animations pour vos fichiers SVG avec ces applications Web gratuites
aniGen
Il s’agit d’un éditeur d’animation SVG basé sur un navigateur compatible avec Google Chrome et Mozilla Firefox qui nécessite au départ l’activation de JavaScript. Ainsi, si vous êtes un utilisateur avec certaines connaissances en animation SVG, c’est une solution parfaite en raison des fonctionnalités qu’elle présente. De là, nous avons la possibilité d’accéder à l’ arborescence XML du fichier et de sélectionner les éléments que nous voulons éditer et animer , afin de pouvoir effectuer des tâches telles que la rotation, l’échelle, l’inclinaison, etc.
En même temps, nous pouvons animer certains cadres, ajouter du remplissage et des traits, ou établir des nœuds en créant des calques . Dans le même temps, pour chaque élément, nous pouvons entrer la durée de l’animation et définir la boucle d’animation pour enfin exporter le résultat vers un fichier SVG local .
Vivus instantané
Dans ce cas, nous allons parler de Vivus Instant , une version en ligne du populaire animateur SVG Vivus qui, grâce à l’utilisation de JavaScript, nous permet d’animer des fichiers SVG en leur donnant l’apparence d’être dessinés. Ainsi, Vivus Instant utilise des animations CSS pour animer ces fichiers et cela devient particulièrement utile lorsque le SVG contient des propriétés de trait .
Pour tout cela, il suffit que nous chargions le fichier par glisser-déposer sur l’interface pour que l’ animation de dessin soit automatiquement ajoutée le long des chemins inclus dans le fichier. Ensuite, nous pouvons le télécharger tel quel ou le personnaliser manuellement avec différents types d’animation, de retards , de minutage, de boucles , etc.
SVGCirque
La prochaine application Web dont nous allons parler est SVGCirsus , qui, contrairement à d’autres outils similaires, ne prend pas en charge l’édition SVG, mais nous permet de créer des animations en boucle. Il contient une série d’ éléments que nous pouvons personnaliser pour créer des animations en boucle . Bien sûr, nous pouvons soit démarrer le projet à partir de zéro, soit sélectionner une configuration prédéfinie et la personnaliser à notre guise, puis l’exporter sous forme de fichier SVG vers le PC.
CodePen
Et pour finir, nous parlerons de CodePen , un programme en ligne gratuit avec lequel nous pouvons éditer manuellement les chemins SVG et utiliser CSS et JavaScript pour ajouter des animations au fichier. En même temps, nous pouvons ouvrir plusieurs environnements de codage, par exemple un éditeur HTML , pour y coller le code XML SVG et personnaliser le fichier. Une fois le projet d’animation terminé, l’application nous offre la possibilité d’ intégrer CSS et JavaScript dans le code XML SVG et de le sauvegarder sous forme de fichier SVG sur le disque dur du PC .
