Chrome no representa SVG a través de <img> etiqueta

Tengo problemas con Google Chrome que no muestra svg con una etiqueta img. Esto sucede al actualizar la página y la carga de la página inicial. Puedo hacer que aparezca la imagen "Inspeccionando Elemento", luego hago clic derecho en el archivo svg y abro el archivo svg en una nueva pestaña. La imagen svg se representará en la página original.Chrome no representa SVG a través de <img> etiqueta

<img src="../images/Aged-Brass.svg">

Totalmente a pérdida aquí en cuanto a lo que es el problema. La imagen svg rinde bien en IE9 y FF simplemente no en Chrome o Safari.

Tengo mis tipos MIME establecidos también. (Imagen/svg + xml)

EDIT: Aquí es una página HTML simple que he construido 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 se puede ver que estoy tratando de utilizar un archivo SVG, tanto en una etiqueta img y en css como imagen de fondo. Tampoco funciona en la carga de la página inicial en Chrome o Safari. Cuando inspeccione el elemento, haga clic derecho svg o haga clic en el enlace para cargar svg en otra ventana, el archivo svg aparecerá en la pestaña original.

Fuente

2012-05-24 Jason Van Vuren

¿Puede poner un ejemplo, o publicar un código de ejemplo aquí? – Sirko

Realmente necesitamos poder ver y reproducir esto nosotros mismos si quiere ayuda. – Phrogz

Por casualidad, ¿su "Aged-Brass.svg" contiene una imagen incrustada? Tuve el mismo problema, y eso es lo que tracé a ... – McGarnagle

Pude usar su muestra para crear una página de prueba, y funcionó bien. Mi suposición es que hay algo mal con tu archivo svg. ¿Puedes pegar eso aquí también? Aquí está la muestra que usé.

<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

2012-09-25 22:26:41 Jlange

Vine aquí porque tenía el mismo problema, cuando me inspeccionar el elemento i puedo ver el archivo, pero en el sitio que no puedo (incluso cuando se utiliza 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 'vincular'. como enlace solo se referirá a sus archivos locales en lugar de incluir los datos (si lo entiendo correctamente). enter image description here

lo leí en el sitio web de Adobe, que tiene algunos otros consejos útiles para la exportación de http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Esto funcionó para mí, espero que haya sido útil.

Fuente

2014-11-11 10:52:15 MintWelsh

Vine aquí porque tuve un problema similar, la imagen no se estaba procesando. Lo que descubrí fue que el encabezado de tipo de contenido de mi servidor de prueba no era correcto. Me fijo añadiendo lo siguiente a mi archivo .htaccess:

AddType image/svg+xml svg svgz 
AddEncoding gzip svgz

Fuente: http://kaioa.com/node/45

Fuente

2015-06-19 21:08:34 user87312

¡Agregué esas 2 líneas dentro de mi archivo httpd.conf y funciona! gracias – danisupr4

por favor arregle el enlace roto –

Confirmo que esto funciona. httpd.conf o .htaccess está bien –

Uso <object> lugar (Por supuesto, cambia cada URL con su 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

2017-02-08 23:42:25 Essem

Tenía el mismo problema. Si el servidor está configurado correctamente y .htacces no es la respuesta, podría querer buscar la fuente svg que está incrustando. Los míos se crearon con el editor de texto, se procesaron bien en Chrome & Safari dentro del código html5, una vez incrustado, no había nada visible. Agregó la versión correcta, dimensiones, etc. al código svg y funciona como un amuleto. 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

2017-09-12 18:56:56 Uku

La etiqueta SVG necesita el espacio de nombres de atributo xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Fuente

2017-09-15 11:38:29 bang

se ve como un error Chrome, lo hice otra cosa que casi me loco debido a esto .. . usando el depurador Chrom si cambia el css del objeto svg que se muestra en la pantalla.

Así que lo que hice fue: 1. cheque por tamaño de la pantalla 2. escuchar el caso de "carga" de mi objeto SVG 3. cuando se carga el elemento cambie su css y jQuery 4. lo hizo el truco para mí

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

2017-10-28 13:33:12

que también consiguió el mismo problema con cromo, después de añadir 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

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

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

2018-01-22 13:12:32 NeosFox

Chrome no representa SVG a través de <img> etiqueta

Respuesta

Cuestiones relacionadas