Poner ese bloque de definición de SVG en la parte superior del documento definitivamente funciona. También tiene algunas ventajas, como el hecho de que no es necesario realizar ninguna solicitud HTTP, toda la información para dibujar los gráficos está directamente en la página. Pero también tiene algunas desventajas. Toda esa información debe ser analizada por el navegador en cada página, desde el documento. No es un documento separado que el cliente ya podría haber almacenado en caché, como podrían estarlo otros activos. Y hablando de caché, si su sitio almacena HTML en caché (normalmente una buena idea), podría considerar este "exceso de caché de página" porque cada página almacenada en caché incluye este gran bloque repetitivo de código, lo que no es un uso muy eficiente de la caché del servidor.
La buena noticia es que podemos mover ese bloque de defs de SVG a un archivo externo y usarlo como lo haríamos con una imagen o cualquier otro activo.
Cuando lo usemos, la ruta del archivo estaría en el atributo, así:
Es importante saberlo: las restricciones entre dominios son estrictas en este sentido. Incluso los encabezados CORS no te ayudarán en mi experiencia. Así que no hay CDN (ni siquiera se puede reproducir en CodePen, y definitivamente no se puede reproducir en un archivo: // URL).
Otra cosa importante que debe saber: definitivamente necesita el atributo xmlns para que esto funcione. Como en, su bloque de defs de SVG debería comenzar con:
Tenía la impresión de que no lo necesitaba en un documento HTML5 (de la misma manera que no necesita tipos en s), pero tal vez porque este archivo ya no está dentro de los límites de un documento HTML5 (es referencia externa), lo necesita.
Por esa razón, la demostración para esto está aquí.
Es igualmente importante saber: ninguna versión de IE admite esto (hasta 11 en el momento de esta publicación). Pero hay una manera de hacer que funcione, esencialmente haciendo Ajax en el bit de SVG que necesita e insertándolo donde estaría, haciéndolo un poco "normal" SVG en línea que es compatible. Nos lleva un minuto hacer que esto funcione y probarlo en Internet Explorer usando BrowserStack, pero finalmente lo conseguimos.
Archivos
- 16-svg4everybody.js
- 16-svg-defs-test.svg