Projeto

Editor e Compilador

Avallon SVG permite você criar e editar facilmente suas próprias imagens gráficas vetoriais. O editor fornece uma experiência de edição de código avançada com destaque de sintaxe pelo estilizador CodeMirror.

Visualização em Tempo Real

À medida que você edita o código SVG no editor, a visualização em tempo real é atualizada automaticamente no painel de visualização que você pode editar pelo viewBox no seu SVG.

Carregamento de Arquivos SVG

Além de criar SVGs do zero, você também pode carregar arquivos SVG existentes para editar aqui. Basta clicar na área de visualização (a área quadriculada) e selecionar o arquivo SVG desejado em seu computador.

Compilação para SVG e PNG

Uma vez satisfeito com o seu vetor gráfico, você pode compilar o código SVG em um arquivo SVG ou PNG para download para uso em outros projetos.

Responsividade

Avallon SVG é projetado para funcionar em uma variedade de dispositivos, desde desktops até dispositivos móveis. Ele usa técnicas de design responsivo para garantir uma experiência consistente em diferentes tamanhos de tela.

Seguro e de Código Aberto

É importante dizer que Avallon SVG apenas instrui seu computador no que ele deve fazer de acordo com o seu requerimento, portanto nada do que você faça sairá do seu computador pois todo código de script acontece bem aí, o projeto é de código aberto e está disponível em meu Github.

Tutorial

Area quadriculada

Caso você já tenha seu arquivo SVG e queira editá-lo clique na área quadriculada para carregar seu arquivo. O código do SVG será gerado e mostrado no Campo de texto. Você também pode conseguir seu SVG através dos sites IconsGetbootstrap, FlatIcon, e Freepik.

Campo de Texto

Caso você não tenha um arquivo basta fazê-lo ou colar algum na área de texto. A área quadriculada irá exibir sua imagem de acordo com a configuração do código, e com atualização em tempo real, se você não tiver um código pode consegui-los através dos sites citados acima

SVG e PNG

Os botões SVG e PNG compilam o código em um arquivo, se o width="" e height="" de seu arquivo estiverem muito altos a imagem poderá demorá para carregar, não exagere, afinal é seu computador que irá fazer o processamento width="7680" height="4320" já é uma imagem 8k. testei 16000x16000 e meu pc travou uns 6 segundos mas baixou, não coloquei limitador, cada um sabe o que faz, se não souber fique com até width="2000" height="2000" de cada.

Dicas

Exemplo de SVG para testar e editar

Criei este exemplo formado de 3 linhas em um estilo cursivo semelhante a uma assinatura, há uma distancia de apenas alguns pixels uma da outra, cada uma com uma cor diferente, clique no campo a seguir para copiar o código e cole no campo de texto lá em cima para ver como fica. Sinta-se livre para editar o quanto quiser!

<svg width="280" height="280" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
<g transform="translate(0, 26)">
<path d="M-1,0 Q0,120 8,40 T15,50 T30,35 T40,30 T50,30 T60,40 T70,50 T80,40 T260,60 T160,10 T100,40 T270,80 T320,40" fill="none" stroke="blue" stroke-width="2"/></g> 
<g transform="translate(3, 23)">
<path d="M-1,0 Q0,120 8,40 T15,50 T30,35 T40,30 T50,30 T60,40 T70,50 T80,40 T260,60 T160,10 T100,40 T270,80 T320,40" fill="none" stroke="yellow" stroke-width="2"/></g>
<g transform="translate(6, 20)">
<path d="M-1,0 Q0,120 8,40 T15,50 T30,35 T40,30 T50,30 T60,40 T70,50 T80,40 T260,60 T160,10 T100,40 T270,80 T320,40" fill="none" stroke="green" stroke-width="2"/></g></svg>

Lista básica de Atributos

Atributos Globais

id: Define um identificador único para o elemento.

class: Define uma ou mais classes CSS para o elemento.

style: Define estilos CSS diretamente no elemento SVG.

xml:lang, xml:space, xml:base: Atributos relacionados ao XML.

Atributos de Dimensão e Posicionamento

width, height: Define a largura e altura do elemento SVG.

x, y: Define as coordenadas x e y do elemento.

viewBox: Define a caixa de visualização que determina o tamanho e a posição visível do conteúdo SVG.

preserveAspectRatio: Define como o conteúdo SVG deve ser ajustado dentro do viewBox.

Atributos de Preenchimento e Contorno

fill: Define a cor ou padrão de preenchimento do elemento.

fill-opacity: Define a opacidade do preenchimento.

stroke: Define a cor ou padrão de contorno do elemento.

stroke-width: Define a largura do contorno.

stroke-opacity: Define a opacidade do contorno.

stroke-linecap: Define o estilo da extremidade do contorno (butt, round, square).

stroke-linejoin: Define o estilo de união entre segmentos do contorno (miter, round, bevel).

stroke-dasharray: Define um padrão de traço para o contorno (por exemplo, "5, 2" para traço e espaço).

Atributos de Transformação

transform: Aplica transformações (translate, rotate, scale, etc.) ao elemento.

Atributos de Evento:

onclick, onmouseover, onmouseout, etc.: Atributos de evento para interações JavaScript.

Atributos Relacionados à Gráficos e Texto

d: Define os comandos de caminho para elementos como <path>.

points: Define os pontos de um polígono ou polilinha.

text-anchor: Define o alinhamento horizontal do texto.

font-family, font-size, font-style, font-weight: Define a família da fonte, tamanho, estilo e peso do texto.

Atributos de Efeito

filter: Aplica filtros de efeito visual (blur, saturate, etc.) ao elemento.

Atributos Específicos de Elementos

Além desses, cada elemento SVG pode ter atributos específicos dependendo do tipo de elemento (por exemplo, cx, cy, r para <circle>, width, height para <rect>, etc.).

O site w3schools tem um tutorial completo sobre SVG!

Bonus

Para melhorar a manipulação de seu svg dê um id ou classe para cada svg e path, em seguida após a tag de fechamento svg abra a tag style e aplique seu conhecimento em CSS, não se esqueça de fechar a tag style ao final.