# Exportar SVG e PNG com fundo transparente no Gradiently
[Canonical HTML page](https://gradiently.design/pt-pt/guide/export-svg-transparent-png)
Às vezes precisas do design sem a caixa à volta: um ficheiro escalável para um site, ou o teu texto e logótipo sobre fundo limpo para pôr por cima de outra coisa. Eis o que cada exportação te dá e o que não dá.
## The short version
- A exportação SVG do Gradiently mantém o texto como texto verdadeiro, nos seus tipos de letra incluídos no ficheiro, e mantém formas, ícones, gráficos e tabelas como vetores.
- Dentro de um SVG, o Mark e as fotografias são imagens, por isso o ficheiro escala na perfeição para texto e formas, mas não infinitamente para o fundo.
- Um SVG contém uma página, por isso um carrossel ou uma apresentação exporta um SVG por cada página escolhida.
- O fundo transparente exporta apenas os teus elementos como PNG, com o Mark de fora, pronto a pôr sobre outra imagem ou cor.
- As exportações SVG e PNG transparente fazem parte do Pro.
Para **exportar SVG** do Gradiently, abre um design no Studio, escolhe **Exportar** e seleciona **SVG**. O texto continua texto, nos seus tipos de letra incluídos no ficheiro; formas, ícones, gráficos e tabelas continuam vetores; o Mark e as fotografias entram como imagens lá dentro. Para um **PNG transparente**, escolhe PNG e ativa **Fundo transparente**: ficas só com os teus elementos sobre fundo limpo, com o Mark de fora. Ambos fazem parte do Pro.
## SVG, PNG ou PNG transparente
| Exportação | O que recebes | Para que usar |
| --- | --- | --- |
| **SVG** | Uma página como ficheiro escalável: texto vivo, formas vetoriais, o Mark como imagem | Sites, entregar um esquema a um programador, editar mais no Figma ou no Illustrator |
| **PNG** | O design inteiro em píxeis, até 4K | Publicar nas redes sociais, mensagens, tudo o que só precisa de ficar bem |
| **PNG transparente** | Só os teus elementos, sobre fundo limpo | Um conjunto de logótipo, um autocolante, texto para pôr sobre uma fotografia ou um vídeo |
Se só precisas de uma imagem do design, o PNG é mais simples. Usa SVG quando alguém vai editar ou escalar o ficheiro, e a transparência quando ele ficar por cima de outra coisa.
A diferença geral entre os dois formatos está em [SVG ou PNG](https://gradiently.design/pt-pt/guide/svg-vs-png). Este guia é sobre o que o Gradiently põe em cada ficheiro.
## O que fica vetorial numa exportação SVG
### Vetorial: nítido a qualquer tamanho
- Texto, como texto verdadeiro que podes selecionar e editar
- Tipos de letra, incluídos no ficheiro
- Formas e linhas
- Ícones
- Gráficos e tabelas
### Imagens dentro do SVG
- O Mark, o fundo vivo
- As fotografias que acrescentaste
- Qualquer tipo de letra cuja licença proíba a incorporação
Por isso um SVG é perfeito para um título que tem de ficar nítido num ecrã 4K, ou para um esquema que um programador vai construir numa página, e menos útil se esperas ampliar o fundo até ao tamanho de um outdoor. O Mark é desenhado como imagem no tamanho do próprio design; para um fundo maior, exporta antes um PNG num tamanho superior. Um Mark é um desenho vivo e não um conjunto fixo de formas vetoriais, e é por isso que não pode tornar-se um traçado.
> **Tipos de letra e licenças** Os tipos de letra da marca que carregas só viajam dentro do SVG quando a licença do próprio tipo de letra permite a incorporação. Se não permitir, o Gradiently desenha esse texto como píxeis, para o ficheiro continuar a ficar certo. [Licenciamento de tipos de letra](https://gradiently.design/pt-pt/guide/font-licensing) explica as indicações.
## Como exportar um SVG
1. **Escolhe a página** Um SVG contém uma página. Num carrossel ou numa apresentação, escolhe a página em Exportar; repete para as outras.
2. **Escolhe SVG** Abre **Exportar** e escolhe **SVG**, descrito como escalável, com o texto a continuar texto. A pré-visualização mostra o tamanho da página.
3. **Descarrega** Escolhe **Descarregar SVG**. O ficheiro fica onde o teu navegador guarda os descarregamentos.
4. **Usa-o na web** Coloca-o com uma etiqueta `img` para um gráfico fixo, ou incorpora-o no HTML quando quiseres estilizar o texto com CSS.
```html
```
Dá sempre texto alternativo verdadeiro a um SVG usado como imagem. A [referência SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) da MDN explica 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 faz dele o ficheiro certo para entregar a quem precisa de adaptar um esquema a um formato que o Gradiently não cobre, como um letreiro impresso com o seu próprio modelo, ou um programador a construir uma secção de página a partir do teu design. Envia o PNG ao lado como referência visual, para verem exatamente como o Mark deve ficar.
## Como exportar um PNG transparente
Escolhe **PNG** em Exportar e ativa **Fundo transparente**. Tudo o que colocaste, texto, logótipo, formas, fotografias, fica; o Mark fica de fora e o espaço à volta dos elementos é transparente. Escolhe um tamanho até 4K. Letras, um logótipo e um lema exportados assim podem ficar sobre uma fotografia de produto, um vídeo noutro editor ou um slide colorido.
Um design quadrado com o nome Northlight e um pequeno lema sobre um gradiente quente
O design completo: o nome da marca sobre o seu Mark, para publicar tal como está.
O mesmo nome Northlight e o mesmo lema postos sobre outro gradiente mais frio depois de uma exportação transparente
Exportados com Fundo transparente, o nome e o lema viajam sozinhos e podem ser postos sobre outro fundo, sem alterações.
- **Confirma a tinta face ao destino.** Texto claro exportado para um Mark escuro desaparece numa página branca. Passa para tinta escura antes de exportar se o destino for claro.
- **Ajusta a página ao conteúdo.** Um PNG transparente mantém o tamanho total da página. Reduz primeiro a página aos teus elementos se quiseres um ficheiro justo.
- **Guarda as duas versões do logótipo.** Exporta uma para fundos escuros e outra para claros, tal como um kit de marca guarda ambas. [Logótipo sobre fundo em gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background) mostra porquê.
- **Usa PNG, não JPEG.** O JPEG não tem transparência; um design transparente guardado como JPEG fica com fundo sólido.
## Colocar um PNG transparente na web
Um PNG transparente sobrepõe-se limpamente a qualquer fundo CSS, o que dá jeito quando o texto é fixo mas o fundo muda por secção ou por tema. Empilha-o com um gradiente por trás e a tua 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 por baixo. Muda o gradiente em cada página e a arte mantém-se.
Índigo, violeta e orquídea: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)`
O fundo do código acima: índigo profundo a passar por violeta até uma orquídea suave no canto inferior direito.
Para o caso inverso, um gradiente que se desvanece até à transparência em CSS, vê [gradiente CSS transparente](https://gradiently.design/pt-pt/guide/css-gradient-transparent). E quando precisares de todos os formatos num só sítio, [exportar designs](https://gradiently.design/pt-pt/guide/export-images-and-loops) cobre PNG, JPEG, PDF, vídeo e GIF em conjunto.
## FAQ
### Como exporto um SVG do Gradiently?
Abre o design, escolhe Exportar, depois SVG, e descarrega. Um SVG contém uma página, por isso escolhe primeiro a página num design com várias.
### A exportação SVG mantém o texto editável?
Sim. O texto continua texto verdadeiro, com os tipos de letra incluídos no ficheiro, a menos que a licença de um tipo de letra proíba a incorporação, caso em que esse texto é desenhado como píxeis.
### O fundo em gradiente é vetorial numa exportação SVG?
Não. O Mark é um desenho vivo, por isso entra como imagem dentro do SVG. Formas, ícones, gráficos, tabelas e texto são vetores.
### Como exporto um PNG com fundo transparente?
Escolhe PNG em Exportar e ativa Fundo transparente. Os teus elementos ficam e o Mark fica de fora, sobre fundo limpo.
### Posso exportar SVG no plano gratuito?
Não. As exportações gratuitas são PNG ou JPEG a 720p com uma pequena marca de água; SVG, PDF e PNG transparente fazem parte do Pro.