20 úteis ferramentas SVG para gráficos melhores

O SVG está ganhando popularidade no web design atualmente e você pode usar ferramentas como o Illustrator ou o Inkscape para criar gráficos SVG. Mas quando se trata de web design, devemos sempre otimizar para resultados mais leves.

Aqui o 20 ferramentas que você pode usar para trabalhar com o SVG de forma rápida e eficiente. Temos principalmente ferramentas on-line, que podem ajudar na otimização, conversão, criação de padrões e muito mais.

Sistema Interativo de Coordenadas SVG

Quando você trabalha com SVG, não pode deixar sua coordenada. Esta é uma ótima ferramenta interativa de Sara Souiden, para ajudá-lo aprenda como o SVG coordena o trabalho. Usando o viewBox e preserveAspectRatio no SVG, guiado por linhas laranja e roxas e uma régua à mão, você pode jogar enquanto aprende como a função de coordenadas SVG.

b64

b64 é uma ferramenta simples para otimizar imagens, em seguida, transformá-los no formato base64. Você pode soltar suas imagens SVG (outros formatos como JPG e PNG também), então pegue o CSS com base64 como resultado.

SVGO

O SVG exportado pode conter informação desnecessária que pode ser removido sem afetar o resultado da renderização. Se você quiser remover metadados do editor, comentários ou elementos ocultos, você pode usar o SVGO.

Você pode intall SVGO via npm, $ [sudo] npm install -g svgo ou use a versão da GUI que oferece arrastar e soltar para processar sua otimização do SVG.

SVG OMG

SVG OMG vira a linha de comando de SVGO (a ferramenta anterior) em um Versão GUI mais intuitivo e fácil de usar. Somente alternar os botões para ativar ou desativar cada recurso. No final, você pode pegar o resultado como arquivos de imagem e codificar bem.

SVG agora

Quando você trabalha no Illustrator, o SVG exportado contém algumas informações que não são necessárias. Com esta ferramenta você obtenha a versão otimizada do seu SVG exportado diretamente do seu espaço de trabalho do Illustrator. Essa ferramenta adiciona um painel com algumas opções para otimizar o SVG. Você pode obter o SVG Now na página Complementos do Creative Cloud.

Conversor SVG para PNG

Quer exportar arquivos SVG para o formulário PNG? Sem abrir aplicativos como o Illustrator para fazer isso? Use esta ferramenta SVG para PNG Converter para obter saídas de imagens em formato PNG e também URI de dados PNG Base64 se você precisar.

Circo SVG

Se você acha que as animações dos carregadores são legais, agora você pode criá-las facilmente utilizando o SVG com Circo SVG. As ferramentas permitem que você faça seu próprio carregador, girador ou qualquer coisa semelhante usando animação em loop. Defina o 'Ator', posição, tamanho, cor e outros do painel, depois exporte para obter os resultados.

Sprite SVG

O SVG Sprite é um módulo Node.js, que otimiza um monte de arquivos SVG, e assa-os em sprites do tipo SVG incluindo sprites CSS tradicionais para imagens de fundo e / ou em primeiro plano, pilhas SVG e muito mais.

Quase

Com quase você pode gerar imagens do Quasicrystal como o que você vê abaixo. Este gerador é experimental, mas os resultados são definitivamente legais. Você pode brincar alterando o valor das opções e baixar os resultados com o botão 'Save SVG'.

Padrão simples

Criando padrões com SVG nunca foi tão fácil ou divertido. Carregue sua imagem, diminua a escala ou altere o espaçamento, gire e recolore até obter um belo padrão. Você pode visualizar o resultado antes de baixá-lo.

Trianglify Generator

Crie belos padrões geométricos SVG com Trianglify Generator. Você pode definir a aleatoriedade / variante de cor, o tamanho da granularidade e escolher uma paleta de cores para trabalhar. Esta ferramenta é uma versão GUI do Trianglify.

Gradiente SVG

Você sabe que pode fazer gradientes com CSS, mas sabia que pode fazer o mesmo com o SVG? A maneira mais fácil de gerar gradiente no SVG é usando esta ferramenta. Basta digitar start e stop color e você receberá o código para o resultado gerado. Um fallback no CSS também está incluído.

Exportar PSD para SVG

Se você usa o Photoshop como editor de imagens para o seu trabalho, às vezes pode ser necessário converter seu design no espaço de trabalho do Photoshop em SVG, que é um formato não suportado no Photoshop. Baixe o Script para esta ferramenta, copie para o Adobe Photoshop / presets / scripts pasta.

Renomeie um nome de camada de vetor com a extensão SVG (por exemplo, layer1 se torne layer1.svg) e agora você pode executar o script de Arquivo> Scripts> PS para SVG.

Filtros SVG

Você sabia que com o SVG você pode adicionar efeitos como matiz, saturação, desfoque, sobreposição de cores lineares e muitos outros a imagens? Aqui está uma ferramenta que visualiza esses efeitos e, em seguida, fornece um snippet para tornar mais fácil incorpore o efeito em seu projeto.

SVG Morpheous

SVG Morpheous é uma biblioteca JavaScript que permite que você transformar um ícone SVG de uma forma para outra. Você pode definir o efeito de atenuação, a duração das animações de transição e também a direção de rotação.

Gerador de caminho de clipe

O SVG permite que você clique no clipe de imagem com Shape. Isso é muito fácil se a forma estiver na forma de um quadrado ou um círculo. Mas o que se a forma é uma com muitos pontos ou é uma forma poligonal? É aí que você precisa desta ferramenta Clip Path Generator.

Chartist.js

Chartist.js é uma biblioteca para crie gráficos responsivos altamente personalizáveis. Ele utiliza o SVG para exibir os gráficos, que também podem ser animados usando o SMIL. Com essa biblioteca, você pode criar gráficos de linhas, gráficos de pizza, gráficos de barras e outros tipos de gráficos, além de adicionar animações a eles.

Gerador de traço de traçado SVG

Esta é uma ferramenta simples para gerar linhas tracejadas utilizando SVG traço-traço. Primeiro, escolha um tipo de traço na lista e personalize-o em termos de largura, altura, rotação ou cor. Depois você pode pegar o código HTML e o CSS para aplicar essa linha de traço no seu projeto.

Sorteio de Método: Um Editor SVG Simples

Method Draw é um editor SVG baseado na web, com um interface intuitiva que vem com ferramentas em ambos os lados da tela. Você pode desenhar linhas, formas, inserir texto ou usar formas internas e editar as propriedades dos objetos desenhados. Exporte a imagem no formato SVG (também vem no formato SVG base64) ou salve diretamente no PNG.

Exportar Flash para SVG animado

Embora não seja muito popular, há uma chance de que alguns de vocês tenham dificuldade em liberar o Flash. Se sim, você pode Transforme sua animação em flash em SVG para mantê-lo funcionando de forma compatível com novas tecnologias. Essa ferramenta forma uma extensão para o aplicativo Flash e pode funcionar em CS5, CS6 e CC.

Você pode exportar para SVG quando se trata de Formas, Símbolos de Bitmaps, Interpolações de Movimento Clássicas, Interpolações de Forma (para outros, há um sucesso discutível).