# Exportar SVG e PNG transparente no Gradiently
[Canonical HTML page](https://gradiently.design/pt-br/guide/export-svg-transparent-png)
Às vezes você precisa do design sem a caixa em volta: um arquivo escalável para um site, ou suas palavras e seu logo sobre fundo transparente para colocar sobre outra coisa. Veja o que cada exportação entrega e o que não entrega.
## The short version
- A exportação em SVG do Gradiently mantém as palavras como texto de verdade, nas próprias fontes embutidas no arquivo, e mantém formas, ícones, gráficos e tabelas como vetores.
- Dentro de um SVG, o Mark e as fotos são imagens, então o arquivo escala perfeitamente para texto e formas, mas não infinitamente para o fundo.
- Um SVG guarda uma página, então um carrossel ou uma apresentação exporta um SVG por página escolhida.
- A exportação com fundo transparente leva só os seus elementos em um PNG, sem o Mark, pronta para colocar sobre outra imagem ou cor.
- As exportações em SVG e em PNG transparente fazem parte do Pro.
Para **exportar SVG** do Gradiently, abra um design no Studio, escolha **Exportar** e selecione **SVG**. As palavras continuam palavras, nas próprias fontes embutidas no arquivo; formas, ícones, gráficos e tabelas continuam vetores; o Mark e as fotos entram como imagens dentro dele. Para um **PNG transparente**, escolha PNG e ative **Fundo transparente**: você recebe só os seus elementos sobre fundo transparente, sem o Mark. Os dois fazem parte do Pro.
## SVG, PNG ou PNG transparente
| Exportação | O que você recebe | Para que usar |
| --- | --- | --- |
| **SVG** | Uma página como arquivo escalável: texto editável, formas vetoriais, o Mark como imagem | Sites, entregar um layout a um desenvolvedor, editar depois no Figma ou no Illustrator |
| **PNG** | O design inteiro em pixels, até 4K | Publicar nas redes sociais, mensagens, qualquer coisa que só precisa ficar bonita |
| **PNG transparente** | Só os seus elementos, sobre fundo transparente | Um conjunto de logo, um adesivo, palavras para colocar sobre uma foto ou um vídeo |
Se você só precisa de uma imagem do design, o PNG é mais simples. Use SVG quando alguém for editar ou escalar o arquivo, e a transparência quando ele for ficar por cima de outra coisa.
O equilíbrio geral entre os dois formatos está em [SVG versus PNG](https://gradiently.design/pt-br/guide/svg-vs-png). Este guia trata do que o Gradiently coloca em cada arquivo.
## O que continua vetor numa exportação SVG
### Vetor: nítido em qualquer tamanho
- Palavras, como texto de verdade que você pode selecionar e editar
- Fontes, embutidas no arquivo
- Formas e linhas
- Ícones
- Gráficos e tabelas
### Imagens dentro do SVG
- O Mark, o fundo vivo
- Fotos que você adicionou
- Qualquer fonte cuja licença proíba a incorporação
Por isso o SVG é perfeito para um título que precisa continuar nítido numa tela 4K, ou para um layout que um desenvolvedor vai construir numa página, e menos útil se você pretende ampliar o fundo até o tamanho de um outdoor. O Mark é renderizado como imagem no tamanho do próprio design; para um fundo maior, exporte um PNG num tamanho maior. Um Mark é uma renderização viva, não um conjunto fixo de formas vetoriais, e por isso não pode virar um traçado.
> **Fontes e licenças** As fontes da marca que você envia só viajam dentro do SVG quando a licença da própria fonte permite a incorporação. Se não permitir, o Gradiently desenha esse texto como pixels, para o arquivo continuar com a aparência certa. [Licenciamento de fontes](https://gradiently.design/pt-br/guide/font-licensing) explica os indicadores.
## Como exportar um SVG
1. **Escolha a página** Um SVG guarda uma página. Num carrossel ou numa apresentação, escolha a página em Exportar e repita para as outras.
2. **Escolha SVG** Abra **Exportar** e escolha **SVG**, descrito como escalável, com texto que continua texto. A prévia mostra o tamanho da página.
3. **Baixe** Escolha **Baixar SVG**. O arquivo é salvo onde o seu navegador salva os downloads.
4. **Use na web** Coloque com uma tag `img` para um gráfico fixo ou inclua direto no HTML quando quiser estilizar o texto com CSS.
```html
```
Sempre dê um texto alternativo de verdade a um SVG usado como imagem. A [referência de SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) da MDN cobre o formato em profundidade.
Um SVG também abre em ferramentas de design como o Figma e o Illustrator, que leem o texto e as formas vetoriais como camadas editáveis. Isso o torna o arquivo certo para entregar a quem precisa adaptar um layout para um formato que o Gradiently não cobre, como uma placa impressa com template próprio, ou a um desenvolvedor que monta uma seção de página a partir do seu design. Envie o PNG junto, como referência visual, para que a pessoa veja exatamente como o Mark deve ficar.
## Como exportar um PNG transparente
Escolha **PNG** em Exportar e ative **Fundo transparente**. Tudo o que você colocou, palavras, logo, formas, fotos, permanece; o Mark fica de fora, e o espaço em volta dos seus elementos fica transparente. Escolha um tamanho de até 4K. Letras, um logo e um slogan exportados assim podem ficar sobre uma foto de produto, um vídeo em outro editor ou um slide colorido.
Um design quadrado com o logotipo Northlight e um pequeno slogan sobre um gradiente quente
O design completo: o logotipo sobre o seu Mark, para publicar como está.
O mesmo logotipo Northlight e o mesmo slogan sobre outro gradiente, mais frio, depois de uma exportação transparente
Exportados com Fundo transparente, o logotipo e o slogan viajam sozinhos e podem ser colocados sobre outro fundo, sem alterações.
- **Confira a tinta no lugar onde ela vai cair.** Palavras claras exportadas para um Mark escuro somem numa página branca. Troque para tinta escura antes de exportar se o destino for claro.
- **Recorte a página no conteúdo.** Um PNG transparente mantém o tamanho total da página. Reduza antes a página para perto dos seus elementos se quiser um arquivo justo.
- **Guarde as duas versões do logo.** Exporte uma para fundos escuros e outra para claros, como um kit de marca guarda as duas. [Logo sobre fundo em gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background) mostra por quê.
- **Use PNG, não JPEG.** O JPEG não tem transparência; um design transparente salvo como JPEG ganha um fundo sólido.
## Como colocar um PNG transparente na web
Um PNG transparente se sobrepõe sem problema a qualquer fundo em CSS, o que é útil quando as palavras são fixas, mas o pano de fundo muda por seção ou tema. Empilhe com um gradiente atrás e sua arte fica por cima.
```css
.launch-banner {
aspect-ratio: 1200 / 600;
background:
url("/images/launch-words.png") center / contain no-repeat,
linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%);
}
```
O PNG transparente fica por cima, o gradiente embaixo. Troque o gradiente em cada página e a arte continua a mesma.
Índigo, violeta e orquídea: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)`
O pano de fundo do código acima: índigo profundo passando por violeta até um orquídea suave no canto inferior direito.
Para o caso inverso, um gradiente que se dissolve em transparência no CSS, veja [gradiente transparente em CSS](https://gradiently.design/pt-br/guide/css-gradient-transparent). E quando você precisar de todos os formatos num só lugar, [exportar designs](https://gradiently.design/pt-br/guide/export-images-and-loops) cobre PNG, JPEG, PDF, vídeo e GIF juntos.
## FAQ
### Como exporto um SVG do Gradiently?
Abra o design, escolha Exportar, depois SVG, e baixe. Um SVG guarda uma página, então escolha a página primeiro num design de várias páginas.
### A exportação em SVG mantém o texto editável?
Mantém. As palavras continuam texto de verdade, com as fontes embutidas no arquivo, a menos que a licença de uma fonte proíba a incorporação, e nesse caso o texto é desenhado como pixels.
### O fundo em gradiente é vetorial numa exportação SVG?
Não. O Mark é uma renderização viva, então entra como imagem dentro do SVG. Formas, ícones, gráficos, tabelas e texto são vetores.
### Como exporto um PNG com fundo transparente?
Escolha PNG em Exportar e ative Fundo transparente. Seus elementos são mantidos e o Mark fica de fora, sobre fundo transparente.
### Posso exportar SVG no plano gratuito?
Não. As exportações gratuitas são PNG ou JPEG em 720p com uma pequena marca d’água; SVG, PDF e PNG transparente fazem parte do Pro.