# SVG vs PNG: vetor ou píxeis para logótipos e gráficos [Canonical HTML page](https://gradiently.design/pt-pt/guide/svg-vs-png) Um SVG é um conjunto de instruções de desenho. Um PNG é uma grelha fixa de pontos. Esta diferença decide que ficheiro pertence ao teu site, à tua embalagem e ao teu Instagram. ## The short version - O SVG é um formato vetorial que descreve formas com matemática, por isso fica perfeitamente nítido em qualquer tamanho. - O PNG é um formato raster feito de uma grelha fixa de píxeis, por isso fica desfocado ou aos blocos quando ampliado além do seu tamanho. - Usa SVG para logótipos, ícones, ilustrações simples e gráficos de interface em sites e em impressão. - Usa PNG para fotografias, texturas, arte complexa e tudo o que carregas em redes sociais, que não aceitam SVG. - Um bom kit de logótipo tem os dois: um SVG principal e exportações PNG nos tamanhos que cada sítio precisa. **SVG vs PNG** é, na verdade, vetor contra píxeis. Um ficheiro SVG guarda formas como instruções (desenha aqui um círculo, preenche-o com esta cor), por isso um navegador ou uma impressora redesenha-o com nitidez em qualquer tamanho, de um favicon de 16 píxeis a uma tabuleta de loja. Um PNG guarda uma grelha fixa de píxeis coloridos, por isso fica perfeito no seu tamanho e desfocado quando o ampliares. Usa SVG para logótipos, ícones e gráficos simples na web e em impressão. Usa PNG para fotos, arte com textura e tudo o que carregas nas redes sociais. ## O que é realmente um ficheiro SVG SVG significa Scalable Vector Graphics e é texto simples. Abre um num editor de código e vais ver marcação legível, não ruído. É por isso que os SVG são minúsculos para formas simples, que podes mudar-lhes a cor com CSS e que os motores de busca e os leitores de ecrã conseguem ler o texto que contêm. ```html ``` Um símbolo de logótipo completo em poucas centenas de bytes. O `viewBox` define o sistema de coordenadas do desenho; o tamanho a que aparece depende da página. Um PNG do mesmo símbolo precisa de um ficheiro para cada tamanho em que o queiras nítido, e nenhum pode mudar de cor sem exportar de novo. A [documentação 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 traçados | Raster: uma grelha de píxeis | | Escala | Nítido em todos os tamanhos | Nítido no seu tamanho, desfocado se ampliado | | Transparência | Sim | Sim, com canal alfa completo | | Fotos e textura | Fraco: os ficheiros ficam enormes ou inviáveis | Excelente | | Editável com código | Sim: cores, animação, CSS | Não | | Carregamento nas redes sociais | Não aceite | Aceite em todo o lado | | Tamanho típico, logótipo simples | 1 a 10 KB | 10 a 100 KB por tamanho | ## SVG ou PNG para um logótipo Guarda o logótipo principal em SVG. É o único ficheiro que serve todos os usos futuros: o cabeçalho de um site, um banner de 4 metros, um bordado, um papel timbrado, um favicon. Depois exporta PNG a partir dele para os sítios que não aceitam vetores, sobretudo redes sociais, assinaturas de email e algumas ferramentas de apresentação. | Onde vai o logótipo | Ficheiro | Tamanho | | --- | --- | --- | | Cabeçalho e rodapé do site | SVG | Ajusta-se à escala | | Favicon | SVG mais PNG de reserva | ICO a 32×32, PNG a 180×180, 192×192 e 512×512 | | Foto de perfil no Instagram, LinkedIn ou X | PNG | Quadrado de 1080×1080, com o símbolo dentro do círculo central | | Assinatura de email | PNG | Até 600×200, exportado ao dobro do tamanho de apresentação | | Gráfica, fabricante de tabuletas, merchandising | SVG ou PDF | Vetorial, qualquer tamanho | Um SVG principal e um punhado de exportações PNG. [Tamanhos de logótipo](https://gradiently.design/pt-pt/guide/logo-sizes) e [variações de logótipo](https://gradiently.design/pt-pt/guide/logo-variations) vão mais longe. Uma foto de perfil quadrada com um logótipo simples em texto, centrado num fundo de gradiente As fotos de perfil são sempre PNG ou JPG. Exporta o logótipo em grande, 1080×1080, para ficar nítido em ecrãs de alta densidade. ## Quando o PNG é a escolha certa O vetor só funciona quando a imagem se pode descrever com formas. Assim que uma imagem tem detalhe fotográfico, luz suave, grão ou milhares de variações subtis de cor, um PNG é mais pequeno e mais fiel. Converter uma foto em SVG por vectorização dá um ficheiro mais pesado e pior. - Fotografias e colagens de fotos. - Arte com textura: grão, papel, pinceladas, efeitos de película. - Posts, stories e carrosséis, já que as plataformas só aceitam píxeis. - Capturas de ecrã e tudo o que é captado de um ecrã. - Fundos ricos com luz e ruído em camadas. Um gráfico quadrado com a legenda Vetor, a representar formas planas indicadas para SVG Formas planas, arestas limpas, poucas cores: território ideal do SVG. Um gráfico quadrado com a legenda Píxeis num gradiente com textura, a representar arte indicada para PNG O grão, a luz suave e a textura de materiais pertencem a um PNG. ## SVG vs PNG para um site Num site, usa SVG inline ou um ficheiro SVG para logótipos, ícones e ilustrações, e formatos modernos para fotos. Os ícones SVG escalam com o texto, aceitam `currentColor` para seguirem o teu tema e não precisam de ficheiros separados para ecrãs de alta densidade. Para imagens raster, o [WebP](https://gradiently.design/pt-pt/guide/webp-images) costuma ser melhor escolha do que o PNG nas tuas páginas. ### Evitar - Um logótipo PNG esticado para preencher um cabeçalho largo - Uma foto convertida num SVG gigante - Carregar ficheiros SVG que não fizeste sem os higienizar - Ícones em PNG que precisam de cópias 1x, 2x e 3x ### Fazer - Um logótipo SVG com a largura definida em CSS - Fotos em WebP ou JPG ao tamanho a que são apresentadas - Tratar um SVG carregado por utilizadores como código, porque pode conter scripts - Ícones SVG com `fill: currentColor` > **O SVG pode transportar código** Como o SVG é marcação, um ficheiro de origem desconhecida pode incluir scripts. Só permitas carregamentos de SVG no teu site se forem higienizados, ou converte-os em PNG ao carregar. ## Como converter SVG em PNG 1. **Decide o maior tamanho de que precisas** Uma foto de perfil a 1080×1080 ou uma assinatura de email a 1200×400 (o dobro dos 600×200 de apresentação). Exporta uma vez a esse tamanho em vez de ampliares depois. 2. **Exporta a partir da origem** No Figma, no Illustrator ou no Inkscape, exporta o frame como PNG ao tamanho escolhido. Exportar a partir do vetor mantém todas as arestas nítidas. 3. **Mantém a transparência ligada** Deixa o fundo vazio para o PNG ter canal alfa. Vê [fundo transparente](https://gradiently.design/pt-pt/guide/transparent-background) para o confirmares. 4. **Verifica a 100%** Olha para os traços finos e o texto pequeno ao tamanho real. Se se desfizerem, simplifica o logótipo para usos pequenos em vez de entregares um ficheiro pastoso. Fazer o caminho inverso, de PNG para SVG, não é uma conversão, é um redesenho. A vectorização automática funciona num logótipo forte e plano e falha em tudo o que tenha textura ou arestas suaves. Se o teu logótipo só existe em PNG, manda-o redesenhar uma vez como vetor; todos os ficheiros seguintes ficam melhores por isso. As exportações Pro do Gradiently cobrem os dois lados: um design pode sair em SVG para a web e a impressão, ou em PNG transparente para as plataformas, a partir do mesmo ficheiro. [Exportar SVG e PNG transparente](https://gradiently.design/pt-pt/guide/export-svg-transparent-png) mostra como, e [PNG vs JPG](https://gradiently.design/pt-pt/guide/png-vs-jpeg) resolve a outra escolha comum. ## FAQ ### O SVG é melhor do que o PNG para um logótipo? Para o ficheiro principal, sim: um logótipo SVG fica nítido em todos os tamanhos e pode mudar de cor. Exporta cópias PNG para redes sociais e email, que não aceitam SVG. ### Posso carregar um SVG no Instagram? Não. O Instagram e outras plataformas sociais aceitam PNG, JPG e vídeo. Exporta um PNG ao tamanho da plataforma, como 1080×1080 para um post quadrado. ### O SVG é mais pequeno do que o PNG? Para formas simples, como logótipos e ícones, um SVG costuma ser muito mais pequeno. Para fotos e imagens com textura, um PNG ou JPG é mais pequeno e mais fiel. ### O SVG suporta transparência? Sim. Tudo o que não é desenhado num SVG é transparente, por isso assenta bem em qualquer fundo. ### Posso converter um logótipo PNG em SVG? Só por vectorização ou redesenho. A vectorização automática funciona em logótipos fortes e planos; os logótipos detalhados ou com textura têm de ser redesenhados à mão como vetores.