google-chrome - manager - tag analytics chrome
Chrome no representa el SVG al que se hace referencia mediante la etiqueta<img> (12)
Agregar el atributo de ancho a la etiqueta [svg] (editando el código fuente 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>
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.
<img src="../images/Aged-Brass.svg">
Totalmente en pérdida aquí en cuanto a cuál 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)
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, trato de usar un archivo svg 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.
Exporté mi svg desde Photoshop CC inicialmente y tuve que agregar manualmente
version="1.1" en la etiqueta <svg>
para que se muestre en cromo.
La etiqueta svg necesita el atributo de espacio de nombres xmlns:
<svg xmlns="http://www.w3.org/2000/svg"></svg>
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>
También tengo el mismo problema con Chrome, después de agregar 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>
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 y Safari dentro del código html5, una vez incrustados, no había nada visible. Se agregó la versión correcta, las 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>
Tuve un problema similar y las respuestas existentes no fueron aplicables o funcionaron, pero no pudimos utilizarlas por otros motivos. Así que tuve que descubrir qué le disgustó a Chrome sobre nuestros SVG.
En nuestro caso resultó ser que el atributo id de la etiqueta de symbol en el archivo SVG tenía un : en él, que a Chrome no le gustó. Tan pronto como eliminé 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>
Use <object> lugar (por supuesto, reemplace cada URL por la suya):
.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>
Vine aquí porque tenía 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. Lo arreglé agregando lo siguiente a mi archivo .htaccess:
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
Fuente: http://kaioa.com/node/45
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 ''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 algunos otros consejos útiles para exportar http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Esto funcionó para mí, espero que sea útil.
parece un error de Chrome, hice algo más ya que casi me vuelvo loco por esto ... usando el depurador Chrom si cambias el css del objeto svg que se muestra en la pantalla.
entonces lo que hice fue: 1. verificar el tamaño de la pantalla 2. escuchar el evento "cargar" de mi objeto SVG 3. cuando el elemento está cargado, cambio su CSS usando jQuery 4. me funcionó
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>
.svg imagen .svg no tiene su altura y ancho iniciales. Por lo tanto, no es visible. Tienes que configurarlo.
Puede hacer 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;
}