React SVG Editor
Keine SVG -Bibliothek verwendet, von Grund auf neu erstellt
Für eine Feature -Anfrage Ping mich auf LinkedIn?
Folgen Sie mir auf LinkedIn für interessantere Projekte
Klicken Sie hier, um die Website zu besuchen
Demo
Um
- React SVG Editor ist ein leistungsstarkes Design -Tool, mit dem Sie alles erstellen können: Websites, Anwendungen, Logos und vieles mehr.
- React SVG -Editor für Web, das für das Web erstellt wurde, hilft Ihnen, bessere Designs von Anfang bis Ende zu erstellen, zu teilen, zu testen und zu versenden.
- Unabhängig davon, ob es sich um eine Konsolidierung von Tools oder die Vereinfachung von Workflows reagieren SVG -Editor, macht den Entwurfsprozess schneller, effizienter und unterhaltsamer, während alle auf derselben Seite bleiben.
Merkmale
- Mehrere Werkzeuge, die für Designlayouts bereitgestellt werden.
- Gradientenkreator zur Erstellung und Verwendung wunderschöner Gradienten innerhalb des Projekts.
- Das Thema wurde einfach gemacht, ausgewählt und speichern Sie Farben in Paletten und verwenden Sie sie im Projekt, mochten keine Farbe, ändern Sie sie automatisch auf alle Elemente, in denen sie verwendet wurde.
- Tool wie Clipart -Suche, Illustrationssuche auch bereitgestellt.
- Verwandeln Sie Formen leicht, manipulieren Sie verschiedene Eigenschaften wie Höhe, Breite, randliche Farbe, Hintergrundfarbe usw.
- über 8 CSS -Filter verfügbar.
- Teilen Sie große Projekte in kleine Teile auf, entwerfen Sie sie auf separaten Seiten eines Projekts.
- Exportieren Sie Ihr Projekt als SVG oder JSON.
- Improt die JSON -Datei erneut improt
- Effekte wie Umriss, Box-Shadow ebenfalls verfügbar.
- Alles wird vor Ort gespeichert. Ich brauche kein Internet, um zu arbeiten
- Zeigerhelfer werden auch zur Verfügung gestellt, um Ihre Form in eine perfekte Position zu bringen.
Wie man benutzt
- Klicken Sie auf die neue Datei im Header erstellen
- Wählen Sie Tool
- Klicken Sie auf Leinwand, um Form hinzuzufügen
- Die Seitenleiste rechts enthält alle Eigenschaften und manipuliert sie von dort.
- Für Multipointsformen wie Linie, Polygon, Pfad. Klicken Sie mit der rechten Maustaste, um den Pfad zu beenden.
- Drücken Sie die STRG -Taste und ziehen Sie die Form auf Skalen.
- Drücken Sie die Schalttaste und ziehen Sie die Form, um sich zu drehen.
- Klicken Sie auf Datei und dann auf Seiten, um weitere Seiten hinzuzufügen.
- Klicken Sie auf Datei und dann auf Speichern, um Ihr Projekt zu speichern.
- Klicken Sie auf Gradient, das Gradientenerstellungstool öffnet sich für Sie.
- Klicken Sie auf Farbe, um der Palette Farben hinzuzufügen.
- Klicken Sie auf Einfügen, Clipart -Suchwerkzeug wird für Sie geöffnet.
Was alle Funktionen bekommen, bekommen Sie
- Das komplexeste Projekt, das ich erstellt habe, ist React SVG -Editor. Es handelt sich um ein SVG -Design -Tool von Browser, das viele Anwendungsfälle wie Logo -Designer, PPT, UI/UX -Design -Tool verfügt, über in gebaute Komponenten zum Suche und Benutzer -Cliparts in Ihren Projekten und anderen Tools zum Hinzufügen von Effekten wie Gradienten, Filtern, Schatten usw. usw.
- Es enthält Formen wie Kreis, Rechteck, Ellipse, Text, Linie, Pflaster, Polygon, Bleistift, Bild usw., Sie können diese App einfach öffnen und beginnen, alles zu entwerfen, was auch immer Sie mögen, alle Designs werden in der Browser -Datenbank mit dem Namen IndexedDB gespeichert.
- Sie können auch die Formen der Gruppe zwei zusammenarbeiten und somit eine Komponente wie Produktkarte, Navigationsleiste, Zitate usw. erstellen und sie über Ihre Entwürfe hinweg wiederverwenden. Für das Hinzufügen von Gruppenform musste ich das Projekt erneut von Grund auf neu starten, weil ich lineare Traversal verwendet habe, indem ich Formen in einem Array, um Formen zu rendern, mit den Gruppen, in denen es nicht möglich war.
- Sie können Ihrem Designprojekt auch mehrere Seiten hinzufügen und später wie eine Power Point -Präsentation ausführen. -Das Projekt wird mit React.js und Redux durchgeführt und die verwendete Sprache ist TypeScript.
