Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Casos excepcionais de SVG vs PNG

Referente ao curso Performance Web I: otimizando o front-end, no capítulo Otimizações de Imagens e atividade O melhor formato

por Giulivan Chaves de Sousa
| 258.8k xp | 38 posts

Olá. Tenho uma dúvida que gostaria de sanar aqui.

Um amigo uma vez teve um problema de desempenho, relatando que a imagem em SVG estava demorando para ser renderizada na tela. A imagem SVG era grande, mas iria ocupar um espaço pequeno na tela (por volta de 400x800). Sugeri editar a imagem no Figma, reduzindo o tamanho para o desejado e exportando como PNG, e isso resolveu o problema dele.

Desde então compartilhei este caso com algumas pessoas e todas discordaram dessa resolução, colocando o SVG como solução absoluta sobre o PNG em todos os casos.

Eu mesmo aprendi que SVG é um cálculo de pontos, que isso é feito instantaneamente na tela, e que por via de regra é mais viável que PNG quando se trata de tamanho e desempenho.

Mas e nessa hipótese um SVG maior e mais complexo, com centenas ou milhares de vetores, esse arquivo pode pesar para ser renderizado na tela?

Então, há casos, mesmo que raros, em que o PNG pode ser uma opção mais viável que SVG? Ou realmente o uso do SVG é absoluto sobre o PNG?

1 resposta
solução!
por Lorena Garcia
| 8260.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi Giulivan! Tudo bem?

Ótima pergunta! O uso de SVG versus PNG é um tema interessante e pode variar dependendo do contexto. Embora o SVG seja geralmente preferido devido à sua escalabilidade e desempenho, existem casos em que o PNG pode ser uma opção mais viável.

No exemplo que você mencionou, onde o SVG era grande e demorava para ser renderizado, a opção de exportá-lo como PNG e reduzir o tamanho resolveu o problema. Isso pode acontecer quando o SVG contém muitos vetores complexos, o que pode exigir mais recursos de processamento para ser renderizado na tela. Nesses casos, o PNG pode ser uma alternativa mais eficiente.

No entanto, é importante ressaltar que essa não é uma regra absoluta. O SVG ainda é amplamente utilizado e recomendado devido à sua natureza vetorial, que permite escalabilidade sem perda de qualidade. Além disso, o SVG é ideal para animações e interações complexas.

Então, embora o SVG seja geralmente a melhor opção em termos de desempenho e tamanho de arquivo, existem situações específicas em que o PNG pode ser uma alternativa mais viável. É importante considerar o contexto e as necessidades do projeto ao escolher entre os dois formatos.

Espero ter ajudado.

Um abraço e bons estudos.