SVG generator

L’outil de génération de svg disponible à l’adresse suivante :

https://dev2.sai-erp.net/material-svg-generator/

Permet de générer des icônes svg suivant le thême Material design de google.

L’objectif est simple, à partir d’un SVG représentant un symbole il faut :

  • Intégrer ce(s) symbole(s) dans un disque
  • Projeter une ombre suivant un angle défini / modifiable
  • Colorer le disque, le(s) symbole(s) et l’ombre pour coller à une thématique

Présentation de l’outil pas à pas

Ecran initial

Le premier écran lors du chargement de l’outil invite l’utilisateur à intégrer un .svg dans l’environnement de travail.

Ecran initial de l'outil

Le SVG peut être directement tiré sur l’écran. Il est possible d’intégrer plusieurs sources différentes pour les combiner en une seule image finale. Par défaut une couleur est définie pour le fond et la lumière se trouve à 45°.

Drag and drop direct d'un svg dans l'écran

Une fois intégrés, les éléments peuvent être modifiés indépendament. Pour ce faire il suffit de commencer par selectionner les éléments à modifier en cliquant dessus. Les éléments selectionnés sont surlignés avec une bordure colorée et clignotent légèrement.

Selection des éléments à modifier

Une fois sélectionnés plusieurs opérations sont possibles.

  • Translation en tirant simplement les éléments vers l’endroit voulu

Déplacement d'un élément

  • Rotation d’un élément dans le sens inverse des aiguilles d’une montre

Rotation d'un élément

  • Redimensionnement d’un élément pour le rétraicir ou l’aggrandir

Redimention d'un élément

L’ombre projetée est calculée automatiquement entre les éléments de l’écran et une source de lumière projetée depuis l’infini vers l’infini afin d’avoir une ombre à l’infini. L’outil de gestion de lumière permet de faire tourner la source de lumière autour de la scene pour déterminer l’angle voulu.

Eclairage de la scene

Il est possible de colorer les différents éléments. Après avoir dé-selectionné les entrées, l’outil de coloration permet, en cliquant sur les éléments à colorer, définir la couleur des éléments. Par exemple ci dessous est appliqué une thématique ou l’icône est en blanc sur fond coloré avec une couleur d’ombre basé sur la couleur du disque de fond.

Coloration des différents éléments

Pour finir, l’image peut être téléchargée en cliquant sur le bouton télécharger. A noter qu’il faut bien tout deselectionner pour ce faire.

Téléchargement final

Grace à cet outil il est possible de facilement générer plein d’icônes suivant une thématique par exemple ici sur le thème du sommeil

Icônes suivant une thématique