La versión corta
- 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.
En esta página
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
Para qué usarla
Para qué usarla
Qué obtienes
Para qué usarla
Las ventajas e inconvenientes generales de cada formato están en 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.
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
imgpara un gráfico fijo, o insértalo directamente en el HTML si quieres dar estilo al texto con CSS.
<!-- As an image: simplest, cached, text is not selectable -->
<img src="/images/summer-launch.svg" width="1200" height="630" alt="Summer launch: new colours from 1 June">
<!-- Inline: text is real, selectable and readable by search engines -->
<div class="hero-art">
<!-- paste the contents of summer-launch.svg here -->
</div>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.
El diseño completo: el logotipo sobre su Mark, para publicarlo tal cual.
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 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.
.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%);
}linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)Para el caso contrario, un degradado que se funde con la transparencia en CSS, consulta degradado CSS transparente. Y si necesitas todos los formatos en un solo sitio, exportar diseños cubre PNG, JPEG, PDF, vídeo y GIF juntos.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil