# Exportar SVG y PNG transparente desde Gradiently
[Canonical HTML page](https://gradiently.design/es/guide/export-svg-transparent-png)
A veces necesitas el diseño sin la caja que lo rodea: un archivo escalable para una web, o tu texto y tu logo sobre un fondo transparente para colocarlos encima de otra cosa. Esto es lo que te da cada exportación, y lo que no.
## The short version
- La exportación SVG de Gradiently mantiene el texto como texto real con sus propias fuentes incluidas en el archivo, y mantiene formas, iconos, gráficos y tablas como vectores.
- Dentro de un SVG, el Mark y las fotos son imágenes, así que el archivo escala a la perfección el texto y las formas, pero no infinitamente el fondo.
- Un SVG contiene una página, así que un carrusel o una presentación exporta un SVG por cada página que elijas.
- Fondo transparente exporta solo tus elementos como PNG, sin el Mark, listos para colocar sobre otra imagen o color.
- Las exportaciones SVG y PNG transparente forman parte de Pro.
Para **exportar un SVG** desde Gradiently, abre un diseño en el Studio, elige **Exportar** y selecciona **SVG**. El texto sigue siendo texto, con sus propias fuentes incluidas en el archivo; las formas, iconos, gráficos y tablas siguen siendo vectores; el Mark y las fotos entran como imágenes dentro de él. Para un **PNG transparente**, elige PNG y activa **Fondo transparente**: obtienes solo tus elementos sobre un fondo transparente, sin el Mark. Ambas opciones forman parte de Pro.
## SVG, PNG o PNG transparente
| Exportación | Qué obtienes | Para qué usarla |
| --- | --- | --- |
| **SVG** | Una página como archivo escalable: texto real, formas vectoriales, el Mark como imagen | Webs, pasar una maqueta a un desarrollador, seguir editando en Figma o Illustrator |
| **PNG** | El diseño completo en píxeles, hasta 4K | Publicar en redes, mensajes, cualquier cosa que solo tenga que verse bien |
| **PNG transparente** | Solo tus elementos, sobre un fondo transparente | Un logotipo con su lema, una pegatina, texto para poner sobre una foto o un vídeo |
Si solo necesitas una imagen del diseño, el PNG es más sencillo. Recurre al SVG cuando alguien vaya a editar o escalar el archivo, y a la transparencia cuando vaya a ir encima de otra cosa.
Las ventajas e inconvenientes generales de cada formato están en [SVG vs PNG](https://gradiently.design/es/guide/svg-vs-png). Esta guía trata de lo que Gradiently mete en cada archivo.
## Qué queda en vector al exportar un SVG
### Vector: nítido a cualquier tamaño
- El texto, como texto real que puedes seleccionar y editar
- Las fuentes, incluidas en el archivo
- Formas y líneas
- Iconos
- Gráficos y tablas
### Imágenes dentro del SVG
- El Mark, el fondo vivo
- Las fotos que añadiste
- Cualquier fuente cuya licencia prohíba incrustarla
Así que un SVG es perfecto para un titular que debe verse nítido en una pantalla 4K, o para una maqueta que un desarrollador va a montar en una página, y menos útil si pretendes ampliar el fondo al tamaño de una valla publicitaria. El Mark se renderiza como imagen al tamaño propio del diseño; para un fondo más grande, exporta mejor un PNG a un tamaño mayor. Un Mark es un render vivo, no un conjunto fijo de formas vectoriales, y por eso no puede convertirse en trazado.
> **Fuentes y licencias** Las fuentes de marca que subes viajan dentro del SVG solo cuando su propia licencia permite incrustarlas. Si no lo permite, Gradiently dibuja ese texto en píxeles, para que el archivo siga viéndose bien. [Licencias de fuentes](https://gradiently.design/es/guide/font-licensing) explica estos permisos.
## Cómo exportar un SVG
1. **Elige la página** Un SVG contiene una página. En un carrusel o una presentación, elige la página en Exportar y repite con las demás.
2. **Elige SVG** Abre **Exportar** y elige **SVG**, descrito como escalable, el texto sigue siendo texto. La vista previa muestra el tamaño de la página.
3. **Descarga** Elige **Descargar SVG**. El archivo se guarda donde tu navegador guarda las descargas.
4. **Úsalo en la web** Colócalo con una etiqueta `img` para un gráfico fijo, o insértalo directamente en el HTML si quieres dar estilo al texto con CSS.
```html
```
Dale siempre un texto alternativo real a un SVG usado como imagen. La [referencia de SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) de MDN cubre el formato a fondo.
Un SVG también se abre en herramientas de diseño como Figma e Illustrator, que leen el texto y las formas vectoriales como capas editables. Eso lo convierte en el archivo adecuado para quien necesite adaptar una maqueta a un formato que Gradiently no cubre, como un cartel impreso con su propia plantilla, o para un desarrollador que construye una sección de página a partir de tu diseño. Envía el PNG junto a él como referencia visual, para que vean exactamente cómo debe verse el Mark.
## Cómo exportar un PNG transparente
Elige **PNG** en Exportar y activa **Fondo transparente**. Todo lo que colocaste (texto, logo, formas, fotos) se mantiene; el Mark se queda fuera y el espacio que rodea tus elementos es transparente. Elige un tamaño de hasta 4K. Un rótulo, un logo y un lema exportados así pueden ir sobre una foto de producto, sobre un vídeo en otro editor o sobre una diapositiva de color.
Un diseño cuadrado con el logotipo Northlight y un pequeño lema sobre un degradado cálido
El diseño completo: el logotipo sobre su Mark, para publicarlo tal cual.
El mismo logotipo Northlight con su lema colocado sobre otro degradado más frío tras una exportación transparente
Exportados con Fondo transparente, el logotipo y el lema viajan solos y pueden colocarse sobre otro fondo, sin cambios.
- **Comprueba la tinta frente al lugar donde va a ir.** Un texto claro exportado para un Mark oscuro desaparecerá sobre una página blanca. Cambia a tinta oscura antes de exportar si el destino es claro.
- **Ajusta la página al contenido.** Un PNG transparente conserva el tamaño completo de la página. Redimensiona antes la página para acercarla a tus elementos si quieres un archivo ajustado.
- **Guarda las dos versiones del logo.** Exporta una para fondos oscuros y otra para claros, igual que un kit de marca guarda las dos. [Logo sobre fondo degradado](https://gradiently.design/es/guide/logo-on-gradient-background) explica por qué.
- **Usa PNG, no JPEG.** JPEG no tiene transparencia; un diseño transparente guardado como JPEG recibe un fondo sólido.
## Cómo colocar un PNG transparente en la web
Un PNG transparente se superpone limpiamente a cualquier fondo CSS, algo muy práctico cuando el texto es fijo pero el fondo cambia según la sección o el tema. Ponle un degradado detrás y tu ilustración irá encima.
```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%);
}
```
El PNG transparente va arriba y el degradado debajo. Cambia el degradado en cada página y la ilustración sigue igual.
Índigo a violeta a orquídea: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)`
El fondo del código de arriba: índigo profundo que pasa por violeta hasta un orquídea suave en la esquina inferior derecha.
Para el caso contrario, un degradado que se funde con la transparencia en CSS, consulta [degradado CSS transparente](https://gradiently.design/es/guide/css-gradient-transparent). Y si necesitas todos los formatos en un solo sitio, [exportar diseños](https://gradiently.design/es/guide/export-images-and-loops) cubre PNG, JPEG, PDF, vídeo y GIF juntos.
## FAQ
### ¿Cómo exporto un SVG desde Gradiently?
Abre el diseño, elige Exportar, luego SVG, y descárgalo. Un SVG contiene una página, así que en un diseño de varias páginas elige antes la página.
### ¿La exportación SVG mantiene el texto editable?
Sí. El texto sigue siendo texto real, con sus fuentes incluidas en el archivo, salvo que la licencia de una fuente prohíba incrustarla; en ese caso, ese texto se dibuja en píxeles.
### ¿El fondo degradado es vectorial en una exportación SVG?
No. El Mark es un render vivo, así que se incluye como imagen dentro del SVG. Las formas, iconos, gráficos, tablas y el texto son vectores.
### ¿Cómo exporto un PNG con fondo transparente?
Elige PNG en Exportar y activa Fondo transparente. Tus elementos se mantienen y el Mark se queda fuera, sobre un fondo transparente.
### ¿Puedo exportar SVG con el plan gratuito?
No. Las exportaciones gratuitas son PNG o JPEG a 720p con una pequeña marca de agua; SVG, PDF y PNG transparente forman parte de Pro.