Como Abrir e Editar Arquivos SVG no Windows

Gráficos Vetoriais Escaláveis (SVG) é um formato de arquivo amigável para a web usado para exibir gráficos 2D, ilustrações vetoriais, gráficos, etc. Embora seja renderizado como uma imagem, por baixo na verdade é código XML que define as curvas e linhas. No Windows, você pode facilmente visualizar arquivos SVG com um navegador, mas editá-los com o editor de imagem habitual. Neste guia, mostraremos como abrir e editar um arquivo SVG no Windows.

Abrir Arquivo SVG Usando um Navegador

Podemos abrir um arquivo SVG no navegador clicando duas vezes sobre ele ou arrastando-o para o nosso navegador de preferência.

Esta é a maneira mais fácil de abrir qualquer arquivo SVG. No entanto, não podemos editar a imagem usando este método.

Visualizar um Arquivo SVG no Explorador de Arquivos

Você pode abrir arquivos SVG habilitando o recurso de visualização SVG no Microsoft PowerToys. Para fazer isso, você precisa baixar e instalar o PowerToys a partir da página oficial do PowerToys, Microsoft Store ou Windows Package Manager (winget).

Por exemplo, usamos o gerenciador de pacotes Winget no PowerShell para instalar o PowerToys:

winget install --id Microsoft.PowerToys --source winget

Após a instalação, você pode abrir o PowerToys a partir do menu Iniciar. Nas Configurações do PowerToys, vá para “Complementos do Explorador de Arquivos” e habilite a visualização de “Gráficos Vetoriais Escaláveis” na seção do Painel de Pré-visualização:

Você também pode habilitar miniaturas SVG para vê-las em modo de ícone, não apenas no painel de pré-visualização:

Agora abra o Explorador de Arquivos, pressione Alt + P para habilitar o Painel de Pré-visualização, e selecione qualquer arquivo SVG para ver uma pré-visualização à direita.

Dessa forma, você pode visualizar miniaturas e pré-visualizações detalhadas no explorador de arquivos sem precisar de software extra.

Editar um Arquivo SVG Usando um Editor de Texto

Como os SVGs são principalmente arquivos XML, você pode editá-los facilmente usando um editor de texto. Além disso, você pode usar CSS para estilizar o SVG de várias maneiras, até adicionar animações. Isso é algo que você não pode fazer com formatos de imagem regulares como JPG ou PNG.

Clique com o botão direito no arquivo SVG, passe o mouse sobre Abrir com e selecione um editor como o Bloco de Notas:

Quando você abre um arquivo SVG em um editor de texto, verá código baseado em XML em vez da imagem propriamente dita.

Suponha que queremos mudar a cor de preenchimento do arquivo SVG dado para preto. Nesse caso, podemos editar o atributo fill da seguinte forma:

Salve o código em um arquivo de texto e abra o arquivo novamente, você verá o output atualizado, algo como isto:

Você pode usar um editor de texto para criar ou editar um arquivo SVG, mas isso só funciona bem para imagens muito simples com algumas formas. Se a imagem for complexa, mudar cada parte manualmente se torna muito difícil.

Editar um Arquivo SVG Usando um Editor Vetorial

Ferramentas modernas de edição vetorial, seja em desktop como Adobe Illustrator e Inkscape ou plataformas online como Figma e Canva, podem abrir e editar arquivos SVG.

Por exemplo, usaremos o editor SVG do Canva para mostrar como você pode facilmente editar uma imagem SVG usando uma ferramenta online. Primeiro, acesse o editor SVG do Canva a partir do site oficial e clique no botão Editar SVG:

Clique no botão Upload Files e selecione o arquivo SVG que deseja editar:

Uma vez que o arquivo SVG desejado é enviado, você pode editá-lo como quiser. Aqui, eu mudei a cor de fundo e primeiro plano do arquivo SVG selecionado.

Se você precisa de edições básicas, pode optar pelo Editor SVG do Canva. No entanto, recomendo usar ferramentas avançadas como Adobe Illustrator ou Inkscape para editar grupos ou caminhos vetoriais complexos.

Converter Arquivos para e de Formato SVG

Você pode converter um arquivo SVG em outros formatos ou de outros formatos de imagem para SVG usando ferramentas de edição de imagem em desktop ou online.

Ao converter para SVG, especialmente de PNG ou JPG, ferramentas online podem ter dificuldades com visuais complexos. Você pode notar formas simplificadas ou cores ausentes porque imagens raster são transformadas em gráficos vetoriais.

Suponha que queremos converter o seguinte arquivo PNG para SVG:

Vamos usar um editor online como o Convertio para converter uma imagem PNG em SVG. Para fazer isso, envie o arquivo a ser convertido, em seguida selecione o formato de saída desejado. Finalmente, clique no botão Converter para converter o arquivo para o formato selecionado:

Uma vez que o arquivo é convertido, você pode baixá-lo clicando no botão respectivo:

Agora abra o arquivo convertido para ver o resultado final:

O output indica uma queda significativa na qualidade da imagem.

Por outro lado, converter de SVG para formatos como PNG ou JPG é geralmente mais preciso e funciona bem na maioria das ferramentas. Suponha que queremos converter a seguinte imagem SVG para JPG:

Vamos usar o Convertio para converter o arquivo SVG selecionado para JPG:

Baixe a imagem e abra-a para analisar o resultado. O output mostra que converter um SVG para JPG não afeta a qualidade da imagem:

Se você precisa trabalhar com imagens raster em dispositivos móveis, também pode editar fotos com Photoshop para Android.