6 falhas comuns de SVG (e como corrigi-las)

Alguém recentemente me perguntou como eu abordo a depuração de SVGs embutidos. Por fazer parte do DOM, podemos inspecionar qualquer SVG embutido em qualquer navegador DevTools. E por causa disso, temos a capacidade de avaliar as coisas e descobrir possíveis problemas ou oportunidades para otimizar o SVG.

Mas, às vezes, nem conseguimos ver nossos SVGs. Nesses casos, há seis coisas específicas que procuro durante a depuração.

1. A viewBox valores

A viewBox é um ponto comum de confusão ao trabalhar com SVG. Tecnicamente, não há problema em usar SVG embutido sem ele, mas perderíamos um de seus benefícios mais significativos: escalar com o contêiner. Ao mesmo tempo, pode funcionar contra nós quando configurado incorretamente, resultando em recortes indesejados.

Os elementos estão lá quando são recortados — eles estão apenas em uma parte do sistema de coordenadas que não vemos. Se fôssemos abrir o arquivo em algum programa de edição gráfica, ficaria assim:

A maneira mais fácil de consertar isso? Adicionar overflow="visible" ao SVG, seja em nossa folha de estilo, embutido no style atributo ou diretamente como um atributo de apresentação SVG. Mas se também aplicarmos um background-color ao SVG ou se tivermos outros elementos em torno dele, as coisas podem parecer um pouco estranhas. Neste caso, a melhor opção será editar o viewBox para mostrar a parte do sistema de coordenadas que estava oculta:

Existem algumas coisas adicionais sobre o viewBox que valem a pena cobrir enquanto estamos no tópico:

Como é que viewBox funciona?

SVG é uma tela infinita, mas podemos controlar o que vemos e como vemos por meio da janela de visualização e do viewBox.

A janela de exibição é uma moldura de janela na tela infinita. Suas dimensões são definidas por width e height atributos, ou em CSS com o correspondente width e height propriedades. Podemos especificar qualquer unidade de comprimento que quisermos, mas se fornecermos números sem unidades, o padrão será pixels.

A viewBox é definido por quatro valores. Os dois primeiros são o ponto de partida no canto superior esquerdo (x e y valores, números negativos permitidos). Estou editando para reformular a imagem. Os dois últimos são a largura e a altura do sistema de coordenadas dentro da viewport — é aqui que podemos editar a escala da grade (que abordaremos na seção sobre Zoom).

Aqui está uma marcação simplificada mostrando o SVG viewBox e os votos de width e height atributos ambos definidos no <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

Reenquadramento

Então, é isso:

<svg viewBox="0 0 700 700">

… mapeia para isto:

<svg viewBox="start-x-axis start-y-axis width height">

A viewport que vemos começa onde 0 no eixo x e 0 no encontro do eixo y.

Ao mudar isso:

<svg viewBox="0 0 700 700">

…para isso:

<svg viewBox="300 200 700 700">

…a largura e a altura permanecem as mesmas (700 unidades cada), mas o início do sistema de coordenadas está agora no 300 ponto no eixo x e 200 no eixo y.

No vídeo a seguir, estou adicionando um vermelho <circle> ao SVG com seu centro no 300 ponto no eixo x e 200 no eixo y. Observe como mudar o viewBox as coordenadas para os mesmos valores também alteram o posicionamento do círculo no canto superior esquerdo do quadro, enquanto o tamanho renderizado do SVG permanece o mesmo (700×700). Tudo o que fiz foi “reenquadrar” as coisas com o viewBox.

Zoom

Podemos alterar os dois últimos valores dentro do viewBox para ampliar ou reduzir a imagem. Quanto maiores os valores, mais unidades SVG são adicionadas para caber na viewport, resultando em uma imagem menor. Se quisermos manter uma proporção de 1:1, nosso viewBox largura e altura devem corresponder aos valores de largura e altura da janela de visualização.

Vamos ver o que acontece no Illustrator quando alteramos esses parâmetros. A prancheta é o viewport que é representado por um quadrado branco de 700px. Todo o resto fora dessa área é nossa tela SVG infinita e é cortada por padrão.

A Figura 1 abaixo mostra um ponto azul em 900 ao longo do eixo x e 900 ao longo do eixo y. Se eu mudar os dois últimos viewBox valores de 700 para 900 como isso:

<svg viewBox="300 200 900 900" width="700" height="700">

…então o ponto azul está quase totalmente de volta à vista, como visto na Figura 2 abaixo. Nossa imagem foi reduzida porque aumentamos os valores de viewBox, mas as dimensões reais de largura e altura do SVG permaneceram as mesmas, e o ponto azul retornou mais perto da área não recortada.

Há um quadrado rosa como evidência de como a grade é dimensionada para caber na viewport: a unidade fica menor e mais linhas de grade se encaixam na mesma área da viewport. Você pode jogar com os mesmos valores na Pen a seguir para ver esse trabalho em ação:

2. Faltando width e height

Outra coisa comum que observo ao depurar SVG embutido é se a marcação contém o width or height atributos. Isso não é grande coisa em muitos casos, a menos que o SVG esteja dentro de um contêiner com posicionamento absoluto ou um contêiner flexível (como o Safari calcula o SVG width valor com 0px em vez de auto). Excluindo width or height nesses casos nos impede de ver a imagem completa, como podemos ver por abrindo esta demonstração do CodePen e comparando-o no Chrome, Safari e Firefox (toque nas imagens para ampliar).

A solução? Adicione uma largura ou altura, seja como um atributo de apresentação, embutido no atributo de estilo ou em CSS. Evite usar a altura por si só, principalmente quando estiver definida como 100% or auto. Outra solução alternativa é definir o direito e valores à esquerda.

Você pode brincar com a seguinte caneta e combine as diferentes opções.

3. Inadvertido fill e stroke cores

Também pode ser que estejamos aplicando cor ao <svg> tag, seja um estilo inline ou proveniente de CSS. Tudo bem, mas pode haver outros valores de cor em toda a marcação ou estilos que conflitem com a cor definida no <svg>, fazendo com que as peças fiquem invisíveis.

É por isso que costumo procurar o fill e stroke atributos na marcação do SVG e eliminá-los. O vídeo a seguir mostra um SVG I estilizado em CSS com um vermelho fill. Há alguns casos em que partes do SVG são preenchidas em branco diretamente na marcação que removi para revelar as partes que faltam.

4. IDs ausentes

Este pode parecer super óbvio, mas você ficaria surpreso com a frequência com que o vejo surgir. Digamos que criamos um arquivo SVG no Illustrator e fomos muito diligentes em nomear nossas camadas para que você obtenha bons IDs correspondentes na marcação ao exportar o arquivo. E digamos que planejamos estilizar esse SVG em CSS conectando-o a esses IDs.

Essa é uma boa maneira de fazer as coisas. Mas muitas vezes eu vi o mesmo arquivo SVG exportado uma segunda vez para o mesmo local e os IDs são diferentes, geralmente ao copiar/colar os vetores diretamente. Talvez uma nova camada tenha sido adicionada ou uma das existentes tenha sido renomeada ou algo assim. Seja qual for o caso, as regras CSS não correspondem mais aos IDs na marcação SVG, fazendo com que o SVG seja renderizado de maneira diferente do esperado.

Em arquivos SVG grandes, podemos achar difícil encontrar esses IDs. Este é um bom momento para abrir o DevTools, inspecionar a parte do gráfico que não está funcionando e ver se esses IDs ainda correspondem.

Então, eu diria que vale a pena abrir um arquivo SVG exportado em um editor de código e compará-lo com o original antes de trocar as coisas. Aplicativos como Illustrator, Figma e Sketch são inteligentes, mas isso não significa que não somos responsáveis ​​por examiná-los.

5. Lista de verificação para recorte e mascaramento

Se um SVG for cortado inesperadamente e o viewBox verifica bem, eu costumo olhar para o CSS para clip-path or mask propriedades que podem interferir na imagem. É tentador continuar olhando para a marcação inline, mas é bom lembrar que o estilo de um SVG pode estar acontecendo em outro lugar.

Corte e mascaramento de CSS permitem “ocultar” partes de uma imagem ou elemento. Em SVG, <clipPath> é uma operação vetorial que corta partes de uma imagem sem resultados intermediários. o <mask> tag é uma operação de pixel que permite efeitos de transparência, semitransparência e bordas desfocadas.

Esta é uma pequena lista de verificação para casos de depuração em que recorte e mascaramento estão envolvidos:

• Certifique-se de que o caminho de recorte (ou máscara) e o gráfico se sobreponham. As partes sobrepostas são o que é exibido.
• Se você tiver um caminho complexo que não cruza seu gráfico, tente aplicar transformações até que correspondam.
• Você ainda pode inspecionar o código interno com o DevTools, mesmo que o <clipPath> or <mask> não são renderizados, então use-o!
• Copie a marcação dentro <clipPath> e <mask> e cole antes de fechar o </svg> marcação. Em seguida, adicione um fill a essas formas e verifique as coordenadas e dimensões do SVG. Se você ainda não vê a imagem, tente adicionar overflow="hidden" ao <svg> tag.
• Verifique se um único ID é usado para <clipPath> or <mask>, e que o mesmo ID é aplicado às formas ou grupo de formas que são recortadas ou mascaradas. Um ID incompatível irá quebrar a aparência.
• Verifique se há erros de digitação na marcação entre as <clipPath> or <mask> Tag.
• fill, stroke, opacity, ou alguns outros estilos aplicados aos elementos dentro <clipPath> são inúteis — a única parte útil é a geometria da região de preenchimento desses elementos. É por isso que se você usar um <polyline> vai se comportar como um <polygon> e se você usar um <line> você não verá nenhum efeito de recorte.
• Se você não vir sua imagem depois de aplicar um <mask>, certifique-se de que o fill do conteúdo de mascaramento não é totalmente preto. A luminância do elemento de máscara determina a opacidade do gráfico final. Você poderá ver através das partes mais claras e as partes mais escuras ocultarão o conteúdo da sua imagem.

Você pode brincar com elementos mascarados e recortados em esta caneta.

6. Espaços para nome

Você sabia que SVG é uma linguagem de marcação baseada em XML? Bem, é! O namespace para SVG é definido no xmlns atributo:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

Há muito o que saber sobre namespace em XML e o MDN tem uma ótima cartilha sobre isso. Basta dizer que o namespace fornece contexto ao navegador, informando que a marcação é específica para SVG. A ideia é que os namespaces ajudem a evitar conflitos quando mais de um tipo de XML estiver no mesmo arquivo, como SVG e XHTML. Este é um problema muito menos comum em navegadores modernos, mas pode ajudar a explicar os problemas de renderização SVG em navegadores mais antigos ou navegadores como o Gecko, que são rígidos ao definir doctypes e namespaces.

A especificação SVG 2 não requer namespace ao usar a sintaxe HTML. Mas é crucial se o suporte para navegadores legados for uma prioridade — além disso, não custa nada adicioná-lo. Dessa forma, quando o <html> do elemento xmlns atributo for definido, ele não entrará em conflito nesses casos raros.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Isso também é verdade ao usar SVG embutido em CSS, como defini-lo como uma imagem de plano de fundo. No exemplo a seguir, um ícone de marca de seleção aparece na entrada após a validação bem-sucedida. É assim que o CSS se parece:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Quando removemos o namespace dentro do SVG na propriedade background, a imagem desaparece:

Outro prefixo de namespace comum é xlink:href. Usamos muito quando referenciamos outras partes do SVG como: padrões, filtros, animações ou gradientes. A recomendação é começar a substituí-lo por href já que o outro está sendo obsoleto desde o SVG 2, mas pode haver problemas de compatibilidade com navegadores mais antigos. Nesse caso, podemos usar os dois. Apenas lembre-se de incluir o namespace xmlns:xlink="http://www.w3.org/1999/xlink" se você ainda estiver usando xlink:href.

Aumente o nível de suas habilidades em SVG!

Espero que essas dicas ajudem a economizar muito tempo se você estiver solucionando problemas de SVGs inline renderizados incorretamente. Estas são apenas as coisas que eu procuro. Talvez você tenha diferentes bandeiras vermelhas que procura - em caso afirmativo, diga-me nos comentários!

O ponto principal é que vale a pena ter pelo menos uma compreensão básica de as várias maneiras como o SVG pode ser usado. Desafios CodePen muitas vezes incorporam SVG e oferecem boas práticas. Aqui estão mais alguns recursos para subir de nível:

Sugiro seguir algumas pessoas para qualidade relacionada ao SVG:

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/