Editor Vetorial

O que é um editor vetorial?

Um editor vetorial é uma ferramenta para criar imagens baseadas em matemática — curvas, retas e formas definidas por equações — em vez de pixels individuais. A diferença prática é imensa: uma imagem vetorial pode ser ampliada para o tamanho de um outdoor sem perder qualidade, enquanto uma foto ou PNG ampliado fica pixelado.

Esta ferramenta funciona diretamente no navegador. Não é necessário instalar nada, criar conta ou pagar. Você desenha, edita e exporta como SVG ou PNG em segundos.

---

Gráficos vetoriais vs rasterizados

Quando você desenha um círculo neste editor, o arquivo SVG armazena apenas <circle cx="400" cy="300" r="80"/>. Isso ocupa menos de 40 bytes e o navegador redesenha com precisão perfeita a qualquer tamanho.

---

O formato SVG

SVG significa Scalable Vector Graphics — Gráficos Vetoriais Escaláveis. É um padrão aberto do W3C baseado em XML, suportado nativamente por todos os navegadores modernos desde 2011.

Um arquivo SVG simples se parece com isso:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <rect x="50" y="50" width="120" height="80" fill="#3b82f6" stroke="#1e40af" stroke-width="2"/>
  <ellipse cx="280" cy="150" rx="80" ry="50" fill="#f59e0b"/>
  <path d="M 50 250 C 120 180 280 180 350 250" fill="none" stroke="#10b981" stroke-width="3"/>
</svg>

Cada forma é uma tag XML com atributos que definem posição, tamanho, cor e estilo. Por ser texto puro, SVG pode ser editado em qualquer editor de código, incluído diretamente em HTML e versionado com Git.

---

A curva Bézier: o coração do design vetorial

A ferramenta mais poderosa deste editor — e de qualquer editor vetorial profissional — é a Caneta Bézier (P). Ela permite desenhar curvas suaves e controladas com precisão matemática.

Como funciona

Uma curva Bézier cúbica é definida por 4 pontos:

• Âncora de início — onde a curva começa
• Handle de saída — controla a direção de saída da âncora inicial
• Handle de entrada — controla a direção de chegada na próxima âncora
• Âncora de fim — onde a curva termina

A equação paramétrica é:

$B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3, \quad t \in [0,1]$

Onde $P_0$ e $P_3$ são as âncoras e $P_1$, $P_2$ são os handles.

Na prática

Quando você arrasta ao adicionar um ponto, o editor cria automaticamente dois handles simétricos — o handle de saída aponta na direção do arraste, e o handle de entrada aponta na direção oposta. Isso garante que a curva seja suave e contínua.

Paths fechados (com Z no final do d) são ideais para criar formas orgânicas como folhas, logos, personagens e mapas.

---

Ferramentas disponíveis

Selecionar (V)

Clique em qualquer objeto para selecioná-lo. Um contorno tracejado azul aparece com 8 handles de redimensionamento nos cantos e nos meios das arestas.

• Mover: arraste o objeto selecionado
• Redimensionar: arraste qualquer um dos 8 handles (funcional para retângulos)
• Nudge: setas do teclado movem 1px por vez
• Duplicar: Ctrl+D cria uma cópia deslocada 20px
• Excluir: Del ou botão na toolbar

Mover Canvas (H)

Arraste o espaço de trabalho para navegar quando estiver com zoom. Também funciona mantendo Espaço pressionado em qualquer ferramenta — ao soltar, a ferramenta anterior é restaurada.

Caneta Bézier (P)

Descrita em detalhes acima. É a ferramenta de desenho mais versátil, capaz de criar qualquer forma imaginável.

Retângulo (R)

Clique e arraste para definir um retângulo pelo canto superior esquerdo até o canto inferior direito. Tamanhos muito pequenos (menos de 2px) são descartados automaticamente.

Elipse (E)

Igual ao retângulo, mas cria uma elipse inscrita na área arrastada. Para criar um círculo perfeito, mantenha Shift (funcionalidade planejada para Wave 2).

Linha (L)

Clique e arraste para desenhar um segmento de reta. Útil para setas, divisores, grids e esquemas técnicos.

---

Propriedades visuais

O painel direito exibe as propriedades do objeto selecionado:

• Preenchimento: cor de preenchimento da forma. Clique em “Nenhum” para remover o preenchimento (formas ocas)
• Contorno: cor da borda. “Nenhum” remove a borda
• Espessura: largura do contorno em px (usa vector-effect="non-scaling-stroke" — a borda não escala com o objeto)
• Opacidade: de 0% (invisível) a 100% (sólido). Afeta o objeto inteiro, incluindo preenchimento e contorno

As alterações são aplicadas em tempo real ao objeto selecionado.

---

Desfazer e refazer

O editor mantém um histórico de até 60 operações. Use:

• Ctrl+Z — desfazer
• Ctrl+Y — refazer
• Botões na toolbar (com ícones de seta)

O histórico é baseado em snapshots do HTML interno da camada de objetos. Isso significa que cada estado é uma fotografia completa do canvas — simples, confiável e sem risco de inconsistências.

---

Zoom e navegação

Scroll do mouse é a forma mais rápida de ampliar e reduzir. O zoom é aplicado centrado na posição do cursor, permitindo navegar de forma intuitiva.

Os botões na toolbar oferecem:

• + — zoom in 25%
• − — zoom out 25%
• ⤢ — ajusta o zoom para mostrar todo o canvas (fit)

O canvas tem um artboard central branco de 800×600px, representando a área de exportação. O workspace ao redor (cinza) é infinito para navegação.

---

Carregar um SVG existente

O botão de importação (seta para cima, verde) abre um seletor de arquivo que aceita arquivos .svg. O editor:

1. Lê o arquivo como texto
2. Faz parse do XML
3. Extrai os elementos visuais
4. Os insere na camada de objetos, prontos para edição

Isso permite continuar editando um SVG criado anteriormente ou em outro software. Elementos <defs> e fundos brancos simples são ignorados na importação para evitar duplicação.

---

Exportação

Exportar SVG

Gera um arquivo .svg limpo contendo apenas o artboard (viewBox 80 60 800 600) com um fundo branco e todos os objetos desenhados. O arquivo é válido e pode ser aberto em qualquer navegador, Inkscape, Illustrator ou editor de código.

Exportar PNG

Renderiza o SVG em um <canvas> HTML na resolução 2× (1600×1200 pixels — 2× retina), garantindo nitidez em telas de alta densidade. O arquivo é salvo como vetorial.png.

Ver código SVG

Abre um modal com o código SVG formatado e colorido. Útil para:

• Copiar o código para inserir diretamente em HTML
• Revisar e editar manualmente os atributos
• Aprender como cada forma é representada em SVG

---

Casos de uso educacionais

Este editor foi criado especialmente para disciplinas de Artes Visuais e Design em nível universitário. Ele cobre os seguintes tópicos práticos:

Fundamentos de vetores

Alunos podem experimentar a diferença entre rasterizado e vetorial exportando a mesma forma e ampliando em 500% — o PNG pixela, o SVG permanece nítido.

Curvas de Bézier e matemática visual

A Caneta Bézier expõe os conceitos matemáticos de forma visual e interativa. O aluno vê os handles, entende como eles controlam a tangente da curva e pode relacionar isso com a equação paramétrica estudada em aula.

Composição e tipologia de formas

Combinando retângulos, elipses, linhas e paths Bézier, o aluno pode recriar qualquer ícone ou logotipo simples, exercitando decomposição visual.

Introdução ao SVG como linguagem

Usando “Ver código”, o aluno pode observar como cada ação no editor se traduz em XML. Isso serve de ponte para o aprendizado de desenvolvimento web e design sistêmico.

Portfólio e apresentações

As exportações em PNG 2× e SVG são adequadas para apresentações em PowerPoint, Canva, Google Slides e impressão em A4, sem precisar de software pago.

---

Formatos de arquivo e interoperabilidade

Os arquivos exportados por este editor são compatíveis com:

---

Atalhos de teclado — referência completa

---

Perguntas frequentes

O editor salva automaticamente meu trabalho?
Não há salvamento automático no servidor — a ferramenta funciona 100% offline no seu navegador. Para não perder o trabalho, exporte o SVG regularmente. O SVG exportado pode ser recarregado no editor a qualquer momento.

Posso usar o SVG exportado em sites e aplicativos?
Sim. O SVG gerado é um arquivo padrão W3C, válido para uso em <img src="arquivo.svg">, <object>, CSS background-image ou diretamente inline no HTML.

A ferramenta funciona em dispositivos móveis?
O editor é otimizado para desktop com mouse. Em tablets com caneta digital funciona bem. Em smartphones a experiência é limitada pelo tamanho da tela.

Qual é o limite de elementos que posso criar?
Não há limite imposto pelo editor. O desempenho depende do hardware — projetos com centenas de elementos complexos podem ficar mais lentos em computadores antigos.

Por que usar SVG em vez de imagens rasterizadas para logos e ícones?
Logos e ícones precisam ser exibidos em tamanhos muito diferentes — de 16×16px (favicon) até 2000px de largura (banner). Com SVG, um único arquivo serve todos os tamanhos sem perda de qualidade e com tamanho de arquivo mínimo.

Posso importar e continuar editando um SVG do Inkscape ou Illustrator?
Sim, com ressalvas. SVGs complexos com gradientes, filtros, clipping masks ou textos em path podem não ser editáveis da mesma forma. Elementos básicos (paths, retângulos, elipses, linhas) são importados e editáveis normalmente.