Tengo problemas con google chrome que no representa svg con una etiqueta img. Esto sucede cuando se actualiza la página y se carga la página inicial. Puedo hacer que la imagen se muestre "Inspeccionando elemento", luego haciendo clic derecho en el archivo svg y abriendo el archivo svg en una nueva pestaña. La imagen svg luego se renderizará en la página original.
<img src="../images/Aged-Brass.svg">
Totalmente perdido aquí en cuanto a cuál es el problema. La imagen svg se reproduce bien en IE9 y FF, pero no en Chrome o Safari.
También tengo configurados mis tipos MIME. (imagen / svg + xml)
EDITAR: Aquí hay una página html simple que construí para ayudar a ilustrar mi problema.
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style>
#BackgroundImage{
background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}
#ImageTag{
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="ImageTag">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
Como puede ver, estoy tratando de usar un archivo svg tanto en una etiqueta img como en css como imagen de fondo. Tampoco funciona en la carga de la página inicial en Chrome o Safari. Cuando inspecciono el elemento, hago clic derecho en svg o hago clic en el enlace para cargar svg en otra ventana, el archivo svg se mostrará en la pestaña original.
fuente
Respuestas:
Una forma sencilla y sencilla; de acuerdo con https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Tienes que abrir el archivo .SVG con un editor de texto (como el bloc de notas) y cambiar
xlink:href="data:img/png;base64,a:
xlink:href="data:image/png;base64,funcionó para mí!
fuente
La etiqueta svg necesita el atributo de espacio de nombres xmlns:
<svg xmlns="http://www.w3.org/2000/svg"></svg>fuente
Vine aquí porque tuve el mismo problema, cuando inspecciono el elemento puedo ver el archivo, pero en el sitio no puedo (incluso cuando uso localhost)
la respuesta a mi problema fue guardar el archivo SVG. Si lo guardó de Illustrator, asegúrese de hacer clic en "incrustar" y no en "vincular". como enlace solo se referirá a sus archivos locales en lugar de incluir los datos (si lo entiendo correctamente).
Lo leí en el sitio web de adobe, que tiene otros consejos útiles para exportar http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Esto funcionó para mí, espero que sea útil.
fuente
Vine aquí porque tuve un problema similar, la imagen no se estaba renderizando. Lo que descubrí fue que el encabezado del tipo de contenido de mi servidor de prueba no era correcto. Lo arreglé agregando lo siguiente a mi archivo .htaccess:
fuente
image/svgofrece el archivo para descargar, tiene que tener+xml.Use en su
<object>lugar (por supuesto, reemplace cada URL con la suya propia):.BackgroundImage { background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top; width: 400px; height: 600px; }<!DOCTYPE html> <html> <head> <title>SVG Test</title> </head> <body> <div id="ObjectTag"> <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600"> Your browser does not support SVG. </object> </div> <div class="BackgroundImage"></div> </body> </html>fuente
Agregar el atributo de ancho a la etiqueta [svg] (editando el código fuente XML de svg) funcionó para mí: por ejemplo:
<!-- This didn't render --> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> ... </svg> <!-- This did --> <svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg"> ... </svg>fuente
Pude usar tu muestra para crear una página de prueba y funcionó bien. Mi suposición es que hay algo mal con su archivo svg. ¿Puedes pegar eso aquí también? Aquí está la muestra que utilicé.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/> </g> </svg>fuente
parece un error de Chrome, hice otra cosa ya que casi me vuelvo loco por esto ... usando el depurador de Chrom si cambia el css del objeto svg que muestra en la pantalla.
así que lo que hice fue: 1. verificar el tamaño de la pantalla 2. escuchar el evento "load" de mi objeto SVG 3. cuando el elemento está cargado cambio su css usando jQuery 4. me hizo el truco
if (jQuery(window).width() < 769) { jQuery('object#mysvg-logo')[0].addEventListener('load', function() { jQuery("object#mysvg-logo").css('width','181px'); }, true); }width: 180px;<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>fuente
Tuve un problema similar y las respuestas existentes a esto no eran aplicables o funcionaban, pero no pudimos usarlas por otras razones. Así que tuve que averiguar qué no le gustaba a Chrome de nuestros SVG.
En nuestro caso, resultó ser que el
idatributo de lasymboletiqueta en el archivo SVG tenía un:, que a Chrome no le gustó. Tan pronto como quité el:, funcionó bien.Malo:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72"> <defs> <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt"> ... </symbol> </defs> <use .... xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt" /> </svg>Bueno:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72"> <defs> <symbol id="NoMoreColon"> ... </symbol> </defs> <use .... xlink:href="#NoMoreColon" /> </svg>fuente
.svgla imagen no tiene su altura y ancho iniciales. Por tanto, no es visible. Tienes que configurarlo.Puede hacerlo en línea o en un archivo css:
En línea:
<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">Archivo CSS:
<img src="../images/Aged-Brass.svg" class="image" alt="logo">.image { width: 100px; height: 50px; }fuente
En mi caso, este problema persistió cuando creé y guardé el svg usando Photoshop. Lo que ayudó fue abrir el archivo con Illustrator y luego exportar el svg.
fuente
Inicialmente exporté mi svg de Photoshop CC y tuve que agregar manualmente
version="1.1"en la<svg>etiquetapara que se muestre en Chrome.
fuente
El tipo de contenido en el encabezado HTTP del servidor fue el problema para mí. Tengo un servidor node.js, agregado:
if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) { res.writeHead(200, { "Content-Type": "image/svg+xml" }); }pageName es mi variable local para lo que se solicita.
¡Supongo que este es un problema común! Estoy usando la versión actual de Chrome (marzo de 2020).
fuente
Tuvo el mismo problema. Si el servidor está configurado correctamente y .htacces no es la respuesta, es posible que desee buscar la fuente svg que está incrustando. Los míos se crearon con un editor de texto, se renderizaron bien en Chrome y Safari dentro del código html5, una vez incrustados, no se veía nada. Se agregó la versión, las dimensiones, etc. correctas al código svg y funciona como un encanto. Además, todos los estilos en línea.
Es decir
<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;" /> </svg>fuente
También tuve el mismo problema con Chrome, después de agregarlo
DOCTYPE, funciona como se esperaba<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">antes de
<?xml version="1.0" encoding="iso-8859-1"?> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve"> <g fill="none" stroke="black" stroke-width="15"> ...... ...... ....... </g> </svg>Después
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve"> <g fill="none" stroke="black" stroke-width="15"> ...... ...... ....... </g> </svg>fuente
Tenga cuidado de no tener la propiedad CSS de transición para sus imágenes svg
Ahora no sé por qué, pero si haces: "transición: todo fácil 0.3s" para la imagen svg en Chrome, las imágenes no aparecen
p.ej:
* { transition: all ease 0.3s }Chrome no renderiza svg.
Elimine cualquier propiedad CSS de transición y vuelva a intentarlo
fuente
En caso de problemas, intente abrir las imágenes primero con un programa que sea capaz de leer imágenes svg.
Si eso falla, entonces la imagen svg está dañada de alguna manera.
Tuve ese caso y copié las rutas svg en una nueva imagen svg y ajusté todos los detalles de las etiquetas svg.
Nunca probé la razón por la que no se estaba renderizando, pero supongo que algunos signos especiales invisibles causaron el error de renderizado. A veces, se editan archivos en Mac. Ya tenía este problema en otro contexto.
fuente
Tenía el mismo problema con una imagen SVG incluida a través de la etiqueta IMG. Resultó para mí que a Chrome no le gustaba que hubiera una línea en blanco directamente en la parte superior del archivo.
Eliminé la línea en blanco y mi SVG comenzó a renderizarse inmediatamente.
fuente
Me aseguro de agregar el estilo de la imagen . Funcionó para mi
style= "width:320; height:240"fuente
Just replace <img> tag to <object> tag for SVG image. <object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>fuente