Ao criar um site, o web designer deve levar em consideração quatro pontos essenciais pensando no layout e design visual da web, o texto, imagens, cores e fontes empregadas.
Destes quatro pontos, o que vamos dar mais importância neste post são as imagens, já que vamos falar sobre como criar arquivos svg pois é muito importante levar em consideração a qualidade das imagens com as quais você trabalha.
Tratamentos com arquivos SVG, vem aumentando por profissionais e não tão profissionais no mundo do design.
O que é um arquivo SVG?
SVG é a abreviatura em inglês para Scalabe Vector Graphics, em espanhol, Scalable Vector Graphics. Trata-se de um formato aberto e livre com o qual criar gráficos 2D, duas dimensões.
Ao contrário de outros formatos de imagem, como JPG ou PNG, SVG é um formato escalável, não importa o quanto você queira aumentar seu tamanho, pois a qualidade da imagem será mantida. É um dos formatos mais utilizados em páginas web para colocar gráficos ou imagens vetoriais.
Por que devemos usar SVG?
Com esse tipo de formato, as imagens vetoriais manterão alta qualidade, independentemente do tamanho e da resolução. Ao contrário, imagens compostas por bitmaps, compostas por pixels, perdem qualidade se forem redimensionadas. O formato SVG é definido por sua leveza e versatilidade.
Outro ponto a favor da utilização deste formato é o seu tamanho reduzido, ou seja, graças a este aumenta a velocidade de carregamento das páginas onde estão. Essas imagens são construídas pelo navegador, o que ajuda a reduzir a carga e o consumo no servidor.
Além disso, eles podem criar imagens SVG animadas com que dar ao nosso site um ar de proximidade e chamar a atenção dos visitantes que o visitam.
SVG é um formato aberto, ou seja, pode sofrer melhorias e atualizações. Além disso, os arquivos SVG podem ser editados com programas de edição vetorial, por exemplo Adobe Illustartor sem perder qualidade em sua exibição, podendo ser visualizados em qualquer dispositivo. Também nos permite imprimi-lo sem perder qualidade.
Como criar facilmente arquivos SVG
Talvez a maneira mais fácil de criar arquivos SVG, se você estiver familiarizado com eles, seja através de um programa de design gráfico, como Illustrator, Corel Draw, entre outros.
Com foco no programa Illustrator, quando vamos usar o formato SVG, devemos levar em consideração se usamos gradientes ou outros efeitos, como efeito artístico, desfoque, pincéis, pixels, etc. como eles são rasterizados quando salvos no formato de arquivo SVG. Recomenda-se usar efeitos de filtro SVG, para adicionar efeitos para que não possam ser rasterizados posteriormente.
Outro conselho que damos é usar símbolos e caminhos simples em ilustrações para melhor desempenho do referido formato. Evite usar pincéis com muito rastreamento, pois isso gera uma carga de dados maior.
Para criar um arquivo SVG neste programa, A primeira coisa que temos que abrir é uma tela em branco onde trabalharemos nossa ideia.
Uma vez que nosso trabalho esteja concluído, o que vamos fazer é ir para a barra de ferramentas mostrada acima do programa, e selecionaremos a opção de arquivo, salvar como, e uma tela pop-up aparecerá onde nos diz para dar um nome ao nosso arquivo e indique o formato em que queremos salvá-lo. É nesta última seção que devemos marcar a opção SVG.
Ao selecionar o tipo SVG, aparece uma caixa de diálogo mostrando diferentes opções que devem ser levadas em consideração.
Como regra geral, no primeiro campo que aparece na tabela, aparece o perfil SVG 1.1. A seguir, nos dá a opção de escolher as fontes, em que nos dão padrão para texto marcado em SVG e subconjunto como nenhum. No nosso caso, este trabalho não possui fontes, caso tivesse, a opção de subconjuntos teria que ser alterada de nenhum para todos os pictogramas.
A seção a seguir é muito importante, se destacarmos o opção embed, as imagens da composição serão incorporadas ao arquivo, o que fará com que ganhe peso se usarmos muitas imagens de bitmap. Se, por outro lado, marcarmos a opção de link, devemos ter cuidado com as imagens se vamos usá-las em um site, pois devemos incluir os arquivos de nossas imagens e também, muito importante, manter suas caminho. A vantagem desta opção é que os arquivos pesarão muito menos.
Na seção de opções avançadas, encontramos a opção de código SVG, esta opção indicará como o arquivo está dentro, ou seja, o código por trás do nosso trabalho. Esta opção é essencial se você deseja adicionar seu arquivo SVG, por exemplo, ao seu WordPress pessoal, basta copiar o código e adicioná-lo diretamente no seu editor HTML do WordPress.
O último conselho que lhe damos é que ao salvar no formato SVG, lembre-se de que, se você estiver trabalhando com pranchetas diferentes, apenas a prancheta ativa será mantida.
Se quisermos ir além e aplicar efeitos SVG em nossa ilustração, o Illustrator nos oferece um conjunto de efeitos. Para fazer isso, teremos que selecionar um objeto ou grupo. Para aplicar um efeito, devemos selecionar a janela de efeitos, filtros SVG e aplicá-lo.
Ao aplicar um filtro SVG, o programa de desenho nos mostra uma janela onde Uma lista de filtros que podem ser aplicados aparece, uma vez que selecionamos um, o Illustrator nos mostra como fica, mas em uma versão rasterizada.
Como você viu, o O formato SVG foi uma revolução. Graças ao seu potencial e à qualidade que oferece, torna as páginas da web que achamos muito mais atraentes sem sacrificar o desempenho, desde que façam uso correto desse formato. SVG tornou-se a união perfeita entre o mundo do design e desenvolvimento web.