Una guía para el soporte SVG en correo electrónico | Programar Plus

0

Hemos hablado bastante sobre SVG aquí en CSS-Tricks, pero un área que no hemos tocado del todo es el correo electrónico. Ahora que la compatibilidad del navegador con SVG está en verde, sería fácil suponer que podemos comenzar a usar SVG en todas partes. Sin embargo, si ha trabajado antes con el correo electrónico, es posible que sepa que a menudo sigue muy por detrás de la web en lo que respecta a la compatibilidad de funciones. Ya sabes, la forma en que California ve a Dakota del Norte con las tendencias: solo unos años atrás. 🙂

Este artículo profundiza en cuatro formas diferentes de usar SVG y compara el soporte para esos métodos en varias de las aplicaciones de correo electrónico más populares. Veamos dónde obtenemos más apoyo.

  • SVG como etiqueta de imagen
  • SVG como HTML en línea
  • SVG como imagen de fondo CSS
  • SVG como objeto incrustado
  • Prima: SVG con JPG Fallback

SVG como etiqueta de imagen

Usando SVG directamente <img> etiqueta es como colocar cualquier otro archivo de imagen en una pantalla, excepto que estamos haciendo referencia a un archivo SVG en lugar de algo como un JPG o PNG:

<img src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.svg">

Aquí está el soporte para esta técnica:

Web de AOL Outlook 2013 panorama
.com		 Yahoo! Correo (OSX) Correo (iOS) Gmail Gmail (iOS) Gmail (Android) Androide
sí No sí sí sí sí No No sí No

Soporte total: 60%

SVG como HTML en línea

En esta prueba, extraemos el código del archivo SVG directamente de Illustrator y lo colocamos directamente en el HTML del correo electrónico:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-227 241 225.3 224.1" style="enable-background:new -227 241 225.3 224.1;" xml:space="preserve">
    <path class="dice-1" d="M-132,241h-72.3c-12.4,0-22.6,10.2-22.6,22.6V336c0,12.4,10.2,22.6,22.6,22.6h72.3c12.4,0,22.6-10.2,22.6-22.6
    v-72.3C-109.4,251.2-119.6,241-132,241z M-195.3,340.5c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6
    c7.5,0,13.6,6.1,13.6,13.6C-181.8,334.4-187.9,340.5-195.3,340.5z M-195.3,286.2c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-181.8,280.1-187.9,286.2-195.3,286.2z M-168.2,313.3
    c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6C-154.7,307.3-160.7,313.3-168.2,313.3z M-141.1,340.5
    c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-127.5,334.4-133.6,340.5-141.1,340.5z
     M-141.1,286.2c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-127.5,280.1-133.6,286.2-141.1,286.2
    z"/>
    <path class="dice-2" d="M-24.3,347.5h-72.3c-12.4,0-22.6,10.2-22.6,22.6v72.3c0,12.4,10.2,22.6,22.6,22.6h72.3
    c12.4,0,22.6-10.2,22.6-22.6v-72.3C-1.7,357.7-11.9,347.5-24.3,347.5z M-87.6,447c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-74.1,441-80.1,447-87.6,447z M-60.5,419.9c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6C-46.9,413.8-53,419.9-60.5,419.9z M-33.4,392.8c-7.5,0-13.6-6.1-13.6-13.6
    s6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6S-25.9,392.8-33.4,392.8z"/>
</svg>

El soporte es mucho menor de lo que esperaba:

Web de AOL Outlook 2013 Outlook.com Yahoo! Correo (OSX) Correo (iOS) Gmail Gmail (iOS) Gmail (Android) Androide
No No No No sí sí No No No Sí*

* Desborda el contenedor

Soporte total: 25% (contando Android como soporte parcial)

Es posible que haya notado que asigné nombres de clase para cada ruta. Si esperaba que las propiedades CSS para SVG también fueran compatibles con aquellos clientes de correo electrónico que reconocen SVG en línea, está de suerte. Lo son, en todos los ámbitos.

fill

Correo (OSX) Correo (iOS) Androide
sí sí sí

stroke

Correo (OSX) Correo (iOS) Androide
sí sí sí

SVG como imagen de fondo CSS

Podemos usar SVG como imagen de fondo en CSS:

.my-element {
  background-image: url("https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.svg");
  background-repeat: no-repeat;
}
Web de AOL Outlook 2013 Outlook.com Yahoo! Correo (OSX) Correo (iOS) Gmail Gmail (iOS) Gmail (Android) Androide
sí No No sí sí sí No No No No

Soporte total: 40%

Tenga en cuenta que se sabe que algunas aplicaciones de correo electrónico eliminan CSS del documento <head>. En estos casos, es una buena práctica alinear nuestros estilos además de incluirlos en el <head>.

Además, los fondos CSS son un poco impredecibles si se trata de un diseño receptivo. Mantener el ancho y la altura proporcionales entre sí sería complicado, y probablemente más complicado de lo que vale.

SVG como objeto incrustado

Incrustar SVG como un <object> es muy parecido a incrustar un archivo multimedia, como audio o video. El beneficio, además de conservar algo de control de estilo con CSS, es que se puede establecer una imagen alternativa donde no se admite SVG:

<object style="width:100%;" type="image/svg+xml" data="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.svg">
  <img src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.jpg">
 </object>
Web de AOL Outlook 2013 Outlook.com Yahoo! Correo (OSX) Correo (iOS) Gmail Gmail (iOS) Gmail (Android) Androide
No No Sí* Sí* Sí† sí No No sí sí

* con respaldo
† rebosa el recipiente

Soporte total: 55% (con soporte parcial para Mail OSX)

Etiqueta de imagen con CSS Hack

Actualizar: El siguiente truco tenía la intención de explotar la falta de soporte de Gmail para CSS contenido en el documento <head> pero ese ya no es el caso a partir de septiembre de 2016. La tabla de soporte al final del artículo también se ha actualizado para reflejar este cambio.

Los resultados aquí no son muy alentadores. Quiero decir, el mejor soporte es el 60% y eso es un poco malo. Pero, ¿qué pasaría si intentáramos combinar un par de técnicas diferentes para obtener algo que nos brinde un mejor soporte?

Aquí está el truco. Primero, agregaremos una etiqueta de imagen para el SVG y otra para un JPG de respaldo:

<!-- Image: SVG -->
<img src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.svg">
<!-- Image: JPG -->
<img src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.jpg">

Si nos mantuviéramos con esto, tendríamos una situación en la que algunas aplicaciones de correo electrónico muestran dos imágenes y otras muestran una con un símbolo de imagen rota. ¡Qué asco!

Ocultemos ese JPG para las aplicaciones de correo electrónico que sí admiten SVG. No, Modernizr no funciona para el correo electrónico, pero sabemos que algunas aplicaciones ignoran cualquier CSS que esté en el documento. <head>. Podemos usar eso para nuestra ventaja agregando un nombre de clase al elemento de imagen JPG y ocultándolo con CSS:

<!-- Image: SVG -->
<img src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.jpg">
/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
}

¡Ahora estamos en una buena racha! Hemos logrado la hazaña de ocultar el JPG en todas las aplicaciones de correo electrónico, excepto en Gmail. Sin embargo, si nos detenemos aquí, así es como Gmail procesa el código:

¡Esa maldita imagen rota!

Ack, tan cerca. Ahora necesitamos ocultar esa etiqueta de imagen rota donde debería ir el SVG. Hagamos un par de cosas:

  • Agregue una altura y un ancho de cero al SVG
  • Agregue un nombre de clase al SVG que lo cambia de tamaño

En otras palabras:

<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="https://css-tricks.com/a-guide-on-svg-support-in-email/my-image.jpg">

Eliminar el ancho y el alto del SVG en línea tiene el mismo efecto que ocultarlo. Luego, usamos el documento CSS <head> hackear agregando una clase que cambie esas dimensiones a una imagen de tamaño completo para las aplicaciones de correo electrónico que admiten SVG:

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}

/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
}

Nuestro soporte comienza a verse mucho mejor:

Web de AOL Outlook 2013 Outlook.com Yahoo! Correo (OSX) Correo (iOS) Gmail Gmail (iOS) Gmail (Android) Androide
sí Sí* sí sí sí sí No No No sí

* JPG

¡Tan, tan, tan cerca! Tenemos soporte completo para muchos clientes, un respaldo responsable para otro y, desafortunadamente, no tenemos soporte en Gmail, que es una porción significativa de participación de mercado.

Mi mejor comida para llevar …

… Es que el correo electrónico todavía está en el salvaje oeste del desarrollo de aplicaciones para el usuario. Personalmente, sentiría que usar SVG es una apuesta, particularmente si se sabe que sus suscriptores confían en Gmail.

Dicho esto, conocer a su audiencia es probablemente el factor determinante de si SVG puede y debe usarse en el correo electrónico. Por ejemplo, un desarrollador de aplicaciones iOS que sabe que los clientes consumen correo electrónico en un dispositivo OSX o iOS puede sentirse muy bien con el uso de SVG. Muchos proveedores de marketing por correo electrónico (como MailChimp y Campaign Monitor) facilitan la búsqueda de esta información con análisis. Campaign Monitor también tiene un informe bastante útil sobre la popularidad y participación de mercado de las aplicaciones de correo electrónico que vale la pena revisar.