React SVG Editor
No se usa la biblioteca SVG, construida desde cero
¿Para cualquier solicitud de función que me haga ping en LinkedIn?
Sígueme en LinkedIn para proyectos más interesantes
Haga clic aquí para visitar el sitio
Manifestación
Acerca de
- React SVG Editor es una poderosa herramienta de diseño que lo ayuda a crear cualquier cosa: sitios web, aplicaciones, logotipos y mucho más.
- Construido para Web, React SVG Editor lo ayuda a crear, compartir, probar y enviar mejores diseños de principio a fin.
- Ya sea que se trate de consolidar herramientas o simplificar los flujos de trabajo reaccionados, el editor SVG hace que el proceso de diseño sea más rápido, más eficiente y divertido mientras mantiene a todos en la misma página.
Características
- Múltiples herramientas proporcionadas para diseñar diseños.
- El creador de gradiente proporcionó para crear y usar hermosos gradientes dentro del proyecto.
- Temo hecho fácil, seleccionar y guardar colores en paletas y usarlos en todo el proyecto, no le gustó un color, cambiarlo, se aplicará automáticamente a todos los elementos en los que se usó.
- Herramienta como búsqueda de clipart, búsqueda de ilustraciones también proporcionada.
- Transforme las formas fácilmente, manipule varias propiedades como la altura, el ancho, el color del borde, el color de fondo, etc.
- Más de 8 filtros CSS disponibles.
- Divida grandes proyectos en piezas pequeñas, diseñándolos en páginas separadas de un proyecto.
- Exporte su proyecto como SVG o JSON.
- Arrita el archivo JSON nuevamente
- Efectos como el esquema, la caja de caja también disponible.
- Todo se guarda localmente, no necesito internet para trabajar
- También se proporcionan ayudantes de puntero para ayudar a colocar su forma en una posición perfecta.
Cómo usar
- Haga clic en Crear archivo nuevo en el encabezado
- Seleccionar herramienta
- Haga clic en el lienzo para agregar forma
- La barra lateral a la derecha contiene todas las propiedades, manipularlas desde allí.
- Para formas multipunto como línea, polígono, ruta, use el clic derecho para finalizar la ruta.
- Presione la tecla CTRL y arrastre la forma a escala.
- Presione la tecla de cambio y arrastre la forma para girar.
- Haga clic en el archivo y luego en las páginas para agregar más páginas.
- Haga clic en el archivo y luego en Guardar para guardar su proyecto.
- Haga clic en Gradiente, la herramienta de creación de gradiente se abrirá para usted.
- Haga clic en Color para agregar colores a la paleta.
- Haga clic en Insertar, la herramienta de búsqueda de Clipart se abrirá para usted.
¿Qué características obtienes?
- El proyecto más complejo que hice es React SVG Editor, es una herramienta de diseño de SVG en navegador tiene muchos casos de uso como logotipo diseñador, PPT, herramienta de diseño de UI/UX, tiene componentes incorporados para buscar en cliparts de usuarios en sus proyectos y otras herramientas para agregar efectos como gradientes, sombras, etc., etc.
- Incluye formas como círculo, rectángulo, elipse, texto, línea, lineal, polígono, lápiz, imagen, etc., puede abrir esta aplicación y comenzar a diseñar lo que desee, todos los diseños se guardarán en la base de datos del navegador llamada IndexedDB.
- También puede agrupar dos formas juntas y, por lo tanto, crear un componente como la tarjeta de producto, la barra de navegación, las citas, etc. y reutilizarlas en sus diseños, para agregar la forma del grupo, tuve que comenzar el proyecto nuevamente desde Scratch BRCause. Estaba usando el recorrido lineal al almacenar formas en una matriz para renderizar formas, pero con los grupos no era posible, por lo que tenía que almacenar los elementos en un mapa y el almacenamiento de los primeros en la matriz.
- También puede agregar varias páginas a su proyecto de diseño y luego ejecutarlo como una presentación de Power Point. -El proyecto se realiza utilizando React.js y Redux y el lenguaje utilizado es TypeScript.
