Convertir SVG a WebP

La calidad predeterminada aquí es 92, bastante más alta que el 75–82 que usarías para una fotografía, y es a propósito.

Cualquier compresión con pérdida está pensada para variaciones graduales de color. Los SVG producen lo contrario: grandes zonas de color perfectamente plano que se encuentran en bordes duros. Con ajustes de calidad intermedios, eso se nota como manchas tenues dentro de las formas sólidas y un halo suave a lo largo de los contornos, ambos mucho más visibles en un logotipo limpio que en una fotografía con el mismo ajuste.

• 95–100: prácticamente indistinguible de un renderizado sin pérdida. Úsalo para logotipos, iconos y todo lo que contenga texto.
• 88–94: la franja predeterminada. Limpio en la mayoría de los diseños.
• 75–87: los artefactos se vuelven visibles alrededor de los bordes y en el color plano.
• Por debajo de 75: claramente degradado en gráficos.

Renderiza más grande antes de subir la calidad. Los artefactos escalan con el tamaño del píxel, así que un renderizado de 2048 px con calidad 90 suele superar a uno de 512 px con calidad 100, y se mantiene nítido si alguna vez la imagen se muestra más grande.

Como en cualquier conversión de SVG a mapa de bits, revisa las fuentes. Si el archivo nombra una fuente en lugar de convertir el texto en contornos, el renderizador la sustituye por la que tenga. Convierte el texto en trazados en tu herramienta de diseño si las letras importan.

Cómo elegir entre los tres destinos de mapa de bits

• WebP: lo mejor para un sitio web que controlas. Transparencia, bordes limpios, el archivo más ligero.
• PNG: lo mejor cuando no puedes prever qué lo abrirá. Transparencia, bordes limpios, compatibilidad universal, archivo más pesado.
• JPG: solo cuando algo lo exija específicamente. Sin transparencia, y su compresión encaja mal con los gráficos planos.

Servir a la vez un vector y un mapa de bits

Si quieres la nitidez del SVG donde se admite y un mapa de bits de respaldo en los demás casos, el elemento <picture> se encarga:

<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.webp" alt="…">
</picture>

En la práctica todos los navegadores actuales usan el SVG, así que esto protege sobre todo frente a clientes poco habituales.

Cómo manejamos SVG de forma segura

SVG es un documento con estructura y no un bloque de píxeles, y uno escrito con malas intenciones puede intentar cosas que una fotografía no puede: leer archivos del servidor, hacer peticiones de red salientes o llevar scripts. Justamente por eso tantas plataformas rechazan las subidas de SVG y mandan a la gente aquí.

Dos cosas lo hacen seguro aquí. Recibes un WebP, nunca el SVG, así que nada de lo incrustado en el archivo puede ejecutarse en tu navegador. Y cada archivo subido se revisa antes de que nada lo analice: las declaraciones de tipo de documento, las definiciones de entidades, los scripts, los controladores de eventos y las referencias a recursos externos hacen que el archivo se rechace en lugar de repararse. Las imágenes incrustadas como URI de datos y las referencias internas, como los degradados, no se tocan, así que las exportaciones normales de herramientas de diseño se convierten sin problemas.

Convertir un juego de iconos

Agrega todos los archivos que quieras; cada uno se renderiza al ancho elegido con su propia descarga. Si necesitas el mismo icono a varios tamaños, ejecuta el lote una vez por tamaño: cada vez se renderiza desde el vector en lugar de escalar un resultado anterior, así que todos los tamaños son igual de nítidos.