> Faqs > Insertar un SVG in-line en un archivo HTML

Insertar un SVG in-line en un archivo HTML

¿Cómo se inserta una imagen SVG "in-line", escrita dentro del código HTML?

¿Usamos el tag de la imagen <img> de toda la vida?

Respuestas

Para insertar un SVG en una página web la verdad es que tienes varias posibilidades.

Si me dices que lo quieres insertar "in-line" no entiendo precisamente que quieras usar la etiqueta <img>, que también podrías, porque en el caso de tener una imagen, ya lo estás insertando mediante un archivo externo, enlazado con el atributo "src".

Pero para contestar la pregunta genérica sobre como insertar un SVG tendrías estas dos alternativas:

Insertar el SVG in-line (etiqueta <svg>)

La parte de insertar el SVG en línea sería usar la propia etiqueta SVG que tiene el mismo formato svg. Esta etiqueta la puedes colocar perfectamente en la página en el lugar donde quieras representar la imagen vectorial.

<svg xmlns="http://www.w3.org/2000/svg" width="33" height="40" viewBox="0 0 33 40">
    <path fill="#000" fill-rule="nonzero" d="M14.622 20.03L.812 6.43a2.365"/>
</svg>

Insertar el SVG con la etiqueta <img>

También puedes insertar la imagen usando la etiqueta <img> de toda la vida. Necesitarías entonces dos cosas:

  1. El archivo de tu imagen en formato SVG, en un fichero con extensión .svg. En ese archivo tienes el contenido de toda la imagen, que dentro tendrá la etiqueta <svg> y todo el contenido de esa imagen expresado en texto, tal como manda el formato.
  2. la etiqueta <img> con el src igual a la ruta donde tengas el archivo .svg en tu servidor.
<img src="ruta/donde/este/el/archivo.svg">

La idea de insertarlo en una imagen en principio me parece más apropiada, ya que así podrás usar la misma imagen .svg en varios lugares de la página, siempre trayendo el contenido del mismo archivo, que es cacheable por el navegador. Por lo tanto optimiza mejor el sitio web.

La idea de insertarlo in-line puede estar bien cuando quieres tener un único HTML que incluye ya todas las imágenes, por lo que con descargar un documento HTML se podría tener ya incluido todo el contenido a visualizar, tanto texto como imágenes, que en algunas condiciones puede resultar útil.

Miguel Angel
3090 138 206 17
El uso de un svg en una etiqueta no se considera inserción "inline" del svg.

SVG inline es el que se coloca directamente en el código HTML con la etiqueta SVG.

Solo tienes que abrir el archivo SVG que quieras usar y copiar el código que encontrarás en el. Solamente la etiqueta SVG es necesaria, por ejemplo:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
	<g>
		<g>
			<path d="M490.667,0H21.333C9.551,0,0,9.551,0,21.333v469.333C0,502.449,9.551,512,21.333,512h469.333
				c11.782,0,21.333-9.551,21.333-21.333V21.333C512,9.551,502.449,0,490.667,0z M469.333,469.333H42.667V42.667h426.667V469.333z"
				/>
			<path d="M256,298.667c23.573,0,42.667-19.093,42.667-42.667S279.573,213.333,256,213.333S213.333,232.427,213.333,256
				S232.427,298.667,256,298.667z"/>
		</g>
	</g>
</g>
</svg>

Puedes usar el svg inline en el código HTML desde HTML 5. Está disponible desde IE 9 en adelante. Por supuesto incluye todos los navegadores modernos.

Gustavo
139 2 11 10