Arquivos SVG (Scalable Vector Graphics) são opções fantásticas quando se trata de desenvolvimento ou design web. Este tipo de imagem não pixeliza se você a escalar para ampliar ou reduzir, e normalmente é mais leve do que opções como JPEGs. Entretanto, abrir e editar arquivos SVG pode ser um desafio sem as ferramentas certas.
Aprender como abrir um arquivo SVG é essencial se você quiser editar um antes de enviá-lo para o WordPress. Algumas ferramentas permitirão que você abra e edite arquivos SVG, o que significa que você será capaz de criar os gráficos que você precisa para o seu site.
Neste artigo, discutiremos brevemente o que são arquivos SVG. Vamos rever porque eles são tão populares e falar sobre quando você deve usá-los. Depois mostraremos a você como converter arquivos para SVG e como abri-los. Vamos começar!
O que é um arquivo SVG?
Um vetor é um objeto definido por um ou mais pontos conectados entre si. Quando você combina vetores suficientes, você pode criar praticamente qualquer tipo de gráfico que você quiser.
Um arquivo SVG é uma coleção de dados vetoriais em formato XML. Pegue esta logo da Kinsta, por exemplo.
Ao contrário de um PNG ou um JPEG, essa imagem é toda vetor ao invés de pixels. Aqui está como é esse mesmo arquivo se você o abrir usando um editor de texto.
A maioria dos dados dentro desse arquivo está no elemento do caminho. Este elemento ajuda a definir vetores em qualquer direção. Adicionamos um pouco de cor às linhas usando CSS.
Se você tentar abrir um JPEG ou um arquivo PNG usando um editor de texto, tudo o que você verá é algaravia. No entanto, você pode pegar outro formato de imagem e convertê-lo para SVG, traduzindo esses pixels em caminhos ou vetores. Nós lhe mostraremos como isso funciona em um minuto, mas por enquanto, discutiremos por que e quando usar arquivos SVG.
Por que usar um arquivo SVG
Um arquivo SVG é usado para qualquer tipo de gráfico que você possa precisar para escalar. Normalmente, se você tentar modificar diferentes tamanhos de imagem, você terá problemas de pixelação. Os arquivos SVG, por outro lado, são infinitamente escalonáveis porque você está trabalhando com vetores ao invés de pixels.
Como você pode ver, a imagem não distorce ou pixeliza nada enquanto você a redimensiona. Isso torna os arquivos SVG perfeitos para logos, ilustrações, imagens em destaque, gráficos em linha e muito mais. Isso também significa que você pode reduzir o tamanho do arquivo de imagem para acelerar o seu site WordPress, sem comprometer a qualidade.
Aqui está uma rápida olhada em alguns dos arquivos SVG que usamos em nosso site, então você tem uma referência para os tipos de gráficos de que estamos falando.
Além de serem infinitamente escaláveis, os arquivos SVG também oferecem uma série de outros benefícios, que incluem:
- Eles são indexados pelo Google. Os arquivos SVG aparecem nas pesquisas de imagens do Google, o que significa que eles não apresentam nenhuma desvantagem do ponto de vista do Search Engine Optimization (SEO).
- Eles são relativamente pequenos no tamanho do arquivo. Se você pegar uma imagem ou ilustração simples e salvá-la nos formatos SVG, JPEG e PNG, o primeiro geralmente será muito menor em tamanho de arquivo do que o resto. No entanto, isso só funciona para imagens “simples”, que discutiremos em um momento.
- Você pode animar arquivos SVG. Já que você está lidando com arquivos XML ou código, você pode estilizar e animar arquivos SVG usando CSS.
Embora os arquivos SVG sejam incrivelmente versáteis, eles não são adequados para todas as situações. Quando você compara SVG vs JPEG vs PNG, você rapidamente percebe que as duas últimas opções são muito melhores quando se trata de gráficos e fotografias complexas.
Pegue este arquivo JPEG, por exemplo. Não é uma imagem de alta resolução, mas é mais do que grande o suficiente para fazer detalhes distintos.
Quando você converter aquele arquivo JPEG para SVG usando qualquer uma das ferramentas disponíveis online, você acabará com muito menos detalhes.
Essa imagem não só carece de detalhes e cores, mas também é maior em tamanho de arquivo do que a original. Isso porque os dados vetoriais se somam rapidamente quando se trata de fotografias ou outros tipos de gráficos complexos.
Para resumir, SVG deve ser o seu formato de escolha para imagens com menos linhas, tais como logotipos e ilustrações. No entanto, quando se trata de fotografias, é melhor você se ater ao JPEG e PNG de alta resolução (desde que você os otimize).
Como converter um arquivo SVG
O software de edição de fotos de sua escolha deve permitir que você pegue outros tipos de arquivos de imagem e os converta para o formato SVG e vice-versa. Aqui está um exemplo rápido usando uma de nossas ferramentas de edição de fotos favoritas gratuitas, chamada Photopea.
Se você não tem acesso ao software de edição de fotos, há muitas ferramentas online gratuitas que podem tirar imagens em quase qualquer formato e exportá-las para SVG ou vice-versa. O lado negativo de usar essas ferramentas gratuitas é que os resultados muitas vezes não são tão detalhados quanto você gostaria.
Em nossa experiência, o uso de software gratuito de conversão de imagem muitas vezes resulta em arquivos SVG sem cor ou arquivos que dificilmente se assemelham à imagem original. Entretanto, a conversão de arquivos SVG para outros formatos de imagem é muito mais simples e raramente resulta em qualquer perda de qualidade perceptível, independentemente da ferramenta que você usa.
Como abrir arquivos SVG (3 maneiras)
Há várias maneiras de abrir arquivos SVG, dependendo do que você quer fazer com eles. Começaremos falando sobre navegadores.
1. Usando um navegador
Ao contrário de outros arquivos gráficos, quando você abre um SVG, ele será iniciado no seu navegador padrão. Isso porque seu computador reconhece o SVG não como gráficos, mas como arquivos XML.
Os arquivos SVG já existem há algum tempo e cerca de 33% de todos os sites os utilizam de uma forma ou de outra. Isso quer dizer que a maioria dos navegadores modernos suportam arquivos SVG, incluindo Edge, Firefox, Chrome, Safari, e praticamente qualquer outra opção que você possa pensar.
A menos que você esteja usando um navegador muito obscuro ou desatualizado (que você não deveria estar), você será capaz de lançar arquivos SVG com um par de cliques. Entretanto, você não pode editar arquivos SVG de dentro do seu navegador. Para isso, você precisará usar um editor de texto ou um software de edição de imagem.
2. Abrindo arquivos SVG usando um editor de texto
Como os arquivos SVG são imagens baseadas em XML, você pode abrir e modificá-los usando um editor de texto. Anteriormente, mostramos a você como é a logo da Kinsta como um SVG. Nós também examinamos seu código.
Em teoria, você pode modificar ou criar um arquivo SVG usando um editor de texto. Entretanto, isso só funciona para imagens muito simples com poucos vetores. Para um arquivo como o acima, modificar cada vetor manualmente é quase impossível.
O que você pode fazer é adicionar CSS usando um editor de texto, o que é bastante simples. Nesse exemplo, você pode ver que preenchemos as linhas vetoriais com a marca registrada Kinsta roxo. Você pode usar CSS para adicionar qualquer tipo de estilo que você queira ao arquivo vetorial, incluindo animações. Isso é algo que você não pode fazer com os formatos de imagem tradicionais.
3. Usando um editor de foto ou imagem
A maioria dos softwares modernos de edição de fotos inclui suporte a arquivos SVG. Isso significa que você pode abrir, editá-los e então salvar as mudanças ou exportar a imagem para outros formatos.
Ao trabalhar com um arquivo SVG usando um software de edição de fotos, você terá acesso a todas as mesmas ferramentas que você pode usar para customizar outros tipos de imagens. Isto permite a você editar o SVG, adicionar mais detalhes, apagar partes dele e basicamente fazer qualquer outra coisa que você queira.
Software de edição de imagens ou fotos também oferece a maneira mais simples de criar arquivos SVG a partir do zero. Você pode usar ferramentas vetoriais ou de linha para projetar imagens e salvá-las no formato SVG. Uma vez que seus arquivos SVG estejam prontos, você pode ir em frente e carregá-los para o WordPress para que os visitantes possam vê-los.
Resumo
SVG é perfeito para ilustrações e gráficos simples, como logos. Felizmente, há muitas ferramentas que você pode usar para gerenciar este tipo de conteúdo. Além disso, os arquivos SVG são suportados pela maioria dos navegadores de internet.
Quanto a como abrir um arquivo SVG, há três maneiras de se fazer isso:
- Use um navegador
- Abra arquivos SVG com um editor de texto
- Use um editor de fotos ou imagens
Você precisa de ajuda com seu web design? Em Kinsta, todos os nossos planos de hospedagem incluem suporte 24/7, de nossos desenvolvedores em WordPress de classe mundial.
