O Guia Prático para Iniciantes em SVG
Embora o formato não seja particularmente novo, as imagens SVG são cada vez mais populares no design de sites. Todos os principais navegadores da web suportam o formato e o SVG está mudando a maneira como pensamos e renderizamos imagens para a web.
Por que eles são tão populares? E o que exatamente é diferente sobre um arquivo SVG? Hoje, temos as respostas e tudo o mais que você precisa saber para começar com esse tipo de arquivo. (Como um pequeno bônus, todas as imagens desta postagem estão disponíveis em SVG no Creative Market.)
Explore o Envato Elements
O que é SVG?
Scalable Vector Graphics, ou SVG, é um formato de imagem baseado em vetor desenvolvido para a web. (Você pode aprender mais sobre os formatos vetor versus raster em um artigo anterior do Design Shack.)
O formato aumentou em popularidade graças às telas de alta definição, onde os usuários podem ver todos os pixels (se existirem). Como o SVG é um formato vetorial, a imagem é renderizada da mesma maneira - e com detalhes perfeitos - independentemente do tamanho.
A linguagem de marcação foi desenvolvida pela primeira vez pelo World Wide Web Consortium, que é mais conhecido como W3C, em 1999. O W3C define SVG como “uma linguagem de marcação para descrever aplicativos e imagens gráficas bidimensionais e um conjunto de interfaces de script de gráficos relacionados. . ” É suportado por todos os navegadores modernos - para que você não precise se preocupar se os arquivos SVG serão renderizados corretamente ou não - e funciona independentemente do tipo de dispositivo.
Aplicações práticas
Então, o que torna o SVG tão popular e por que mais designers o usam? Simplesmente porque funciona.
Os arquivos SVG são pequenos e escaláveis. Embora o formato seja mais adequado para formas, ele tem uma variedade de aplicações práticas. Logotipos de marcas, ícones, elementos da interface do usuário e muitos outros bits de design podem funcionar no formato SVG. O maior bônus é que eles são vetores. Portanto, uma imagem SVG pode ser usada em praticamente qualquer tamanho. (Alguns dos arquivos mais pequenos podem ser tão grandes.)
Os arquivos SVG também são fáceis de manipular e controlar. Não apenas um SVG pode ser salvo como uma imagem estática, mas você também pode adicionar interatividade e filtros para tornar a imagem ainda mais divertida. (Os arquivos SVG podem ser animados e coloridos.)
Aqui estão algumas aplicações práticas para o uso de SVG:
- Logotipos ou imagens
- Como imagem de fundo
- Como um objeto, como um botão
- Mapeamento
- Gráficos ou desenhos
Como regra geral, o SVG é mais adequado para imagens que podem evoluir ou mudar ao longo do tempo ou por tipo de dispositivo ou incluir animação ou outros efeitos dinâmicos. Use o formato para elementos visuais, como logotipos, esboços, formas, gráficos e tabelas ou outras imagens simples.
Prós do uso do SVG
Então, por que você se afastaria do confiável JPG ou GIF para SVG? Existem várias razões pelas quais esse formato pode ser o melhor uso em seus projetos. (E também existe o potencial de usar SVG para impressão.)
- SVG é um formato vetorial. Isso por si só é importante quando se pensa em design responsivo, onde os tamanhos de imagem geralmente mudam com base no dispositivo. Um SVG é pequeno o suficiente para que um arquivo possa fazer todo o trabalho e não há perda de qualidade em telas maiores.
- Imagens e comportamentos SVG são definidos com XML, o que significa que as imagens podem ser pesquisadas indexadas, com script e compactadas.
- Você pode fazer quase tudo com uma imagem SVG que pode fazer com qualquer outra imagem, como incluir uma variedade de técnicas de design. É fácil adicionar filtros, modos de mesclagem, efeitos de rebarbas, cores, cortes e máscaras, sombras projetadas e quase qualquer outra técnica que você desejar.
- Arquivos SVG são acessíveis.
- O SVG trabalha com padrões abertos da web.
- Você pode criar SVG usando código baseado em texto ou com a imagem que desenha. Isso permite alguma liberdade, dependendo da sua necessidade e nível de conhecimento em diferentes áreas.
- O tamanho dos arquivos é pequeno e pode ser reduzido. Isso significa que os gráficos que poderiam ter sido grandes de outra maneira não são, aumentando os tempos de carregamento. (Sempre um bônus.)
Contras de usar SVG
Você provavelmente é vendido no SVG depois de ler todos os benefícios, certo? Mas existem alguns aspectos negativos a serem considerados também.
- Navegadores mais antigos - como o Internet Explorer 8 ou inferior - não são compatíveis com SVG. Provavelmente você pode encontrar uma solução alternativa (ou talvez não se importe), mas deve saber que pode haver alguns usuários que não veem suas imagens.
- O SVG não funciona para imagens complexas, como fotos. É um formato projetado apenas para formas e linhas.
O que vem a seguir para SVG?
O futuro do SVG está apenas começando. Como um formato de imagem móvel adotado (e padrão), o uso e o desenvolvimento de SVG só continuarão a crescer.
De acordo com o W3C, “o SVG 2 está atualmente em desenvolvimento e adicionará novos recursos de facilidade de uso ao SVG, além de se integrar mais de perto com HTML, CSS e DOM, além de recursos obsoletos não suportados por todos os navegadores”.
Outras adições também estão sendo lançadas. As empresas de hardware de impressão estão procurando maneiras de usar melhor o SVG para processos de impressão e contam com o apoio de líderes do setor, como Adobe e Canon. O uso no mapeamento e no GIS também está se expandindo, permitindo melhores recursos de mapeamento e zoom.
Quando você realmente começa a pensar sobre isso, há uma oportunidade quase infinita de como usar e implementar o SVG em projetos na Web e no design impresso. (Essa é uma das belezas do formato baseado em vetor.)
Recursos SVG
Agora que você está um pouco mais animado com o SVG e pode ver por que e como ele pode ser útil para seus projetos, temos uma lista de recursos para ajudá-lo a começar.
- Exportando SVG para a Web com o Adobe Illustrator
- Incorporar SVG diretamente nas páginas HTML
- Instalação e execução com a série de vídeos SVG
- Perfis SVG
- Truques CSS: Usando SVG
Conclusão
Você já está usando SVG para seus projetos? Caso contrário, você está pronto para fazer a alteração?
O SVG está crescendo em popularidade quase diariamente e, por ser uma ferramenta de código aberto, essas alterações e avanços são lidos para você imediatamente. Você não está vinculado a nenhum fornecedor ou produto e pode criar imagens totalmente compatíveis na Web moderna.
Fotos de Stock Cortesia do mercado criativo .
