# SVG ou PNG: vetor ou pixels para logos e gráficos [Canonical HTML page](https://gradiently.design/pt-br/guide/svg-vs-png) Um SVG é um conjunto de instruções de desenho. Um PNG é uma grade fixa de pontos. Essa única diferença decide qual arquivo vai no seu site, na sua embalagem e no seu Instagram. ## The short version - O SVG é um formato vetorial que descreve formas com matemática, então fica perfeitamente nítido em qualquer tamanho. - O PNG é um formato raster, feito de uma grade fixa de pixels, então fica borrado ou serrilhado quando ampliado além do seu tamanho. - Use SVG para logos, ícones, ilustrações simples e gráficos de interface em sites e impressos. - Use PNG para fotografias, texturas, arte complexa e tudo que vai para plataformas sociais, que não aceitam SVG. - Um bom kit de logo contém os dois: um SVG mestre e exportações em PNG nos tamanhos que cada lugar pede. **SVG vs PNG** é, no fundo, vetor contra pixels. Um arquivo SVG guarda formas como instruções (desenhe um círculo aqui, preencha com esta cor), então um navegador ou uma impressora o redesenha com nitidez em qualquer tamanho, de um favicon de 16 pixels a uma placa de loja. Um PNG guarda uma grade fixa de pixels coloridos, então fica perfeito no próprio tamanho e borrado quando ampliado. Use SVG para logos, ícones e gráficos simples na web e em impressos. Use PNG para fotos, arte com textura e tudo que você envia para redes sociais. ## O que um arquivo SVG realmente é SVG vem de Scalable Vector Graphics, e é texto simples. Abra um num editor de código e você verá marcação legível, não ruído. É por isso que SVGs são minúsculos para formas simples, que dá para mudar a cor deles com CSS e que mecanismos de busca e leitores de tela conseguem ler o texto dentro deles. ```html ``` Um símbolo de logo completo em algumas centenas de bytes. O `viewBox` define o sistema de coordenadas do desenho; o tamanho em que ele aparece fica por conta da página. Um PNG do mesmo símbolo precisa de um arquivo separado para cada tamanho em que você quer nitidez, e nenhum deles pode ser recolorido sem exportar de novo. A [documentação de SVG da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG) cobre o formato por inteiro. ## SVG vs PNG lado a lado | Propriedade | SVG | PNG | | --- | --- | --- | | Tipo | Vetorial: formas e caminhos | Raster: uma grade de pixels | | Escala | Nítido em todos os tamanhos | Nítido no próprio tamanho, borrado quando ampliado | | Transparência | Sim | Sim, com canal alfa completo | | Fotos e textura | Ruim: os arquivos ficam enormes ou inviáveis | Excelente | | Editável com código | Sim: cores, animação, CSS | Não | | Envio para redes sociais | Não aceito | Aceito em todo lugar | | Tamanho típico, logo simples | 1 a 10 KB | 10 a 100 KB por tamanho | ## SVG ou PNG para um logo Guarde o logo mestre em SVG. É o único arquivo que atende a todos os usos futuros: o cabeçalho de um site, um banner de 4 metros, bordado, papel timbrado, um favicon. Depois exporte PNGs a partir dele para os lugares que não aceitam vetores, sobretudo plataformas sociais, assinaturas de e-mail e algumas ferramentas de apresentação. | Onde o logo vai | Arquivo | Tamanho | | --- | --- | --- | | Cabeçalho e rodapé do site | SVG | Escala para se ajustar | | Favicon | SVG mais PNGs de reserva | ICO em 32×32, PNGs em 180×180, 192×192 e 512×512 | | Foto de perfil do Instagram, LinkedIn ou X | PNG | Quadrado de 1080×1080, mantenha o símbolo dentro do círculo central | | Assinatura de e-mail | PNG | Até 600×200, exportado com o dobro do tamanho de exibição | | Gráfica, fabricante de placas, brindes | SVG ou PDF | Vetor, qualquer tamanho | Um SVG mestre e um punhado de PNGs exportados. [Tamanhos de logo](https://gradiently.design/pt-br/guide/logo-sizes) e [variações de logo](https://gradiently.design/pt-br/guide/logo-variations) vão além. Foto de perfil quadrada com um logotipo simples centralizado sobre um fundo em degradê Fotos de perfil são sempre PNG ou JPG. Exporte o logo grande, em 1080×1080, para ele continuar nítido em telas de alta densidade. ## Quando o PNG é a escolha certa O vetor só funciona quando a imagem pode ser descrita como formas. Assim que uma imagem tem detalhe fotográfico, luz suave, granulado ou milhares de mudanças sutis de cor, um PNG é menor e mais fiel. Vetorizar uma foto num SVG produz um arquivo ao mesmo tempo mais pesado e pior. - Fotografias e colagens de fotos. - Arte com textura: granulado, papel, pinceladas, efeitos de filme. - Posts, stories e carrosséis de redes sociais, já que as plataformas só aceitam pixels. - Capturas de tela e tudo que é capturado de uma tela. - Fundos ricos, com luz em camadas e ruído. Gráfico quadrado com a palavra Vetor, representando formas chapadas adequadas ao SVG Formas chapadas, bordas limpas, poucas cores: território ideal do SVG. Gráfico quadrado com a palavra Pixels sobre um degradê texturizado, representando arte adequada ao PNG Granulado, luz suave e textura de material pertencem a um PNG. ## SVG vs PNG para um site Num site, use SVG embutido ou um arquivo SVG para logos, ícones e ilustrações, e formatos modernos para fotos. Ícones SVG escalam com o texto, podem usar `currentColor` para seguir o seu tema e dispensam arquivos separados para telas de alta densidade. Para imagens raster, o [WebP](https://gradiently.design/pt-br/guide/webp-images) costuma ser melhor que o PNG nas suas próprias páginas. ### Evite - Um logo em PNG esticado para preencher um cabeçalho largo - Uma foto vetorizada num SVG enorme - Aceitar SVGs que você não criou sem higienizá-los - Ícones em PNG que precisam de cópias 1x, 2x e 3x ### Faça - Logo em SVG com a largura definida em CSS - Fotos em WebP ou JPG no tamanho em que aparecem - Trate SVG enviado por usuários como código, porque ele pode conter scripts - Ícones SVG com `fill: currentColor` > **O SVG pode carregar código** Como o SVG é marcação, um arquivo de origem desconhecida pode incluir scripts. Só permita envio de SVG no seu site se eles forem higienizados, ou converta-os em PNG no envio. ## Como converter SVG em PNG 1. **Decida o maior tamanho de que precisa** Uma foto de perfil em 1080×1080 ou uma assinatura de e-mail em 1200×400 (o dobro do tamanho de exibição, 600×200). Exporte uma vez nesse tamanho em vez de ampliar depois. 2. **Exporte a partir da origem** No Figma, no Illustrator ou no Inkscape, exporte o quadro como PNG no tamanho escolhido. Exportar do vetor mantém todas as bordas nítidas. 3. **Mantenha a transparência ligada** Deixe o fundo vazio para o PNG ter canal alfa. Veja [fundo transparente](https://gradiently.design/pt-br/guide/transparent-background) para conferir. 4. **Confira em 100%** Olhe os traços finos e o texto pequeno no tamanho real. Se eles se desfazerem, simplifique o logo para usos pequenos em vez de entregar um arquivo turvo. O caminho inverso, de PNG para SVG, não é uma conversão, é um redesenho. A vetorização automática funciona para um logo forte e chapado e falha em qualquer coisa com textura ou bordas suaves. Se o seu logo só existe em PNG, mande redesenhá-lo uma vez como vetor; todos os arquivos seguintes ficarão melhores. As exportações do Pro do Gradiently cobrem os dois lados: um design pode sair como SVG para a web e a impressão, ou como PNG transparente para plataformas, a partir do mesmo arquivo. [Exportar SVG e PNG transparente](https://gradiently.design/pt-br/guide/export-svg-transparent-png) mostra como, e [PNG vs JPG](https://gradiently.design/pt-br/guide/png-vs-jpeg) resolve a outra escolha comum. ## FAQ ### O SVG é melhor que o PNG para um logo? Para o arquivo mestre, sim: um logo em SVG fica nítido em todos os tamanhos e pode ser recolorido. Exporte cópias em PNG para redes sociais e e-mail, que não aceitam SVG. ### Posso enviar um SVG para o Instagram? Não. O Instagram e outras plataformas sociais aceitam PNG, JPG e vídeo. Exporte um PNG no tamanho da plataforma, como 1080×1080 para um post quadrado. ### O SVG é menor que o PNG? Para formas simples, como logos e ícones, um SVG costuma ser bem menor. Para fotos e imagens com textura, um PNG ou JPG é menor e mais preciso. ### O SVG aceita transparência? Sim. Tudo que não é desenhado num SVG é transparente, então ele se apoia bem sobre qualquer fundo. ### Posso converter um logo em PNG para SVG? Só vetorizando ou redesenhando. A vetorização automática funciona para logos fortes e chapados; logos detalhados ou com textura precisam ser redesenhados à mão como vetores.