es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Firefox no puede renderizar SVG en la etiqueta IMG.

28 May, 2023 Programación

Estoy intentando agregar una imagen SVG a un archivo HTML. Tengo index.html y star.svg juntos en un directorio. Firefox 96 en Ubuntu no puede mostrar la imagen, solo muestra el texto alterno. También intenté con una etiqueta OBJECT, pero solo imprime la fuente de star.svg.

star.svg se muestra correctamente en cualquier otro lugar.

Cualquier ayuda será muy apreciada.

El HTML y SVG que estoy usando:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SVG Test</title>
  </head>
  <body>
    <img src="star.svg" alt="star" height="210px" width="500px">
    <object data="star.svg" type="image/svg+xml"></object>
  </body>
</html>

y

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"></polygon>
</svg>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema podría ser causado por la forma en que se referencia la imagen SVG en el archivo HTML. Aquí hay algunas cosas que podrían estar causando el problema:

    1. Verifique que el nombre de archivo y la ruta sean correctos. Asegúrese de que tanto el archivo index.html como el archivo star.svg se encuentren en el mismo directorio y que el nombre de archivo se haya escrito correctamente.
    2. Asegúrese de que el código SVG sea válido y esté bien formado. Puede verificar esto al copiar el código SVG en un editor de texto plano y guardarlo con una extensión .svg. Luego, intente abrir el archivo SVG directamente en su navegador para ver si se muestra correctamente.
    3. Intente usar diferentes formatos de imagen como .png, .jpg o .gif para identificar si hay algún problema con el archivo SVG en sí.

    Si ninguno de estos pasos ayuda a mostrar la imagen correctamente, entonces podría valer la pena verificar el soporte y la versión del navegador de su imagen SVG.

Comments are closed.