React SVG Editor
Nenhuma biblioteca SVG usada, construída do zero
Para algum recurso, solicite ping me no LinkedIn?
Siga -me no LinkedIn para projetos mais interessantes
Clique aqui para visitar o site
Demonstração
Sobre
- O React SVG Editor é uma ferramenta de design poderosa que ajuda a criar qualquer coisa: sites, aplicativos, logotipos e muito mais.
- Construído para a Web, o React SVG Editor ajuda você a criar, compartilhar, testar e enviar designs melhores do início ao fim.
- Seja as ferramentas consolidadoras ou simplificando os fluxos de trabalho React SVG Editor torna o processo de design mais rápido, mais eficiente e divertido, mantendo todos na mesma página.
Características
- Várias ferramentas fornecidas para projetar layouts.
- O criador do gradiente fornecido para criar e usar belos gradientes dentro do projeto.
- Os temas facilitados, selecionam e salvaram cores nas paletas e usá -las em todo o projeto, não gostaram de uma cor, alterarão, ele será aplicado automaticamente a todos os elementos em que foi usado.
- Ferramenta como pesquisa clipart, pesquisa de ilustração também fornecida.
- Transformar formas facilmente, manipular várias propriedades como altura, largura, cor da borda, cor de fundo etc.
- Mais de 8 filtros CSS disponíveis.
- Divida grandes projetos em pequenas partes, projete -as em páginas separadas de um projeto.
- Export seu projeto como SVG ou JSON.
- Improver o arquivo json novamente
- Efeitos como contorno, Shadow de caixa também disponível.
- Tudo é salvo localmente, não precisa da Internet para funcionar
- Os ajudantes de ponteiro também são fornecidos para ajudar a colocar sua forma em uma posição perfeita.
Como usar
- Clique em Criar novo arquivo no cabeçalho
- Selecione ferramenta
- Clique em tela para adicionar forma
- A barra lateral à direita contém todas as propriedades, manipula -as a partir daí.
- Para formas multipontos, como linha, polígono e caminho, use o botão direito do mouse para encerrar o caminho.
- Pressione a tecla Ctrl e arraste a forma para escalar.
- Pressione a tecla Shift e arraste a forma para girar.
- Clique no arquivo e depois nas páginas para adicionar mais páginas.
- Clique no arquivo e, em seguida, salve para salvar seu projeto.
- Clique em Gradiente, a ferramenta de criação de gradiente será aberta para você.
- Clique na cor, para adicionar cores à paleta.
- Clique em Inserir, a Ferramenta de Pesquisa do Clipart abrirá para você.
O que todos os recursos que você recebe
- O projeto mais complexo que eu fiz é o React SVG Editor, é uma ferramenta de design do navegador SVG possui muitos casos de uso, como designer de logotipo, ferramenta de design ppt, UI/UX, possui componentes embutidos para pesquisar e cliparts de usuário em seus projetos e outras ferramentas para adicionar efeitos como gradientes, filtros, filtros etc.
- Inclui formas como círculo, retângulo, elipse, texto, linha, linha de solinha, polígono, lápis, imagem etc. Você pode simplesmente abrir este aplicativo e começar a projetar o que quiser, todos os designs serão salvos no banco de dados do navegador chamado indexedDB.
- You can also group two shapes together and thus create a component like Product Card, Navigation bar, Quotes etc and reuse them across your designs, For adding group shape I had to start the project again from scratch brcause I was using Linear traversal by storing shapes in an array to render shapes, But with groups it was not possible so I had to store elements in a map and render them using Depth First Traversal algorithm of trees.
- Você também pode adicionar várias páginas ao seu projeto de design e, posteriormente, executá -lo como uma apresentação do Power Point. -O projeto é feito usando o react.js e o redux e o idioma usado é o TypeScript.
