> 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?

Responder la pregunta
Editar Hacer otra preguntaPreguntar

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
1125 51 74 5