Um guia prático para SVG e ferramentas de design

Uma boa compreensão do SVG é uma habilidade rara. Surpreendentemente, o SVG é tratado apenas como outro formato de imagem. Usamos SVG por causa de sua escalabilidade e tamanho de arquivo menor, mas, na realidade, o SVG é muito mais!

Neste artigo, vou esclarecer três das ferramentas de design mais populares: Adobe Illustrator, Sketch e Figma. Existem também outras ferramentas disponíveis de suporte ao SVG que podem ter outras funcionalidades e implementar outras soluções.

Observação : Se não houver outra indicação, o conteúdo deste artigo se refere ao SVG 1.1 2ª Edição. Alguns dos pontos discutidos abaixo não se aplicariam ao SVG 2, porém, ainda não atingiu o status de recomendação, deixando o SVG 1.1 como a especificação mais atualizada.

Por que se preocupar com ferramentas de design?

SVG é uma linguagem de marcação baseada em XML e, como qualquer outra linguagem de programação, pode ser escrita e editada em um editor de texto. Então, teoricamente, ao contrário dos arquivos JPG ou PNG, não precisamos de nenhum software GUI para criar SVG. No entanto, na grande maioria dos casos, o uso de aplicativos de design gráfico é inevitável.

Trabalhar com formas e gráficos complicados em um formato baseado em texto é totalmente possível, mas geralmente seria muito complicado e tedioso. Portanto, é uma prática comum usar aplicativos como Adobe Illustrator, Sketch ou Figma para projetar gráficos visualmente e depois exportá-los para um formato SVG.

Portanto, não importa se você é um designer que codifica ou um desenvolvedor consciente do design, uma boa proficiência em trabalhar com SVG requer um pouco de conhecimento de ambos os lados: ferramentas de design e a própria linguagem SVG. Para entender melhor a relação entre os dois, vamos dar uma olhada no que os aplicativos de design gráfico têm a oferecer e como seus recursos se traduzem em SVG.

Formas básicas

Muitos gráficos vetoriais são construídos a partir de algumas formas básicas — agrupadas, transformadas e combinadas entre si. A tabela abaixo representa quais ferramentas de forma estão disponíveis no Illustrator, Sketch e Figma e em quais elementos SVG elas são exportadas.

Elipses e círculos

Uma das formas básicas em todas as ferramentas de design é uma elipse. Em SVG, encontraremos um elemento <ellipse /> correspondente, definido pelas coordenadas do centro da elipse ( cx e cy ) e dois raios ( rx e ry ).

Esta é a aparência de uma elipse em SVG:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

O tipo muito especial de elipse é um círculo. Um círculo é uma elipse com raios rx e ry iguais entre si. O SVG tem seu próprio elemento <circle /> que leva um atributo a menos, pois há apenas um raio a ser levado em consideração:

 <circle cx="400" cy="300" r="250"/>

No caso de elipses e círculos, todas as ferramentas de design funcionam da mesma forma: Ellipse Tool no Illustrator, Oval tool no Sketch e Ellipse tool no Figma gerarão o elemento <ellipse /> a menos que os raios sejam iguais: nesses casos, terminaremos com um elemento <circle /> .

Retângulos e retângulos arredondados

Outra forma básica comum a todas as ferramentas de design é um retângulo. No caso de todas as ferramentas de design, usar uma ferramenta de retângulo gera um elemento <rect /> em SVG. Um <rect /> básico é definido por 4 atributos: suas coordenadas x , junto com sua largura y altura:

 <rect x="150" y="100" width="500" height="400"/>

Observe que enquanto a posição de <ellipse /> e <circle /> é definida por seus centros geométricos, a posição de um <rect /> é definida pelas coordenadas de seu canto superior esquerdo.

Além dos retângulos básicos, geralmente usamos retângulos com cantos arredondados. Em todas as três ferramentas de projeto, você pode transformar um retângulo em um retângulo arredondado aplicando um raio de borda a ele no Inspetor ou no painel Propriedades .

Além disso, no Sketch e no Illustrator, existem ferramentas dedicadas à criação de retângulos arredondados ( Ferramenta Rounded Rectangle no Illustrator e ferramenta Rounded no Sketch). No entanto, não há diferença entre um retângulo regular com um raio aplicado e um retângulo arredondado desenhado com uma ferramenta Rounded Rectangle .

Portanto, não importa como criado, um retângulo arredondado será exportado usando a seguinte sintaxe:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

Neste caso, rx é um atributo responsável pelo raio dos cantos arredondados:

Retângulos arredondados com cantos elípticos

Uma diferença significativa entre ferramentas de design e SVG é como os raios são definidos. Em todas as ferramentas de projeto que consideramos, o raio da borda é definido por uma única variável. Podemos pensar em raios de borda como pequenos círculos usados ​​para mascarar os cantos de nossos retângulos:

Enquanto isso, no SVG os raios de borda podem ser definidos por dois atributos: rx (como no exemplo acima) e ry . Eles nos permitem criar retângulos com cantos elípticos. Você pode pensar nesses cantos arredondados como elipses usadas como máscaras em vez de círculos:

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

Portanto, neste caso, o SVG oferece mais possibilidades do que ferramentas de design.

Nota : Embora não seja exatamente relacionado ao tópico deste artigo, vale a pena notar que a diferença descrita acima se aplica tanto ao SVG quanto ao HTML/CSS. A propriedade CSS border-radius que é usada para estilizar nós como divs e spans também permite criar cantos elípticos. Você pode ver um exemplo abaixo.

 border-radius: 10px 5% / 20px 25em 30px 35em;

Os valores antes da barra ( / ) são raios horizontais (equivalente a rx ) e os valores após a barra são valores verticais (equivalente a ry ).

Retângulos arredondados com múltiplos raios

Nas ferramentas de design, assim como no CSS, cada um dos cantos de um retângulo pode ser controlado separadamente. Em outras palavras, cada canto pode ter seu próprio raio (ou nenhum raio). Tal operação não é possível em um elemento <rect /> em SVG. Cada elemento <rect /> tem apenas um atributo rx e um ry . Se você criar um retângulo com vários raios aplicados em seus cantos, a ferramenta de design gerará um elemento <path /> em vez de um elemento <rect /> . Falaremos mais sobre um elemento <path /> na próxima seção.

Cantos lisos

Um dos recursos interessantes introduzidos pelo Sketch e pelo Figma há pouco tempo são os cantos suaves. Em resumo, cantos suaves usam um raio de borda irregular para obter um resultado que parece mais natural e, bem, suave. A aplicação mais comum de cantos suaves são ícones de aplicativos e outros elementos arredondados no iOS. A Apple usou cantos arredondados “regulares” em sua plataforma móvel até o iOS6 e depois mudou para o que chamamos hoje de cantos “lisos” como parte do grande redesenho introduzido em 2013 (iOS7).

No Sketch, você pode obter o efeito de cantos suaves alternando entre Round Corners e Smooth Corners no Inspector . O Figma está dando a você ainda mais controle sobre seus cantos, pois você pode manipular com o nível de suavidade no menu Corner Smoothing .

Infelizmente, nada disso pode ser facilmente traduzido para SVG, pois o SVG não conhece o conceito de cantos suaves. Há também uma diferença importante entre o que o Sketch e o Figma fazem se você tentar exportar um retângulo com cantos suaves para SVG.

O Figma ignora os cantos suaves e exporta um retângulo como um elemento <rect /> regular com cantos arredondados. Sketch, por outro lado, exporta um retângulo com cantos suaves como um <path /> que está tentando replicar a forma verdadeira dos cantos suaves. Portanto, o Figma nos dá uma precisão pior para manter um retângulo como retângulo, enquanto o Sketch visa a máxima precisão possível ao custo de semântica e tamanho de arquivo maior. Se você quiser entender melhor o que essa diferença significa, vamos nos aprofundar nos prós e contras de preservar formas básicas um pouco mais tarde.

Linhas

O próximo tipo básico de elemento é uma linha. Nesse caso, nos referimos a uma linha como uma única linha reta que vai do ponto A ao ponto B. Illustrator, Sketch e Figma oferecem suas próprias ferramentas de linha dedicadas a desenhar linhas. Em SVG, temos um elemento <line /> . Quatro de seus atributos são necessários: as coordenadas de seu ponto inicial e as coordenadas de seu ponto final:

 <line x1="100" y1="100" x2="200" y2="200"/>

Quando se trata de exportar, o Illustrator e o Figma exportarão linhas como elementos <line /> sempre que possível, enquanto o Sketch sempre calculará linhas para elementos <path /> .

Polilinhas

Agora vamos dar uma olhada nas polilinhas. Polilinha é uma série conectada de linhas retas. As polilinhas não possuem ferramentas dedicadas nas ferramentas de design. Eles podem ser desenhados com a ferramenta Caneta (no Illustrator e Figma) ou com a ferramenta Vetor (no Sketch).

No SVG, as polilinhas são definidas com um elemento <polyline /> . <polyline /> é desenhado usando um atributo points que é uma lista de coordenadas que definem todos os pontos que criam uma polilinha. Vamos dar uma olhada em um exemplo de uma polilinha feita de três segmentos e quatro pontos:

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator e Sketch traduzem polilinhas para elementos <polyline/> , enquanto o Figma exporta polilinhas como <path /> s.

Setas; flechas

Nas três ferramentas, você pode controlar as extremidades das linhas para transformá-las em setas e afins. E todas as três ferramentas exportarão linhas como <path /> s, mesmo que sem as maiúsculas aplicadas as mesmas formas sejam traduzidas para <line /> s ou <polyline /> s. É porque o SVG não suporta setas? Não exatamente.

Na verdade, a especificação SVG inclui extremidades de linha personalizáveis ​​que são conhecidas como marcadores. No entanto, nenhuma das ferramentas de design que mencionamos usa marcadores no SVG que elas geram.

<marker> é um elemento SVG separado que pode ser definido dentro de <defs> do SVG e então usado em elementos <line> , <polyline> e <path> com atributos de marcador: marker , marker-start , marker-mid e marker-end . Se você quiser saber mais sobre esses atributos, eu recomendo que você confira a documentação oficial do W3C.

Polígonos e estrelas

A última forma básica que veremos é um polígono. Polígono é uma forma fechada feita de linhas retas, por exemplo, uma estrela ou um hexágono. Você também pode pensar nisso como uma polilinha fechada. A sintaxe de um elemento <polygon /> em SVG é, na verdade, a mesma de um <polyline /> . A única diferença entre os dois é que no <polygon /> o último ponto da lista está sempre conectado com o primeiro ponto para tornar um <polygon /> uma forma fechada.

Alguns polígonos são polígonos regulares. O que há de especial nos polígonos regulares é que todos os seus lados e ângulos são iguais. Para desenhar polígonos regulares, como um hexágono ou um pentágono, você pode usar a ferramenta Polígono , mesmo no Illustrator, Sketch e Figma. As ferramentas de polígono no Illustrator e no Sketch gerarão elementos <polygon /> em SVG. No Figma, por outro lado, todas as formas feitas com a ferramenta Polygon resultam em elementos <path /> .

Todas as três ferramentas de design também possuem ferramentas Star dedicadas para desenhar estrelas. No entanto, quando se trata de exportar, as formas criadas com as ferramentas Estrela se comportam exatamente da mesma forma que as criadas com as ferramentas Polígono . Em SVG, as estrelas são apenas polígonos, NÃO existe o elemento ~~<star />~~ .

É importante lembrar que as ferramentas Estrela e Polígono são usadas para criar estrelas e polígonos regulares, enquanto o elemento <polygon /> no SVG pode ser usado para qualquer polígono, regular ou irregular.

Todos os caminhos levam a <path />

Como já aprendemos, em SVG, existem três formas básicas dedicadas a desenhar formas feitas de linhas retas: <line /> , <polyline /> e <polygon /> . Mas e se quisermos que nossas linhas sejam curvas? Já é hora de falarmos sobre o elemento <path /> .

O elemento <path />

<path /> é o elemento SVG mais versátil. Ele pode ser usado para desenhar qualquer linha e forma possível, incluindo, mas não se limitando a, todas as formas básicas listadas acima. De fato, toda forma básica ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) pode ser descrita como um elemento <path /> . Além disso, existem muitas formas que podem ser criadas com <path /> , mas não são possíveis de criar com nenhum outro elemento SVG. Para saber mais sobre <path /> e sua sintaxe, recomendo que você confira este excelente artigo de Chris Coyier.

Agora, como criamos elementos <path /> em ferramentas de design? Em primeiro lugar, como aprendemos acima, algumas das camadas criadas com ferramentas de forma computam para elementos <path /> mesmo que teoricamente possam ser outros elementos (por exemplo, o Figma exporta todos os polígonos como <path /> s mesmo que possam ter sido definido como <polygon /> s. Então, todas as outras formas irregulares que desenhamos com uma ferramenta Pen ou uma ferramenta Vector devem ser exportadas como <path /> , pois não há outro elemento SVG que possa defini-las. Finalmente, no Sketch e no Figma, podemos converter qualquer forma básica em uma camada que calcula para um <path /> . No Sketch, podemos fazer isso escolhendo Layer > Combine > Flatten , enquanto Figma podemos encontrar essa função em Object > Flatten Selection ( ⌘ + E no macOS, Ctrl + E no Windows).

Operações Booleanas

As operações booleanas são funções executadas em formas para combiná-las de algumas maneiras diferentes. No Illustrator, Sketch e Figma, existem 4 operações booleanas padrão:

• União (Unir)
  A soma das formas
• Subtrair (menos frente)
  Forma inferior subtraída pela área comum entre as formas
• Intersecção
  A área comum entre as formas
• Diferença (Excluir)
  Uma soma das formas subtraídas pela área comum entre as formas.

No Illustrator, todas essas funções geram uma única forma (contorno). É uma ação que não pode ser revertida — a não ser usando Desfazer ( ⌘ + Z no macOS, Ctrl + Z no Windows). No Sketch e no Figma, por outro lado, as operações booleanas criam grupos de camadas que podem ser desagrupados posteriormente sem nenhum dano causado às formas internas. No entanto, você pode mesclar esses grupos em uma única forma para obter um resultado semelhante ao do Illustrator usando as funções Flatten mencionadas no parágrafo anterior.

A questão é: o SVG suporta operações booleanas? Não, não. Eles apenas se fundem. Portanto, cada forma combinada que você criar com operações booleanas no Figma ou Sketch será exportada como um único elemento <path /> .

Parece o mesmo, então por que isso importa?

Em termos de como diferentes formas podem ser definidas no SVG, sua sintaxe é extremamente versátil. Vamos considerar um retângulo básico:

Essa forma pode ser definida em SVG de algumas maneiras diferentes. Pode ser um elemento <rect /> , um elemento <polygon /> . Definitivamente, pode ser um elemento <path /> (como tudo pode ser um elemento <path /> ). Também pode ser um elemento <line /> (ou um elemento <polyline /> ) se decidirmos criá-lo usando traços em vez de preenchimentos.

Cada um desses elementos renderiza um retângulo que parece exatamente o mesmo:

Mas, se o resultado final (o gráfico renderizado por um agente de usuário em um navegador) parece o mesmo, realmente importa qual abordagem escolhemos? Bem, ele faz. Como regra geral, eu sempre recomendaria usar formas básicas sempre que possível.

Por último, mas não menos importante, use as formas mais óbvias para o caso específico. Por exemplo, não crie retângulos com linhas ou círculos com retângulos se não tiver um bom motivo. Há pelo menos alguns argumentos por trás disso:

1. Semântica/Legibilidade
   Ferramentas de compactação, como SVGO, oferecem a opção de calcular todas as formas básicas para elementos de caminho. Isso pode economizar algumas mordidas, mas definitivamente diminuirá a legibilidade do seu código. A sintaxe <path /> é extremamente pouco intuitiva, portanto, se seu SVG estiver prestes a ser modificado em um editor de código em vez de uma ferramenta de design, será muito mais fácil entendê-lo se você mantiver as formas básicas como formas básicas.
2. Tamanho do arquivo
   A compactação de formas em caminhos pode ajudá-lo a reduzir arquivos, mas nem sempre é o caso! Por exemplo, um retângulo arredondado ocupa muito mais espaço como <path /> do que como <rect /> .
3. Animações
   Você já tentou animar SVG? É muito divertido - desde que você opere em SVG limpo e semântico. Com formas básicas, você pode manipular facilmente parâmetros como raio, largura, altura ou posição do ponto. Se você mesclar suas formas em caminhos, a maioria dessas operações será muito mais difícil de realizar ou simplesmente impossível.
4. Variantes/Resposta
   Lembre-se que SVG não é uma imagem estática como JPG. Você pode estilizá-lo, criar um tema, torná-lo responsivo e assim por diante. Assim como nas animações, manter seu arquivo bem estruturado e semântico definitivamente o ajudará em qualquer uma dessas tarefas.

Como em toda regra, você pode encontrar algumas exceções. Mas, em geral, é uma boa prática manter seu SVG o mais legível, flexível e estruturado possível.

Agora, vamos dar uma olhada em outros atributos e recursos como viewBox, grupos, transformações e efeitos visuais.

width , height e viewBox

Se você já tem alguma experiência com SVG, provavelmente notou que a tag de abertura <svg> geralmente possui os seguintes atributos: width , height e viewBox . Nas ferramentas de design, temos as dimensões das pranchetas (ou molduras no caso do Figma). Então, como exatamente esses valores estão relacionados entre si?

Vamos começar explicando os atributos <svg> que acabamos de mencionar. Você pode pensar em uma viewBox como uma tela virtual na forma de um sistema de coordenadas. O centro deste sistema de coordenadas é colocado no canto superior esquerdo da área designada. Todos os itens dentro da <svg viewBox="…"> são colocados de acordo com este sistema de coordenadas e também recortados por ele - qualquer coisa que estoure a viewBox não será renderizada. viewBox aceita 4 números como seu valor:

 <svg viewBox="0 0 12 8"> … </svg>

Como SVG significa Scalable Vector Graphics, nenhuma unidade é necessária nesses números. Imagine-o como um sistema de coordenadas abstrato que pode ser dimensionado para cima e para baixo em qualquer tamanho. Não se preocupe muito com os dois primeiros números, provavelmente você não precisará deles. Os dois últimos são o que geralmente importa. Estas são as dimensões reais da nossa tela SVG.

viewBox não determina o tamanho do SVG. Apenas especifica as coordenadas da área em que nosso SVG é desenhado. Portanto, quando usado na web, <svg> com uma viewBox especificada sempre ocupará todo o espaço disponível e preservará a proporção definida pela viewBox — a menos que evitemos isso com CSS ou definamos os atributos de width e/ou height .

width e height são os atributos <svg> que definem a largura e a altura reais do elemento SVG. Ao contrário de viewBox , eles devem usar unidades especificadas, como pixels, ems ou rems. Isso significa que também podemos transformar o SVG com eles — se a relação entre a width e a height for diferente da relação entre os valores da viewBox , o SVG irá inclinar o gráfico especificado na viewBox de acordo com os valores de width e height :

Agora, o que acontece quando exportamos SVG de ferramentas de design? No Sketch e no Figma, todos os ativos (não importa se são camadas únicas, grupos ou pranchetas) sempre terão uma viewBox igual às dimensões do elemento exportado e width e height definidas em pixels, iguais aos dois últimos valores da viewBox . No Illustrator, todos os ativos têm um viewBox , especificado da mesma forma que no Sketch e no Figma, mas sem width e height aplicadas.

Grupos

Os grupos são o meio básico de organizar camadas nas ferramentas de design. Além de definir a hierarquia, os grupos são usados ​​para aplicar operações em massa, como transformações, a vários elementos. Não há diferença significativa em como os grupos trabalham no Illustrator, Sketch e Figma e, felizmente, a funcionalidade básica dos grupos SVG ( <g>…</g> ) é praticamente a mesma.

Transformações

Em SVG, existem cinco transformações básicas que podemos aplicar a um elemento:

1. translate : move o elemento ao longo do eixo vertical e/ou horizontal;
2. scale : dimensiona o elemento ao longo do eixo vertical e/ou horizontal:
3. rotate : cria uma rotação bidimensional por um determinado ângulo especificado em graus em torno de um determinado ponto;
4. skew ( skewX ou skewY ): inclina o elemento por um determinado ângulo especificado em graus ao longo do eixo vertical ou horizontal;
5. matrix : a mais complexa e versátil das funções de transformação disponíveis. Como exigiria muita conversa sobre álgebra para explicar como as transformações de matrizes funcionam, isso vai muito além do escopo deste artigo. Vamos apenas reconhecer que a matrix permite que você execute muitas transformações complicadas, como alongamento, compressão, corte e assim por diante.

Nota : Observe que, embora algumas das transformações SVG pareçam muito semelhantes às transformações CSS, elas não são iguais. Por exemplo, o CSS oferece funções de rotação 2D e 3D, enquanto o SVG possui apenas uma função de rotação 2D. Além disso, enquanto o CSS aceita várias unidades de ângulo, como graus ou radianos, as rotações do SVG são sempre definidas em graus, portanto, uma unidade pode ser omitida (por exemplo , rotate(45) , NOT ~~rotate(45deg)~~ ).

Todas essas transformações podem ser aplicadas a qualquer elemento SVG, como formas ou grupos, e não são destrutivas, ou seja, não afetam a geometria original do elemento. Aplicamos transformações por meio de um atributo transform :

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

Vamos dar uma olhada nas ferramentas de design agora! Assim, a maioria das transformações que aplicamos nas ferramentas de design interagem diretamente com a geometria dos objetos e sua posição na tela. Eles não são independentes das formas e não serão exportados como funções de transformação SVG.

As rotações são aqui a exceção, com seus valores sendo armazenados no Inspetor separadamente da geometria do elemento e exportados como uma função transform="rotate(…)" .

Curiosamente, a mesma regra se aplica a flips (reflexões) no Sketch e no Figma (não no Illustrator!). Cada um deles tem sua própria abordagem embora. O Sketch usa uma combinação de escala negativa e tradução para obter um efeito de inversão, enquanto o Figma executa uma inversão dentro de uma única função de matriz.

Raio da borda

Já falamos sobre retângulos arredondados, mas que tal arredondar outras formas? Na verdade, em todas as ferramentas de design que discutimos, você pode arredondar os cantos de qualquer forma, não apenas um retângulo.

Mas e o SVG? Os elementos <polygon /> e <path /> também possuem atributos rx e ry ? Infelizmente não. Qualquer forma que não seja um retângulo, uma vez que você arredonde qualquer um de seus cantos, sempre será exportada como um elemento <path /> tratando os cantos arredondados como parte integrante da geometria da forma.

Preenchimentos e Traços

Illustrator, Sketch e Figma todos suportam preenchimentos e traços como propriedades básicas de qualquer forma, e assim acontece no SVG. Portanto, os preenchimentos especificados nas ferramentas de design são exportados em um atributo de fill e os traços são exportados em um atributo de stroke . Mas não pense que é tudo tão simples. O diabo está nos detalhes.

Preenchimento de cor

O preenchimento de cor é o mais básico dos preenchimentos disponíveis e é especificado com uma única cor simples (por exemplo #3fd8e2 ). Em SVG, esse valor é colocado diretamente no atributo fill (por exemplo fill="#3fd8e2" ).

As ferramentas de design exportam preenchimentos de cores com valores hexadecimais (por exemplo #0000ff ), embora, em SVG, você também possa usar todos os outros esquemas de nomenclatura conhecidos pelo CSS, como nomes de cores (por exemplo, blue ), valores RGB (por exemplo, rgb(0,0,255) ) ou mesmo valores de HSL (por exemplo hsl(240,100%,50%) ).

Preencher opacidade

Quando se trata de opacidade de preenchimento, o SVG aceita cores semitransparentes (por exemplo, valores RGBA), embora também forneça um atributo fill-opacity . Por causa de problemas de compatibilidade, o uso fill-opacity é uma abordagem recomendada e também é usada pelo Figma e pelo Sketch. (Não estou mencionando o Illustrator aqui, pois o Illustrator não permite que você controle a opacidade do preenchimento.) Então, se você deseja criar um quadrado SVG preenchido com a cor vermelha semitransparente, você pode fazer o seguinte:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

mas uma abordagem mais recomendada (usada por Sketch e Figma) seria:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

Preenchimento Gradiente

Se você estiver familiarizado com CSS, deve saber que, quando se trata de planos de fundo, alternar entre planos de fundo coloridos e gradientes é relativamente simples. A mesma propriedade background-color (ou background ) pode ser usada em ambos os casos. Como os gradientes em SVG são muito mais antigos que os gradientes CSS, sua sintaxe também é bem diferente.

Para usar um gradiente é SVG, primeiro você precisa defini-lo dentro das <defs>…</defs> e depois se referir a ele em um atributo de fill , por exemplo:

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

Então, o que acontece durante a exportação SVG quando você usa um preenchimento de gradiente é que um gradiente é adicionado ao <defs> e está sendo referenciado no código abaixo.

Uma coisa importante a lembrar é que o SVG suporta apenas gradientes lineares e radiais. Efeitos como gradiente angular ou malha de gradiente não serão exportados para SVG.

Preenchimento de padrão/imagem

Sketch e Figma também oferecem um preenchimento de imagem onde um gráfico raster é usado para preencher todo o elemento ou como um padrão de repetição.

Quando se trata de exportar preenchimentos de imagem para SVG, na verdade é bastante semelhante aos gradientes. As imagens estão sendo definidas no <defs> com um elemento <pattern>…</pattern> e então referenciadas dentro de um atributo fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

Para que funcione, a imagem #picture referenciada deve ser definida em algum lugar . As ferramentas de design os incorporarão diretamente no SVG como elementos <image/> , embora não seja uma abordagem recomendada quando se trata de desempenho. Se você realmente precisar usar imagens raster em seu SVG, sugiro remover a tag de imagem do SVG e usá-la em um arquivo autônomo:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

Traços

atributo de stroke em SVG, o mesmo que atributo de fill aceita cores em vários formatos, por exemplo, hexadecimal, RGB ou HSL. E da mesma forma que fill , você pode controlar a opacidade do stroke-opacity . Além disso, assim como fill , os traçados podem usar gradientes como seu valor. Todos esses efeitos podem ser obtidos em ferramentas de design e exportados com sucesso para SVG.

Tampões e junções de traçado

Existem também alguns atributos específicos do curso. Primeiro, você pode controlar a largura do traço. As ferramentas de design o suportam e são exportados como atributo stroke-width . Você também pode controlar as extremidades e as junções dos traços. O SVG permite que você os defina por meio stroke-linecap e stroke-linejoin . Existem três tampas possíveis: tampa de butt , tampa round e tampa square , e três junções possíveis: junção de miter , junção round e junção bevel . Tanto as maiúsculas quanto as junções podem ser controladas no Illustrator, Figma e Sketch e as tampas e junções disponíveis correspondem às disponíveis no SVG.

Traços tracejados e pontilhados

Outro efeito que podemos obter com os traços são os traços pontilhados. No Illustrator e no Figma, você pode definir vários traços e espaços, enquanto no Sketch, apenas uma única sequência de um traço e um espaço é possível.

O SVG permite criar linhas tracejadas com um atributo stroke-dasharray . stroke-dasharray permite que uma sequência de múltiplos traços e lacunas seja passada como seu valor que corresponde aos recursos do Figma e do Illustrator. Isso também significa que o Sketch não permite que você use todas as possibilidades do SVG neste caso.

Um caso de borda interessante é uma linha pontilhada. Conseguimos isso definindo o stroke-linecap como round e o comprimento de um traço como zero, por exemplo:

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

Nota : Atualmente, os usuários do Figma experimentam um bug que não permite que eles criem linhas pontilhadas. Por exemplo, usar 0, 10 ou 10, 0 como Traços é interpretado da mesma forma que 10, 10 e fornece uma linha tracejada regular em vez de uma linha pontilhada. Felizmente, há uma maneira de contornar isso. Em vez de usar zero, use um valor muito pequeno, por exemplo, 0.0001, 10 — isso deve resultar em uma linha perfeitamente pontilhada, como esperado.

Alinhamento do curso

Há uma outra diferença muito mais significativa entre ferramentas de design e SVG: alinhamento de traçado. Illustrator, Sketch e Figma permitem controlar o alinhamento do traçado e defini-lo dentro, fora ou centralizá-lo. Mas adivinhem? O SVG 1.1 não suporta alinhamento de traçado. Em SVG, todos os traços são traços alinhados ao centro. Sem traços internos ou externos. É por isso que algumas coisas muito estranhas acontecem quando você está exportando seus traços alinhados por fora e por dentro para SVG.

O Illustrator, nesse caso, exporta a forma e seu traçado como duas formas separadas. Portanto, se você aplicar um traço interno ou um traço externo a um retângulo no Illustrator, no SVG resultará em um retângulo e um elemento <path /> separado representando o traço do retângulo, por exemplo:

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

Este comportamento tem algumas repercussões muito importantes. Por exemplo, você não pode mais alterar a largura do traço ou torná-lo pontilhado. Também não será dimensionado da mesma forma que os traços “reais”. Além disso, o Illustrator altera as dimensões da forma original, por exemplo, um quadrado de 100×100 com um traço interno em negrito de 20 unidades será exportado como um quadrado de 120×120 para evitar problemas de renderização. Eventualmente, não é apenas um acidente vascular cerebral. É apenas outra forma com um preenchimento.

O Figma e o Sketch têm uma abordagem diferente. Eles exportam fielmente todos os traços como traços, mas recalculam as dimensões da forma. Então, se você tem um círculo com um raio igual a 5 e um traço interno igual a 2, o que você encontrará em seu SVG será um círculo com um raio igual a 4 (e um traço ainda igual a 2).

Essa abordagem permite que o Figma e o Sketch evitem a maioria dos problemas mencionados no caso do Illustrator. No entanto, com algumas formas mais complicadas, esta técnica pode não ser precisa e o resultado final ser um pouco diferente do esperado. É por isso que a abordagem do Sketch e do Figma não é necessariamente melhor - é definitivamente mais semântica, performática e flexível, mas a solução do Illustrator é mais precisa.

Nota: O mesmo problema com o alinhamento do traço também se aplica ao CSS. A propriedade de border CSS também não suporta alinhamento interno ou externo. No entanto, se desejar, você pode hackear esse comportamento com propriedades de outline e box-shadow .

Vários preenchimentos e traços

Nas ferramentas de design, você pode adicionar vários preenchimentos e traçados por camada. Isso faz muito sentido uma vez combinado com atributos como opacidade e modos de mesclagem. Infelizmente, o SVG não suporta esse recurso. Se você exportar uma camada com preenchimentos e/ou traçados, ela será multiplicada e cada um dos traçados e preenchimentos será aplicado à sua própria camada.

Sombras, filtros e outros efeitos

Vamos falar sobre alguns efeitos menos populares agora. SVG é uma linguagem muito poderosa, na verdade muito mais poderosa do que normalmente é usada na web. Um dos recursos mais interessantes do SVG é uma ampla gama de efeitos visuais avançados, conhecidos como filtros SVG.

O escopo completo das possibilidades do filtro SVG é muito amplo para ser descrito neste artigo. Se você quiser saber mais sobre eles, eu recomendo fortemente que você confira algumas palestras e artigos sobre este tema de Sarah Soueidan.

Filtros, assim como padrões ou gradientes, precisam ser definidos para aplicá-los posteriormente a uma camada. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. We can. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

Modos de mistura

Os modos de mesclagem (como Darken , Multiply ou Overlay ) permitem mesclar dois ou mais elementos combinando seus valores de maneiras diferentes. Bem conhecido pelos designers gráficos (e aplicativos como o Adobe Photoshop), os modos de mesclagem também funcionam no Sketch, Figma e Illustrator.

Em SVG, os modos de mesclagem existem como um dos filtros. Eles têm sua própria primitiva de filtro <feBlend /> . No entanto, como a sintaxe do <feBlend /> é bastante complicada, Sketch, Figma e Illustrator usam CSS:

 .rectangle { mix-blend-mode: overlay; }

Com o suporte ao navegador mix-blend-mode sendo bastante bom hoje em dia, não deve ser um grande problema. No entanto, se for importante garantir suporte a navegadores à prova de balas que inclua o Microsoft Edge e o IE, você terá que substituir manualmente os modos de mesclagem CSS por filtros SVG.

Assim como com vários preenchimentos e traçados, o SVG não suporta modos de mesclagem aplicados diretamente em atributos de preenchimento e traçado (em vez de em camadas inteiras). Se você tentar exportar preenchimento e traçados com seus próprios modos de mesclagem de uma ferramenta de design para SVG, a camada será multiplicada e os modos de mesclagem aplicados às respectivas cópias da camada.

Símbolos e componentes

Em alguns dos exemplos de código acima, você deve ter notado um elemento que ainda não discutimos: um elemento <use>…</use> . <use> nos permite definir e reutilizar elementos em SVG, um pouco semelhante a Symbols no Illustrator e Sketch ou Components no Figma. Lembre-se de definir padrões, gradientes e filtros dentro das <defs>…</defs> para que possam ser usados ​​em alguma outra parte do seu código SVG? Na verdade, qualquer elemento SVG pode ser definido e reutilizado dessa maneira. Depois de definir uma forma ou um grupo, você pode consultá-lo no restante do documento quantas vezes quiser, por exemplo:

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

Você também pode reutilizar estruturas muito mais complexas usando uma tag <symbol>…</symbol> . O símbolo atua como um corpo separado dentro do nosso SVG e pode ter seu próprio atributo viewBox (veja Width, height e viewBox para referência).

Isso significa que os símbolos e componentes de nossas ferramentas de design serão exportados para símbolos SVG? No Illustrator – sim, funciona. No Sketch e no Figma — não, não. Por quê? Principalmente, porque os símbolos do Illustrator são bastante simples e podem ser facilmente traduzidos para SVG, enquanto os símbolos do Sketch e os componentes do Figma não são tão simples e exportar alguns de seus recursos (como sobreposições aninhadas) seria muito complicado ou até impossível.

Texto

Não seria um guia completo se não mencionamos a tipografia. Todas as ferramentas de design oferecem uma grande variedade de ferramentas relacionadas ao texto. O SVG, embora geralmente usado para gráficos, também suporta elementos de texto.

Illustrator, Sketch e Figma suportam a exportação de texto para SVG e calculam camadas de texto em elementos <text>…</text> em SVG. Os elementos de texto SVG são renderizados como quaisquer outros elementos gráficos, formas etc. com a única diferença é que eles são texto.

Assim como no CSS, podemos controlar todos os parâmetros básicos do texto, como peso, altura da linha ou alinhamento. Na verdade, se você sabe como estilizar texto em CSS, já sabe como fazê-lo em SVG. No entanto, pode parecer um pouco antiquado. Primeiramente, todos os parâmetros devem ser definidos em atributos inline, de forma semelhante aos padrões de ouro do HTML 3.2. Em segundo lugar, não há atalhos. Por exemplo, você não encontrará nada parecido com uma propriedade CSS de font . Isso porque os atributos de texto SVG são na verdade baseados na especificação CSS 2, que nos leva de volta aos anos 90 e são muito mais antigos que o CSS que conhecemos hoje.

No entanto, todos esses atributos estão sendo exportados perfeitamente das ferramentas de design toda vez que queremos que alguma camada de texto se torne código SVG.

Fontes personalizadas

Infelizmente, as coisas ficam um pouco complicadas quando se trata de fontes personalizadas. Antigamente, quando o padrão SVG 1 estava sendo criado, os tipos de letra personalizados não eram uma coisa comum na web. Todo mundo usava fontes padrão, como Tahoma, Verdana ou Courier. Tornar-se extravagante e usar fontes que as pessoas não tinham em suas máquinas por padrão, geralmente significava rasterizá-las impiedosamente e usá-las como imagens. No entanto, o SVG implementou seu próprio formato de fontes, chamado de fontes SVG. Hoje, 18 anos após a publicação do SVG 1.0, as fontes SVG não são mais suportadas na maioria dos principais navegadores.

Felizmente para nós, o SVG funciona muito bem com CSS, o que significa que podemos usar fontes da web em vez de fontes SVG, por exemplo:

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

Deixe-me não entrar em detalhes sobre a implementação de fontes da web aqui, além de uma nota crucial: não se esqueça disso. Em outras palavras, se você usa fontes personalizadas em seu SVG, precisa se lembrar de fornecer essas fontes ao cliente, da mesma forma que em HTML/CSS.

Fontes de contorno

Pode-se argumentar que muito mais fácil do que guerrear sobre fontes e tudo, seria delinear todas as camadas de texto e não se preocupar com elas para sempre. No entanto, existem pelo menos algumas boas razões para não alterar seu texto para formas:

1. Você não pode editar o texto contornado — antes nem depois da exportação.
   Trabalhando com texto delineado, você precisa se lembrar de manter uma cópia editável em seu arquivo do Illustrator, Sketch ou Figma o tempo todo. Caso contrário, você não poderá editar suas camadas de texto, uma vez que estejam contornadas. Isso adiciona complexidade desnecessária ao processo. Sem mencionar a edição do texto contornado após a exportação do SVG. O texto em SVG pode ser atualizado a qualquer momento. O texto delineado requer a abertura do arquivo de origem toda vez que você quiser fazer a menor alteração na cópia.
2. O texto destacado não está acessível .
   O texto em SVG, assim como outros elementos de texto na web, pode ser lido por leitores de tela e outras tecnologias acessíveis. Ao delinear camadas de texto, você impede que as pessoas usem essas tecnologias para acessar seu conteúdo.
3. As pessoas esperam que o texto seja texto .
   A maioria das pessoas que usa a web não sabe absolutamente nada sobre SVG, HTML ou ferramentas de design. Se eles virem o texto, eles esperam que seja exatamente isso. Eles podem querer selecioná-lo, copiá-lo ou colocá-lo em um mecanismo de pesquisa. Tudo isso é possível com texto em SVG — a menos que você o delineie.
4. Não se esqueça do SEO .
   O texto em SVG também é acessível e usado por mecanismos de pesquisa. Ao delinear o texto, você torna seu conteúdo menos pesquisável e potencialmente menos visível para o público.

Resumo

Muito obrigado por me acompanhar em uma jornada pelos meandros do trabalho com SVG e ferramentas de design. Este artigo definitivamente não cobre todo o espectro do tópico, embora deva ser suficiente para lidar com os casos de uso mais comuns. Se você tiver alguma dúvida ou pergunta sobre as coisas que não foram mencionadas aqui, não hesite em postá-las nos comentários!