1

No sé si hay alguna solución. Tengo una web, que usa varios iconos (SVG) de forma muy recurrente en varias páginas.

Creo un archivo llamado icons.svg con la siguente estrucutra:

<svg>
<symbol id="delete" viewBox="0 0 408.483 408.483">
    <title>Icon delete</title>
    <g>
  <path d="M87.748,388.784c0.461,11.01,9.521,19.699,20.539,19.699h191.911c11.018,0,20.078-8.689,20.539-19.699l13.705-289.316 H74.043L87.748,388.784z M247.655,171.329c0-4.61,3.738-8.349,8.35-8.349h13.355c4.609,0,8.35,3.738,8.35,8.349v165.293 c0,4.611-3.738,8.349-8.35,8.349h-13.355c-4.61,0-8.35-3.736-8.35-8.349V171.329z M189.216,171.329 c0-4.61,3.738-8.349,8.349-8.349h13.355c4.609,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.737,8.349-8.349,8.349h-13.355 c-4.61,0-8.349-3.736-8.349-8.349V171.329L189.216,171.329z M130.775,171.329c0-4.61,3.738-8.349,8.349-8.349h13.356 c4.61,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.738,8.349-8.349,8.349h-13.356c-4.61,0-8.349-3.736-8.349-8.349V171.329z"/>
      <path d="M343.567,21.043h-88.535V4.305c0-2.377-1.927-4.305-4.305-4.305h-92.971c-2.377,0-4.304,1.928-4.304,4.305v16.737H64.916 c-7.125,0-12.9,5.776-12.9,12.901V74.47h304.451V33.944C356.467,26.819,350.692,21.043,343.567,21.043z"/>
</g>
</symbol>

<symbol id="check" viewBox="0 0 26 26">
    <title>Icon check</title>
    <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z"/>
</symbol>
</svg>

y lo guardo con extensión .svg

Luego para llamar al icono:

<svg>
    <use href="iconos.svg#delete" />
</svg>

El inspector parece que si lo coge, pero no sale nada.

¿Me pueden ayudar?

1
  • Lo deseas cargar en un ImageView?
    – Jorgesys
    Commented el 13 nov. 2019 a las 21:42

2 respuestas 2

1

prueba con poner la cabecera del SVG con las siguientes propiedades.

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
<symbol id="delete" viewBox="0 0 408.483 408.483">
    <title>Icon delete</title>
    <g>
  <path d="M87.748,388.784c0.461,11.01,9.521,19.699,20.539,19.699h191.911c11.018,0,20.078-8.689,20.539-19.699l13.705-289.316 H74.043L87.748,388.784z M247.655,171.329c0-4.61,3.738-8.349,8.35-8.349h13.355c4.609,0,8.35,3.738,8.35,8.349v165.293 c0,4.611-3.738,8.349-8.35,8.349h-13.355c-4.61,0-8.35-3.736-8.35-8.349V171.329z M189.216,171.329 c0-4.61,3.738-8.349,8.349-8.349h13.355c4.609,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.737,8.349-8.349,8.349h-13.355 c-4.61,0-8.349-3.736-8.349-8.349V171.329L189.216,171.329z M130.775,171.329c0-4.61,3.738-8.349,8.349-8.349h13.356 c4.61,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.738,8.349-8.349,8.349h-13.356c-4.61,0-8.349-3.736-8.349-8.349V171.329z"/>
      <path d="M343.567,21.043h-88.535V4.305c0-2.377-1.927-4.305-4.305-4.305h-92.971c-2.377,0-4.304,1.928-4.304,4.305v16.737H64.916 c-7.125,0-12.9,5.776-12.9,12.901V74.47h304.451V33.944C356.467,26.819,350.692,21.043,343.567,21.043z"/>
</g>
</symbol>

<symbol id="check" viewBox="0 0 26 26">
    <title>Icon check</title>
    <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z"/>
</symbol>
</svg>

Saludos

5
  • la respuesta es correcta, puedes agregar mas información para mejorar la calidad. Commented el 15 oct. 2019 a las 10:53
  • Hola!!! Biggum! Lo he intentado y nada. No hay suerte, me llevo el archivo a otra carpeta: [<svg><use href="hola/iconos.svg#fdelete"/></svg>]
    – Eva MV
    Commented el 16 oct. 2019 a las 6:45
  • Oh, vaya. Yo hice una pequeña prueba con los dos ficheros en la raiz de mi servidor local. Cierto que el HTML no era simplemente la incrustación del SVG. Tenía cabecera, Head, Body, etc.... Lo digo por si acaso. Interpreté que tu código de incrustación estaba en medio de una página HTML. Saludos y suerte
    – Biggum
    Commented el 16 oct. 2019 a las 7:00
  • Hola Biggum!! Yo lo tengo que usar bajo el framework de symphony v2 creo que es. Pero aún así hice pruebas con html normal y nada. Si es cierto que no pasaba por servidor. No sé si eso tiene algo que ver.
    – Eva MV
    Commented el 17 oct. 2019 a las 6:49
  • Sí claro, si lo pones en una carpeta y lo abres con el navegador directamente no creo que te funcione. Symphony no es mi campo...en eso no te puedo ayudar.
    – Biggum
    Commented el 17 oct. 2019 a las 15:36
0

Cuando haces una llamada a una parte de un SVG a través de un use tienes que llamarlo así:

<svg>
   <use xlink:href="iconos.svg#delete" />
</svg>

Solo te faltaba añadir el xlink: delante del href

Un ejemplo usando use para reutilizar elementos de un SVG: https://codepen.io/jorgeatgu/pen/byVNgE

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.