SVG: o formato vetorial para a web
SVG significa Scalable Vector Graphics e é um formato de ficheiro para imagens bidimensionais baseadas em vetores. Ao contrário de imagens em píxeis como JPG e PNG, um SVG descreve formas, linhas e cores com fórmulas matemáticas. Isto torna o SVG ideal para logótipos, ícones e ilustrações que precisam de ser nítidos em qualquer tamanho de ecrã.
Como funciona um ficheiro SVG?
Um ficheiro SVG é na verdade um ficheiro de texto escrito em código XML. Cada forma, linha e cor é descrita com coordenadas e parâmetros. Se abrir um SVG num editor de texto, verá código como '
Vantagens do SVG
Escalável sem limites
Um ficheiro SVG mantém-se perfeitamente nítido em qualquer tamanho. Quer seja um pequeno favicon ou um fundo de ecrã inteiro, a qualidade permanece idêntica. Isto torna o SVG perfeito para websites responsivos visualizados em diversos dispositivos.
Tamanho de ficheiro extremamente pequeno
Os ficheiros SVG são geralmente muito menores do que ficheiros PNG ou JPG comparáveis, especialmente em imagens simples como logótipos. Isto resulta em tempos de carregamento mais rápidos e melhor desempenho do website.
Personalizável com código
Como o SVG é baseado em XML, pode ajustar cores, dimensões e animações com CSS e JavaScript. Isto permite efeitos hover interativos, animações e alterações dinâmicas de cor sem imagens adicionais.
SVG comparado com formatos raster
Imagens raster (JPG, PNG)
Os formatos raster consistem numa grelha fixa de píxeis. Ao ampliar, os píxeis tornam-se visíveis e a imagem fica desfocada. Cada tamanho requer um ficheiro separado. O tamanho do ficheiro aumenta com a resolução.
SVG (formato vetorial)
Os ficheiros SVG são independentes da resolução e mantêm-se sempre nítidos. Um ficheiro funciona em todos os tamanhos e dispositivos. O tamanho do ficheiro é pequeno e constante, independentemente do tamanho de apresentação. Além disso, o conteúdo é pesquisável para motores de busca.
Quando usar SVG?
Logótipos em websites
O SVG é o melhor formato para logótipos em websites. É nítido em qualquer ecrã, leve e fácil de personalizar. Grandes empresas como Google e Apple usam SVG para os seus logótipos web.
Ícones e ilustrações
Conjuntos de ícones e ilustrações simples são ideais como SVG. Carregam rapidamente, escalam sem esforço e podem ser estilizados com CSS, por exemplo para mudar de cor num efeito hover.
Infográficos e diagramas
Gráficos interativos, diagramas e infográficos beneficiam do SVG porque os elementos podem ser animados com JavaScript e a imagem permanece legível em qualquer tamanho.
Animações
O SVG suporta animações via CSS e JavaScript (SMIL). Com isto pode criar animações fluidas como logótipos rotativos, ilustrações em movimento ou ecrãs de carregamento interativos, sem ficheiros de vídeo pesados.
Perguntas frequentes sobre SVG
O SVG é adequado para fotografias?
Não, o SVG não é adequado para fotografias ou imagens complexas com degradês de cor e texturas. Para isso, JPG e PNG são melhores opções. O SVG é ideal para logótipos, ícones e ilustrações com cores planas e linhas nítidas.
O SVG é suportado por todos os browsers?
Sim, todos os browsers modernos suportam SVG totalmente, incluindo Chrome, Firefox, Safari, Edge e browsers móveis. Apenas o Internet Explorer 8 e anteriores não suportam SVG, mas estes browsers já quase não são utilizados.
Como crio um ficheiro SVG do meu logótipo?
Pode criar um SVG em programas vetoriais como Adobe Illustrator ou o gratuito Inkscape. Tem apenas uma imagem em píxeis? Então o logótipo precisa primeiro de ser vetorizado. A Logo in Vector faz isto profissionalmente e entrega, entre outros, um ficheiro SVG.
O SVG é seguro para usar no meu website?
O SVG é seguro desde que utilize ficheiros de fontes fiáveis. Como o SVG pode conter JavaScript, é importante sanitizar ficheiros SVG de fontes desconhecidas. Se criar os SVGs você mesmo ou os receber de uma entidade fiável como a Logo in Vector, não há risco.
SVG: indispensável para websites modernos
O SVG é o formato padrão para logótipos e ícones na web. Combina escalabilidade, velocidade e flexibilidade de uma forma que nenhum formato raster consegue igualar. Precisa de um SVG do seu logótipo? A Logo in Vector entrega um ficheiro SVG otimizado pronto para uso direto no seu website.