Como exportar padrões SVG

Costumava-se que você poderia apenas bater uma imagem tileable como um gif ou jpg em 72dpi e azulejo com CSS. É uma prática comum entre os web designers, e tem sido há anos; é uma maneira rápida e fácil de adicionar um padrão ou textura ao seu trabalho. Então aqueles corpinhos irritantes da Apple lançaram displays de retina e antes que pixel não era um pixel não mais. De repente, esses padrões amados se tornaram história.

SVGs (Scalable Vector Graphics) estão rapidamente se tornando o padrão para gráficos nítidos na Web. Eles resolvem o problema de ter que criar arquivos de imagem separados para acomodar dispositivos de retina. Eles são realmente divertidos e fáceis de criar, e eles abrem um mundo de possibilidades…

Etapa 1: criar um padrão

Existem dezenas de aplicativos diferentes que permitem projetar um padrão SVG. Meu favorito é o Illustrator, e é isso que vou usar.

Abra o Adobe Illustrator e crie um novo documento com 300 x 300 pixels. Em seguida, vá para Object> Pattern> Make e sua tela será alterada. Você notará que haverá um quadrado azul no meio da sua prancheta. Além disso, o painel de opções de padrão será aberto.

Precisamos fazer um pequeno ajuste antes de começar. Vá até o Painel de Opções de Padrões e desmarque a opção que diz Mover Mosaico com Arte. (Esse recurso é chato, porque você não poderá mover ou posicionar seu trabalho artístico no quadrado do padrão. Ele será movido com ele se você não desmarcar essa opção.)

Em seguida, o céu é o limite para o tipo de padrão que você pode criar. Por padrão, o quadrado do padrão é definido como 100 px x 100 px. Você pode discar em qualquer tamanho que desejar. Eu deixei o meu no padrão.

Em seguida, desenhe um quadrado a 50 px por 50 px. Alinhe-o com as bordas superior e direita do quadrado.

Em seguida, clique e segure o mouse sobre a ferramenta Pen . Sub ferramentas aparecerá, onde você pode selecionar a ferramenta Add Anchor Point . A partir daqui, adicione um ponto de ancoragem ao centro dos lados esquerdo e direito do quadrado.

Usando a Direct Selection Tool , selecione os pontos de ancoragem (segure shift para selecionar ambos). Em seguida, no menu superior, selecione Object> Transform> Move.

Mova os dois pontos 20px para a direita para formar uma espécie de flecha.

Em seguida, duplique a forma arrastando-a para uma nova posição enquanto mantém pressionada a tecla alt . (Ou copie e cole se preferir)

Selecione a nova forma e arraste-a para o canto inferior esquerdo do quadrado do padrão.

Com a forma ainda selecionada, pegue um canto e gire-o em 180 graus. (Mantenha a tecla shift pressionada para encaixar exatamente em 180 graus).

No menu superior, selecione Objeto> Transformar> Mover e mova a nova forma -20px.

Por fim, clique no botão Salvar uma cópia na parte superior da janela, nomeie o padrão e salve-o para concluir seu padrão. Salvar uma cópia é importante se você quiser editá-la mais tarde. Isso evita que você tenha que recriar tudo de novo.

Etapa 2: exportar o padrão

Você notará que, assim que sair do modo padrão, o padrão será automaticamente selecionado como seu preenchimento. Tudo o que você precisa fazer é desenhar uma forma na prancheta e ela será preenchida com o padrão. (Se por algum motivo você tiver alterado o preenchimento na forma, você poderá encontrar seu padrão no painel de amostras, aplicá-lo como qualquer outro preenchimento.)

Em seguida, redimensione sua forma para que ela cubra toda a prancheta de 300 x 300 pixels.

Selecione Arquivo> Salvar como. Salve seu arquivo como um .svg.

Em seguida, uma caixa de diálogo aparecerá, onde você poderá escolher entre diferentes formatos e opções SVG. Certifique-se de clicar em mais opções, no canto inferior esquerdo, para ver todas as opções disponíveis para o seu arquivo SVG.

O formato típico é o SVG 1.1, pois é o formato SVG mais usado e mais amplamente suportado. Nesta caixa, você também controlará se preserva ou não a capacidade de editar o SVG no Illustrator ou se você habilitar o texto em um caminho, o que pode ser útil. Você tem a opção de usar o SVG como um arquivo real, ou pode copiar o código e colá-lo diretamente no seu documento html. Quando terminar, clique em OK.

Etapa 3: Edite o padrão SVG

Abra o arquivo .svg em um editor de texto. Estou usando o Sublime Text, mas você pode usar o Notepad, o Dreamweaver ou qualquer outro código HTML.

Abra o mesmo arquivo em um navegador para visualizar todas as alterações feitas no código.

Existem algumas áreas diferentes para se concentrar. Primeiro, precisamos editar os limites do arquivo SVG, para que ele preencha o navegador.

Você verá: no fundo. Altere os dois valores de 300 a 100%. Então, seu código será parecido com:

Você não deve notar uma mudança ainda. Ainda deve ser um quadrado. Por quê? Porque a caixa de visualização está configurada para 300 x 300, que são dimensões quadradas. Para preencher a largura e a altura do navegador, altere o código na linha 4 de viewBox = ”0 0 300 300 ″ para viewBox =” 0 0 100% 100% ” .

Quando atualizamos o navegador, o padrão preenche nosso navegador de ponta a ponta. O problema é, e se você quiser mudar o tamanho do padrão? Você volta ao Illustrator e refaz tudo de novo? Não. Essa é a beleza de ter o Illustrator gerando seu código SVG. Você pode simplesmente editar o código. Não pense nisso como puramente um arquivo gráfico. Pense nisso como um arquivo de código que você pode manipular e dobrar à sua vontade.

Para editar o tamanho do padrão, procure na linha 5. Simplesmente mude os valores da largura e da altura para o que você quiser. Eu recomendaria mantê-lo em proporções quadradas, a menos que você queira distorcer seu padrão. Quando altero os valores para 70, o padrão é menor, mas ainda preenche a largura e a altura da tela.

Se você olhar o código, verá que o padrão é formado por polígonos. O primeiro polígono tem um preenchimento de “none” (que produz branco) e o restante tem valores hexadecimais.

Para mudar as cores do nosso padrão, tudo o que precisamos fazer é alterar os valores de preenchimento.

Se você é o tipo de pessoa que gosta de copiar e colar, aqui está nosso código final do SVG:

Isso é perfeitamente válido, mas é um pouco confuso (obrigado Illustrator). Então eu recomendo otimizá-lo antes de usá-lo. Existem muitas opções de otimização disponíveis, mas Peter Collingridge é um dos melhores, nos dá esse código final:

Conclusão

Ter a capacidade de exportar amostras e padrões do Illustrator como SVGs abre várias possibilidades. Você não apenas pode criar um padrão SVG, mas também pode editar o arquivo em questão de minutos, controlando cores, tamanhos e como o próprio arquivo é renderizado no navegador.