0

necesito de su ayuda, quiero usar varias imágenes SVG en mi html y luego modificar sus atributos de tamaño, colores, etc por ello deseo todas las imágenes SVG ponerlas en un archivo y luego llamarlas desde mi html y ponerle estilos desde un Css pero no me funciona cuando le hago referencia al archivo externo de los SVG, me pueden decir que estoy haciendo mal? Muchas gracias Archivo HTML:

**Archivo Externo iconos-svg.svg:**

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 <symbol id="play" viewBox="0 0 320.001 320.001">
    <path d="M295.84,146.049l-256-144c-4.96-2.784-11.008-2.72-15.904,0.128C19.008,5.057,16,10.305,16,16.001v288
c0,5.696,3.008,10.944,7.936,13.824c2.496,1.44,5.28,2.176,8.064,2.176c2.688,0,5.408-0.672,7.84-2.048l256-144
c5.024-2.848,8.16-8.16,8.16-13.952S300.864,148.897,295.84,146.049z"/>                                
  </symbol>                                
</svg>        

**Archivo Css estilos.css**
.iconos-audio{
    fill:#797d7f;
    width:25px;
    height:25px;
}

**Solo me funciona si pongo todo el código en el HTML asi no reconoce a mi archivo externo SVG**
<div >
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="play" viewBox="0 0 320.001 320.001">
       <path d="M295.84,146.049l-256-144c-4.96-2.784-11.008-2.72- 
               15.904,0.128C19.008,5.057,16,10.305,16,16.001v288 c0,5.696,3.008,10.944,7.936,13.824c2.496,1.44,5.28,2.176,8.064,2.176c2.688,0,5.408-0.672,7.84-2.048l256-144 c5.024-2.848,8.16-8.16,8.16-13.952S300.864,148.897,295.84,146.049z"/>                                
    </symbol>                                                              
   </svg>        
   <svg class="iconos-audio"><use xlink:href="#play"></use></svg>    
</div>

4 respuestas 4

0

No se puede cambiar las propiedades de un svg (color, borde etc) si se usa como una imagen. tiene que agregarse el codigo svg en el html. Si puedes cambiar el tamano de la imagen, porque el browser trata el svg como una imagen al cargarla en un img tag.

Tienes que quitar el display: none del svg para que se pueda ver.

Mas detalle

0

estuve buscando información sobre el tema, ya que me ocurría lo mismo.

Por el ejemplo que envías podría afirmar que estás haciendo uso de "Hojas de sprite de iconos SVG y CSS".

Al hacer uso de esto, existe un pequeño problema con los exploradores chrome y firefox; ya que estos no muestran los iconos, por razones de seguridad, a menos que el sitio web se esté ejecutando en un servidor web. A diferencia de Safari que sí lo mostrará. Tener también en consideración que Internet Explorer no lo soporta (si buscas, hay unas alternativas).

Te recomiendo una página con todos los detalles y muy buenos ejemplos: https://learn-the-web.algonquindesign.ca/topics/advanced-svg/

También existe una herramienta que me gustó y me sirve de mucho (spritebot): https://github.com/thomasjbradley/spritebot

A continuación te envío un ejemplo simple:

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG SPRITES</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <a class="icon-link" href="">
        <svg class="icono"><use xlink:href="svg/sprite.svg#linkedin"/></svg>
    </a>
</body>
</html>

STYLE.CSS

.icon-link{
    color:blue;
}

.icon-link:hover{
    color: red;
}

.icono {
  display: inline-block;
  width: 25px;
  height: 25px;
}

SPRITE.SVG

<svg xmlns="http://www.w3.org/2000/svg"><symbol id="linkedin" viewBox="0 0 448 512">
    <path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></symbol></svg>

Tener en consideración que para trabajar ordenado, el archivo SVG lo guardé en una carpeta con el nombre: "SVG".

No olvides ejecutarlo desde un server local (para windows uso XAMPP).

Saludos y Suerte!!!

0

Un plus, encontré la política de seguridad de Firefox; la cual se aplica para evitar la vulnerabilidad de que puedan robar nuestros datos.

Existe una vulnerabilidad en la que si un usuario abre un archivo HTML guardado localmente, este archivo puede usar file:URI para acceder a otros archivos en el mismo directorio o subdirectorios si los nombres son conocidos o adivinados. La API Fetch se puede usar para leer el contenido de cualquier archivo almacenado en estos directorios y se pueden cargar en un servidor. Luigi Gubello demostró que, en combinación con una popular aplicación de mensajería de Android, si se envía un archivo adjunto HTML malicioso a un usuario y este lo abre en Firefox, debido al patrón predecible de esa aplicación para los nombres de archivo guardados localmente, es posible leer archivos adjuntos. la víctima recibió de otros corresponsales.

Link de referencia: https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730

0

bueno yo creo que no sabes que es un svg y que es un bitmap, yo creo que no puedes cambiar la escala porque para cambiar la escala necesitas que la figura se formé por vectores, líneas y curvas, no pixeles, y tampoco podría cambiar los colores, porque los pixeles funcionan fuera de un canvas. entonces te serviría para hacer iconos svg, pero al ponerlos en un canvas, y capturarlos y convertirlos a bitmap, pierden la calidad vectorial y vuelven a ser bitmaps.

lo más posible y parecido seria vectorizando la imagen completamente y guardarla como vctores de SVG, para poderla escalar o rotar, pero aun así no serviría cambiarle colores como lo haces en un canvas.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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