html - img - inline svg icons

SVG sprite en archivo externo (3)

Estoy usando un sistema de iconos para mi aplicación con SVG Sprite, creado por la aplicación IcoMoon. En index.html tengo ahora algo como esto:

Necesito mover el sprite svg en un archivo y luego incluirlo como un recurso externo. ¿Cómo puedo hacer esto?

Hay muchas formas diferentes de incrustar un archivo SVG en un documento sin usar el código SVG en línea como lo hizo en su marca de ejemplo. Mover el SVG a un archivo externo sin duda hace que el código sea más limpio y editable. Chris Coyier tiene una gran página sobre el uso de SVG en trucos CSS. Aquí hay un resumen de las técnicas cubiertas en ese artículo:

Usando SVG como un `<img>`

Puede incrustar archivos SVG en una etiqueta <img> como lo haría con un archivo JPG o PNG o cualquier otro archivo de imagen:

<img src="kiwi.svg" alt="Kiwi standing on oval">

Puede ajustar el ancho y el alto de su imagen SVG con los atributos de ancho y alto en línea, o dirigiéndose a su imagen SVG en un documento CSS.

Tenga en cuenta que, por razones de seguridad, la mayoría de los navegadores deshabilitarán los scripts, enlaces y otra interactividad de los archivos SVG agregados con las etiquetas <img> .

Usando SVG como imagen de fondo

En su código de ejemplo, parece que está usando el archivo SVG como imagen de contenido, pero en caso de que el SVG tenga un propósito puramente estético, puede usar el archivo SVG como imagen de fondo en CSS:

body { background: url(kiwi.svg); background-size: 100px 82px; /* some other CSS probably */ }

Al igual que las etiquetas <img> , las funciones SVG avanzadas se desactivan cuando se usa este método.

Usando SVG como un `<object>`

También puede incrustar un archivo SVG en un <object> . El uso de esta técnica le permitirá usar algunas funciones avanzadas de SVG como las secuencias de comandos:

<object type="image/svg+xml" data="kiwi.svg" class="logo"></object>

Incluyendo SVG con PHP

Si está utilizando PHP, o algún otro código del lado del servidor, puede insertar el archivo SVG en una página mediante programación. Esta técnica podría ser útil si tiene alguna aplicación más sofisticada que requiera que los archivos SVG se carguen dinámicamente o algo así. En PHP tu SVG include se vería así:

<?php include("kiwi.svg"); ?>

Conclusión

Es casi seguro que hay otras formas de agregar archivos SVG a una página web que no cubrí aquí (¿quizás iframe?), Pero espero que encuentre un método que funcione para su aplicación en esta lista. Tenga en cuenta que existen ventajas e inconvenientes con cada método, por lo que debe investigar más antes de elegir un método. También hay algunos métodos que probablemente deberían evitarse. Por ejemplo, no use una etiqueta <embed> porque no es, y probablemente nunca será, parte de ninguna especificación HTML.

También lea el artículo de Chris Coyier que mencioné antes.

Prueba esto:

Crear un archivo svg, sprites.svg

Coloque lo siguiente en él:

Luego, cuando quieras incluir en un elemento de use

<svg class="icon" viewBox="0 0 32 32"> <use xlink:href="sprites.svg#icon-home" /> </svg>

(En este momento, Internet Explorer tiene un problema con esto. IE necesitaría un enfoque diferente. Si lo desea, también puedo mostrar lo que se necesita para IE)

EDITAR - Compatibilidad con varios navegadores: coloque elementos de sprit SVG en un archivo XML y llámelos a un elemento defs.

Archivo XML, llamado sprites.xml:

<?xml version="1.0" encoding="UTF-8"?> <SPRITES xmlns="http://www.w3.org/2000/svg"> <path id="iconHome" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" /> <path id="iconCamera" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" /> </SPRITES>

Un ejemplo de archivo HTML con Javascript para propagar el elemento defs.

<!DOCTYPE HTML> <html> <head> <title>Sprites</title> </head> <body onLoad=loadSprites()> <svg id=mySVG width="400" height="400"> <defs id="spriteDefs" /> <use xlink:href="#iconHome" transform="translate(100 100)" /> <use xlink:href="#iconHome" transform="translate(200 100)" /> <use xlink:href="#iconHome" transform="translate(300 100)" /> <use xlink:href="#iconCamera" transform="translate(100 200)" /> <use xlink:href="#iconCamera" transform="translate(200 200)" /> <use xlink:href="#iconCamera" transform="translate(300 200)" /> <use xlink:href="#iconHome" transform="translate(200 300)" /> </svg> <script> function loadSprites() { var xmlFile="sprites.xml" var loadXML = new XMLHttpRequest; loadXML.onload = callback; loadXML.open("GET", xmlFile, true); loadXML.send(); function callback() { //---responseText--- var xmlString=loadXML.responseText //---DOMParser--- var parser = new DOMParser(); var mySpritesDoc=parser.parseFromString(xmlString,"text/xml").documentElement ; var addSprites=mySpritesDoc.childNodes for(var k=0;k<addSprites.length;k++) { var sprite=addSprites.item(k).cloneNode(true) document.getElementById("spriteDefs").appendChild(sprite) } } } </script> </body> </html>

Un enfoque alternativo es generar su archivo index.html con los archivos sprite incluidos. Este es el mejor enfoque porque significa que sus íconos SVG se cargan inmediatamente.

Puede hacer esto en el servidor web con un Server Side Include:

Servidor de Apache Side Include con mod_include
Para S3 y alojamiento de archivos estáticos, puede utilizar un preprocesador como ssi .