UltKit

Convertir SVG a WebP

Renderice un archivo vectorial como WebP exactamente al ancho en píxeles que pide su diseño. Resulta útil cuando un gestor de contenido rechaza SVG, una vista previa social necesita un mapa de bits o una ilustración tiene tantos trazados que el navegador tarda en dibujarla.

Convertidor de imágenes

o suelte aquí archivos JPG, JPEG, JPE … ·

Máx. 95 MB por archivo· Hasta 20 archivos· Se borran a los 30 minutos

Salida

Los archivos se procesan en nuestros servidores y se borran a los 30 minutos.

Cómo usar esta herramienta

  1. 1

    Suba el SVG

    Añada hasta 20 archivos .svg exportados desde Figma, Illustrator, Inkscape o una biblioteca de gráficos, de 95 MB cada uno.

  2. 2

    Fije el ancho de salida

    Redimensionar imagen de salida empieza en un ancho de 1200 px; cámbielo al doble del ancho que ocupará la imagen en la página. Calidad está en 90, o marque Sin pérdida en Opciones avanzadas para logotipos e iconos planos.

  3. 3

    Convierta a WebP

    Pulse Convertir a WebP y descargue los archivos o un solo ZIP. Las zonas transparentes siguen transparentes.

Respuesta

¿Cómo se convierte un SVG a WebP con un tamaño concreto?

Suba el SVG, ponga en Redimensionar imagen de salida el ancho en píxeles que necesita (1200 px por defecto) y pulse Convertir a WebP. El vector se dibuja de nuevo a ese ancho, así que nada se amplía ni se difumina.

Cuándo conviene que un SVG pase a WebP

SVG pasó a ser Recomendación del W3C en 2001 y es el formato adecuado para la mayoría de logotipos e iconos: unos pocos kilobytes de texto que siguen nítidos con cualquier zoom. El problema empieza cuando el archivo sale de su propio código. WordPress y muchos creadores de tiendas alojadas rechazan la subida de SVG, las vistas previas de enlaces en Facebook, LinkedIn y X se obtienen como mapas de bits, y las herramientas de diseño exportan ilustraciones con efectos ráster incrustados que convierten un archivo vectorial en varios megabytes de código.

WebP, que Google lanzó en 2010 y que Safari por fin admitió en la versión 14 en 2020, es el mapa de bits pensado para ese trabajo: más ligero que PNG con el mismo aspecto y con un canal alfa real. Renderizar el SVG directamente a WebP a su tamaño final evita el rodeo habitual de exportar un PNG grande. Si también le interesa el sentido inverso, nuestra página de WebP a SVG explica por qué esa dirección requiere vectorizar y no convertir.

Tamaños de SVG a WebP para los espacios web habituales

40:21

1200 × 630 px

Vista previa de enlace Open Graph

Imagen que aparece al compartir la página

16:9

1920 × 1080 px

Ilustración principal a todo el ancho

Cubre la mayoría de pantallas de escritorio a 1×

16:9

1600 × 900 px

Imagen de columna de blog a 2×

Para una columna de contenido de 800 px

4:1

400 × 100 px

Logotipo de cabecera a 2×

Para un espacio de logotipo de 200 × 50 px

SVG

Scalable Vector Graphics

SVG es un formato vectorial basado en XML estandarizado por el W3C en 2001. En lugar de píxeles, describe formas, trazados y texto, por lo que se mantiene nítido a cualquier tamaño y suele ocupar muy poco en logotipos e iconos. Admite transparencia, estilos CSS, scripts y animación, y todos los navegadores lo muestran de forma nativa. SVG no es adecuado para fotografías, y las ilustraciones complejas pueden tardar en renderizarse. Illustrator, Inkscape, Figma y los navegadores pueden abrirlo y editarlo.

Compresión
–
Transparencia
Sí
Animación
Sí
Presentado en
2001 · W3C
Convertidor de SVG

WEBP

Imagen WebP

WebP es un formato de imagen que Google lanzó en 2010 para que las páginas web carguen más rápido. Admite compresión con pérdida y sin pérdida, transparencia alfa y animación en un solo formato. Los archivos WebP con pérdida suelen ser un 25–35% más pequeños que los JPEG de calidad visual similar, y WebP sin pérdida suele ocupar menos que PNG. Todos los navegadores actuales lo admiten, pero algunos programas de escritorio antiguos, servicios de impresión y formularios de carga todavía lo rechazan. Windows, macOS y la mayoría de los editores de imágenes modernos pueden abrir archivos WebP.

Compresión
Con o sin pérdida
Transparencia
Sí
Animación
Sí
Presentado en
2010 · Google
Convertidor de WEBP

Se convierte SVG a WebP para obtener un mapa de bits ligero y de tamaño fijo para los sitios que no aceptan archivos vectoriales o los dibujan con lentitud, como un gestor de contenido, una vista previa social o una landing cargada; de WebP a SVG es un trabajo de vectorización, no un cambio de formato.

Cómo se rasteriza el SVG y qué revisar

El convertidor lee el ancho, el alto y el viewBox propios del SVG y dibuja cada trazado al ancho que usted fije; el alto sigue la proporción. Como el dibujo se hace al tamaño final, los trazos finos y el texto pequeño se suavizan una sola vez, a la escala correcta. Ampliar después un PNG pequeño nunca queda tan limpio.

Las fuentes son la sorpresa habitual. Si el SVG nombra una tipografía que no está incrustada ni convertida en contornos, se usa una fuente de reserva y cambia la longitud de las líneas. Convierta el texto en contornos en su herramienta de diseño antes de exportar. Las imágenes externas vinculadas por URL dentro del SVG no se descargan, así que incrústelas o aplane antes el diseño.

Convertidor de SVG a WebP: qué hacer y qué evitar

SíNo
Renderizar al doble del ancho CSS mostradoConvertir iconos en línea sencillos que pesan menos como SVG
Usar Sin pérdida para logotipos planos con pocos coloresRenderizar a 4000 px para un espacio de 600 px
Guardar el SVG maestro para futuros tamañosEnviar WebP en boletines por correo
Servir el WebP con atributos width y height para evitar saltos de diseñoEsperar texto real: el WebP son píxeles, no texto seleccionable

Preguntas sobre SVG a WebP

¿Qué ancho en píxeles conviene al convertir SVG a WebP?

Tome el ancho al que se muestra la imagen en píxeles CSS y duplíquelo, para que siga nítida en las pantallas de alta densidad de teléfonos y portátiles. Una ilustración mostrada en una columna de 800 px debe renderizarse a 1600 px. Ir a 3× rara vez compensa en la web, porque el archivo crece y la mejora visible es pequeña.

¿Es mejor WebP que SVG para un sitio web?

No para logotipos, iconos y diagramas sencillos: un SVG limpio es diminuto y nítido a cualquier tamaño, así que consérvelo. WebP gana en ilustraciones complejas con degradados, filtros o miles de trazados, y en cualquier sitio que solo acepte mapas de bits, como las vistas previas sociales o un gestor de contenido sin soporte SVG.

¿El WebP conserva el fondo transparente de mi SVG?

Sí. WebP tiene un canal alfa completo tanto con pérdida como sin pérdida, así que las zonas sin relleno del SVG siguen transparentes. Los bordes de las formas se suavizan contra la transparencia, lo que se ve bien sobre cualquier color de fondo.

¿WebP con o sin pérdida para dibujos vectoriales?

Sin pérdida va bien para logotipos planos, iconos y gráficos con unos pocos colores sólidos; se comprimen muy bien y mantienen bordes perfectamente limpios. Con pérdida a calidad 85 a 90 va bien para ilustraciones con degradados, sombras o texturas, donde los archivos sin pérdida pesan mucho. Pruebe ambos con un archivo y quédese con el más ligero que se vea limpio.

¿Por qué no puedo subir SVG a WordPress?

WordPress deja SVG fuera de sus tipos de subida permitidos porque un SVG puede llevar scripts. Acepta WebP desde la versión 5.8, publicada en 2021, así que al convertir obtiene un archivo que la biblioteca de medios admite sin un plugin de seguridad. Los sitios que necesiten vectores de verdad pueden añadir soporte SVG con un plugin que los sanee.

¿Puedo usar el WebP convertido desde SVG en un boletín por correo?

Mejor no. Varios clientes de correo, entre ellos Outlook de escritorio para Windows, no muestran WebP, y Gmail tampoco renderiza SVG. Para el correo, renderice el diseño con SVG a PNG.