React SVG Editor
Aucune bibliothèque SVG utilisée, construite à partir de zéro
Pour une fonctionnalité de fonctionnalité Ping Me sur LinkedIn?
Suivez-moi sur LinkedIn pour des projets plus intéressants
Cliquez ici pour visiter le site
Démo
À propos
- React SVG Editor est un outil de conception puissant qui vous aide à créer quoi que ce soit: sites Web, applications, logos et bien plus encore.
- Conçu pour le Web, React SVG Editor vous aide à créer, partager, tester et expédier de meilleures conceptions du début à la fin.
- Qu'il s'agisse de consolider des outils ou de simplifier les workflows React SVG éditeur rend le processus de conception plus rapide, plus efficace et amusant tout en gardant tout le monde sur la même longueur d'onde.
Caractéristiques
- Plusieurs outils fournis pour concevoir des dispositions.
- Créateur de gradient fourni pour créer et utiliser de beaux gradients dans le projet.
- Le thème a rendu les couleurs faciles, sélectionnées et enregistrées dans les palettes et les utiliser tout au long du projet, n'a pas aimé une couleur, la modifier, elle sera automatiquement appliquée à tous les éléments dans lesquels il a été utilisé.
- Outil comme la recherche de clipart, la recherche d'illustration également fournie.
- Transformez facilement les formes, manipulez diverses propriétés comme la hauteur, la largeur, la couleur de la bordure, la couleur d'arrière-plan, etc.
- Plus de 8 filtres CSS disponibles.
- Divisez les grands projets en petites parties, concevez-les dans des pages distinctes d'un projet.
- Exportez votre projet en tant que SVG ou JSON.
- Imagez à nouveau le fichier JSON
- Des effets comme le contour, Box-Shadow également disponible.
- Tout est sauvé localement, je n'ai pas besoin d'Internet pour fonctionner
- Des aides au pointeur sont également fournies pour aider à placer votre forme dans une position parfaite.
Comment utiliser
- Cliquez sur Créer un nouveau fichier sur l'en-tête
- Sélectionnez l'outil
- Cliquez sur Canvas pour ajouter de la forme
- La barre latérale à droite contient toutes les propriétés, les manipuler à partir de là.
- Pour les multipoint formes comme la ligne, le polygone, le chemin utilise le clic droit pour terminer le chemin.
- Appuyez sur la touche CTRL et faites glisser la forme à l'échelle.
- Appuyez sur la touche Shift et faites glisser la forme pour tourner.
- Cliquez sur le fichier puis sur les pages pour ajouter plus de pages.
- Cliquez sur le fichier, puis sur Enregistrer pour enregistrer votre projet.
- Cliquez sur le gradient, l'outil de création de dégradé s'ouvrira pour vous.
- Cliquez sur la couleur, pour ajouter des couleurs à la palette.
- Cliquez sur INSERT, l'outil de recherche Clipart s'ouvrira pour vous.
Quelles fonctionnalités vous obtenez
- Le projet le plus complexe que j'ai réalisé est React SVG Editor, c'est un outil de conception SVG de navigateur a de nombreux cas d'utilisation tels que le concepteur de logo, le PPT, l'outil de conception UI / UX, ont des composants intégrés pour rechercher et des cliparts d'utilisateur sur vos projets et autres outils pour ajouter des effets tels que les dégradés, les filtres, les ombres, etc.
- Il comprend des formes telles que le cercle, le rectangle, l'ellipse, le texte, la ligne, le ployage, le polygone, le crayon, l'image, etc., vous pouvez simplement ouvrir cette application et commencer à concevoir ce que vous aimez, tous les conceptions seront enregistrées dans la base de données du navigateur appelé indexDB.
- Vous pouvez également regrouper deux formes et ainsi créer une carte de produit comme un composant, une barre de navigation, des citations, etc. et les réutiliser sur vos conceptions, pour ajouter la forme de groupe, j'ai dû recommencer le projet à partir de zéro bramalisant, je n'utilisais pas la traversée linéaire, donc je devais stocker des formes dans une carte et des renvois en utilisant les premiers premiers travers premiers algorithhithm de traits.
- Vous pouvez également ajouter plusieurs pages à votre projet de conception et l'exécuter plus tard comme une présentation Power Point. -Le projet est réalisé à l'aide de react.js et redux et le langage utilisé est dactylographié.
