Una vez que tenemos lo que llamamos nuestro "bloque defs" de SVG, ese trozo de SVG que define todas las cosas que queremos dibujar más tarde, ¿dónde lo ponemos? Hasta ahora lo hemos estado poniendo directamente en el HTML, y eso funciona absolutamente. Si lo dejamos en la parte superior de la página, digamos justo después de la etiqueta de apertura :
Eso funcionará muy bien en todos los navegadores compatibles con SVG.
Podría ser tentador bajar esto. Quizás los íconos no son muy vitales para la página, no tan vitales como el contenido real que la página debe entregar, por lo que movemos los íconos al final de la página, posponiendo su carga como lo hacemos a menudo con JavaScript. Intentamos esto en el video, pero tiene problemas con Safari para renderizar los íconos que luego intentamos . Para ser honesto, he visto comportamientos inconsistentes o de varios tipos en otros navegadores al hacerlo de esta manera, y parece que el panorama está cambiando un poco en este sentido. Así que he oído: es algo difícil de implementar. Es más seguro colocar el bloque en la parte superior si terminas manteniendo las definiciones correctas en tus documentos.
En este video vemos algunas pruebas básicas de todo esto, y luego miramos algunos sitios web del mundo real que están usando este sistema y cómo / dónde insertan el bloque svg defs.
Vea el Pen 954e71cb5d5e79fb61d3c89bb3f21b8a de Chris Coyier (@chriscoyier) en CodePen.
Nota
Me gusta el término "bloque de definiciones SVG", solo para que podamos llamarlo de alguna manera que tenga un propósito específico pero que en realidad no tenga un nombre oficial. Pero, no siempre es necesario utilizar una etiqueta. Cuando usas s, esos no se renderizan por sí mismos de todos modos, y de hecho no creo que se suponga que estén dentro . Escuché que las definiciones de gradientes en SVG son las mismas y ni siquiera funcionarán si están en formato . Independientemente, sigue siendo un "bloque de código SVG que estamos definiendo para usar más adelante", por lo que probablemente seguiré llamándolo "bloque de defs de SVG".