Éditeur SVG

L'Éditeur SVG fournit un ensemble de fonctionnalités pour créer et modifier des graphiques vectoriels directement depuis le navigateur. Un codeur complet avec la mise en évidence de la syntaxe et des capacités de validation en temps réel est fourni pour créer et modifier directement la syntaxe XML SVG. Il fournit des outils de forme pour créer des éléments de base comme rectangle, cercle, ligne, triangle, ellipse, polygone, chemin et texte. De plus, il a une bibliothèque SVG qui contient des éléments courants tels que les cœurs, les étoiles, les flèches et les engrenages. À partir de là, vous pouvez définir les propriétés de position, de taille, de couleur de remplissage, de couleur de trait et d'épaisseur de vos éléments avec une précision millimétrique. Une prévisualisation en temps réel est également incluse, vous permettant de voir vos modifications à mesure que vous les appliquez. Tous ces fonctionnalités transforment l'éditeur en un outil puissant mais simple pour la création et la modification SVG.

Les formes et les éléments dans l'Éditeur SVG peuvent être ajoutés par plusieurs méthodes. À partir du panneau d'outils de forme, vous avez accès à des éléments géométriques de base, y compris les rectangles, les cercles, les lignes, les triangles, les ellipses, les polygones, les chemins et les éléments de texte. La procédure pour ajouter des éléments consiste à cliquer sur un outil de forme puis à cliquer ou à glisser une fois de plus dans la zone de prévisualisation. Des graphiques prédéfinis peuvent également être insérés dans vos fichiers SVG en parcourant la bibliothèque SVG, qui abrite des éléments prêts à l'emploi comme les cœurs, les étoiles, les flèches, les cases à cocher, les nuages et les engrenages. Ces graphiques prédéfinis nécessitent simplement un seul clic pour être insérés. Pour des graphiques plus complexes, modifier directement le code SVG dans le codeur intégré vous donne un contrôle total sur la structure XML. Après avoir ajouté des éléments, vous voudrez peut-être les sélectionner et ajuster leurs propriétés en utilisant les contrôles de position et de taille qui apparaissent dans l'interface de l'éditeur.

L'Éditeur SVG offre un support complet pour la modification de fichiers SVG existants grâce à sa fonctionnalité « Ouvrir un fichier SVG ». Cliquez sur le bouton « Ouvrir un fichier SVG ». Ensuite, vous pouvez sélectionner un fichier SVG que vous souhaitez travailler avec à partir de votre appareil. Une fois ouvert, le SVG apparaîtra à la fois dans le codeur et dans la prévisualisation visuelle, vous permettant de le modifier via tous les outils de modification disponibles. Vous pouvez modifier le code XML dans le codeur, ajuster les propriétés des éléments via l'interface visuelle, ajouter de nouveaux éléments en utilisant les outils de forme et insérer des éléments de bibliothèque. L'éditeur vous donnera une validation en temps réel pour vous permettre d'identifier toute erreur de syntaxe présente dans vos fichiers SVG existants. Lorsque vous avez terminé de modifier, vous pouvez exporter le SVG modifié dans divers formats, ce qui rend ce outil adapté pour ajuster et développer davantage tout graphique vectoriel existant.

L'Éditeur SVG offre une multitude d'options d'exportation en fonction de votre application et de vos besoins spécifiques. Vous pouvez exporter votre travail au format SVG brut avec toutes les propriétés vectorielles et la scalabilité. Si vous souhaitez numériser votre travail, l'outil propose l'exportation PNG, qui est la plus adaptée aux graphiques web et aux présentations. L'exportation Base64 convertit votre SVG en URI de données, ce qui est pratique pour l'insertion directe dans des fichiers HTML ou CSS. L'exportation CSS génère des codes CSS applicables pour les arrière-plans SVG en tant qu'images ou pour d'autres implémentations basées sur CSS. Tous les processus d'exportation se déroulent localement dans le navigateur, donc votre contenu restera privé. Cette vaste gamme d'options d'exportation rend plus facile l'intégration des graphiques SVG dans divers contextes et environnements de développement.

L'optimisation SVG fonctionne en enlevant toute donnée et information redondante qui pourrait gonfler la taille de vos fichiers SVG tout en minimisant la taille du fichier avec peu ou pas d'impact sur la qualité visuelle. Lorsque vous cliquez sur le bouton « Optimiser », l'outil analyse vos codes SVG et enlève tout ce qui n'est pas nécessaire, comme de nombreux espaces blancs, commentaires, métadonnées ou données de chemin inutiles qui ne contribuent pas à l'apparence visuelle. Ce processus peut considérablement compresser la taille du fichier, surtout lorsqu'il s'agit de graphiques complexes, rendant le chargement rapide sur les installations et les sites web tout en consommant moins de bande passante. L'optimisation préserve tous les éléments visuellement fondamentaux et les fonctionnalités essentiels aux graphiques, rendant un aspect parfait après le traitement. Cette fonctionnalité est très utile pour les développeurs web qui doivent toujours faire des compromis entre la qualité et la performance, tout cela fait directement dans votre navigateur, donc vos fichiers ne voyagent jamais vers un serveur externe.