SVG `use` con fuente externa | Programar Plus

0

Hay otro artículo más reciente sobre este tema que cubre información más reciente.

Inline SVG es una forma asombrosa de usar SVG porque, entre otras razones, las formas individuales que componen el gráfico se pueden programar y diseñar. Las formas están en el DOM. ¿Pero eso significa que tenemos que definir esas formas directamente en el HTML en cada página? No, podemos <use> para hacer referencia a ellos desde otro lugar. Idealmente, ese “otro lugar” es un archivo externo, porque eso significa que el navegador puede almacenar en caché el archivo, eficiencia!

Esto es lo que quiero decir:

<!-- `<use>` shape defined ON THIS PAGE somewhere else -->
<svg viewBox="0 0 100 100">
   <use xlink:href="https://css-tricks.com/svg-use-external-source/#icon-1"></use>
</svg>

<!-- `<use>` shape defined in an EXTERNAL RESOURCE -->
<svg viewBox="0 0 100 100">
   <use xlink:href="defs.svg#icon-1"></use>
</svg>

Así que sí: recurso externo = el camino a seguir.

Pero, la forma de recursos externos no funciona en ninguna versión (hasta 11 probadas) de Internet Explorer. Incluso los que admiten SVG en línea: 9, 10, 11.

Afortunadamente, Jon Neal tiene una solución inteligente. Es un pequeño script llamado SVG para todos. La idea es esta: solo usa <use> como si funcionara, y el script lo manejaría en IE 9, 10, 11. Un polyfill, excepto solo para este escenario (no hace que esto funcione en ningún lugar que no admita el uso de SVG en línea).

Funciona así:

  1. Si el navegador es IE 9, 10 u 11 (el agente de usuario olfatea, pero ese es el punto aquí).
  2. Ajax para el archivo SVG al que se hace referencia
  3. Encuentre el bit necesario, según el ID al que se hace referencia (por ejemplo, # icon-1)
  4. Inyecta eso en el <svg> en la pagina

Funciona totalmente.

Creo que SVG en línea es muy útil y este script (pequeño) significa que puede usarlo de una manera más responsable (almacenable en caché).

(Visited 7 times, 1 visits today)