Estoy teniendo problemas con google chrome no de representación svg con una etiqueta img. Esto sucede cuando la actualización de la página y la carga de la página inicial. Puedo conseguir que la imagen se muestre por «Inspeccionar Elemento», a continuación, haga clic en el archivo svg y abrir el archivo pdf en una nueva pestaña. La imagen svg, entonces será prestado en la página original.

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

Totalmente a la pérdida de aquí en cuanto a cuál es el problema. La imagen svg, hace bien en IE9 y FF no sólo en Chrome o Safari.

Tengo mis tipos MIME y definir así. (image/svg+xml)

EDICIÓN:
Aquí es una simple página html 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 estoy tratando de usar un archivo svg en tanto, una etiqueta img y en la css como una imagen de fondo. Ni un trabajo sobre la carga de la página inicial en chrome o safari. Cuando me inspeccionar elemento clic derecho svg o haga clic en el enlace svg carga en otra ventana el archivo svg se representará en la ficha original.

  • Puede usted poner un ejemplo o publicar el código de ejemplo aquí?
  • Realmente, necesitamos ser capaces de ver y reproducir nosotros si desea obtener ayuda.
  • Por casualidad, ¿tu «Edad de Bronce.svg» contienen una imagen incrustada? Yo tenía el mismo problema, y eso es lo que he trazado para …

17 Comentarios

  1. 52

    Una manera simple y fácil; de acuerdo a
    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,

    a mí me funcionó!

    • Esta es una solución de trabajo. Me encontré con este problema al exportar un smart objeto vectorial SVG utilizando photoshop.
    • Este era un protector de la vida, pasó horas tratando de averiguar cuál es el problema era. Gracias!!
    • Asimismo, esta solucionado mi problema, también pasó un montón de tiempo tratando de averiguar por qué la imagen no se muestra arriba.
    • Yo no tenía esta línea de código en el archivo SVG, y agregando que en el <svg> etiqueta hicieron nada para mí.
  2. 28

    El svg-etiqueta necesita el espacio de nombres de atributo xmlns:

    <svg xmlns="http://www.w3.org/2000/svg"></svg>
    • Este. Y yo tenía que cargar como una imagen de fondo de un div.
    • El svg todavía necesita el espacio de nombres. Sólo asegúrese de que se define en el archivo SVG que utiliza como telón de fondo.
  3. 26

    vine aquí porque yo tenía el mismo problema,
    cuando me inspeccionar el elemento que puede ver el archivo, pero en el sitio que no se puede (incluso cuando se usa localhost)

    la respuesta a mi problema estaba en guardar el archivo SVG.
    Si ha guardado desde illustrator asegúrese de hacer clic en ‘incrustar’ y no ‘link’. como enlace sólo se refiere a los archivos locales, en lugar de incluir los datos (Si he entendido bien).
    Chrome no de representación SVG hace referencia a través de <img> etiqueta

    He leído sobre él en el sitio web de adobe que tiene algunos consejos útiles para la exportación de
    http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

    Esto funcionó para mí, la esperanza era útil.

    • Alguien sabe si hay una forma de hacerlo con un objeto inteligente en Photoshop? La apertura de illustrator y re-exportación con esta opción en illustrator era la única cosa que me deja mostrar svgs en chrome, después de varios intentos en otras revisiones.
    • ¿Cuál es el efecto de esa opción en el real SVG código?
  4. 14

    Vine aquí porque he tenido un problema similar, la imagen no estaba siendo prestados. Lo que descubrí fue que el encabezado de tipo de contenido de mi servidor de prueba no era correcta. Me fijo por la adición de la siguiente para mi .archivo htaccess:

    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
  5. 7

    Uso <object> lugar (por supuesto, sustituir a cada URL con el propio):

    CSS:

    .BackgroundImage {
            background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
    }

    HTML:

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

  6. 3

    Yo era capaz de utilizar su ejemplo para crear una página de prueba, y ha funcionado bien. Mi suposición es que hay algo mal con su archivo svg. Puedes pegar aquí? Aquí está el ejemplo he utilizado.

     <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>
  7. 2

    parece un bug de Chrome,
    yo hice algo así casi me tiene loco porque de esta…
    el uso de Cromo depurador de si cambiar el css de la svg objeto que se muestra en la pantalla.

    así que lo que hice fue:
    1. compruebe el tamaño de la pantalla
    2. escuchar a la «carga» evento de mi SVG objeto
    3. cuando el elemento es cargado puedo cambiar su css con jQuery
    4. se hizo el truco para mí

    JS:

    if (jQuery(window).width() < 769) {
    
      jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
           jQuery("object#mysvg-logo").css('width','181px');
      }, true);
    
    }

    CSS:

    width: 180px;

    HTML:

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

  8. 2

    Añadir el atributo width de la [svg] de la etiqueta (por la edición de la svg XML de origen) trabajó 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>
  9. 2

    He tenido un problema similar y las respuestas existentes a esto no se aplica, o trabajado, pero no podíamos utilizar para otras razones. Así que yo tenía que averiguar lo que Chrome le desagrada acerca de nuestro SVGs.

    En nuestro caso resultó ser que el id atributo de la symbol etiqueta en el archivo SVG, había un : en ella, que Chrome no me gusta. Pronto como me quita 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>
  10. 1

    He exportado mi svg desde Photoshop CC inicialmente y tuvo que agregar manualmente

    version="1.1" en el <svg> etiqueta

    para conseguir que se muestra en chrome.

  11. 1

    En mi caso este problema persistió cuando he creado y guardado el archivo svg utilizando Photoshop.
    Lo ayudó, fue abrir el archivo utilizando Illustrator y exportación de svg después.

    • Qué ha cambiado en el real SVG código? Estoy usando ni Photoshop ni Illustrator, necesito arreglar existente en un archivo SVG.
  12. 0

    Tenía el mismo problema. Si el servidor está configurado correctamente y que .htacces no es la respuesta, puede ser que desee mirar el svg fuente de incrustar. La mina fueron creados con el editor de texto, en que se rindió bien en Chrome&Safari en el interior de código html5, una vez incorporadas, nada era visible.
    Añadido versión correcta, dimensiones, etc para el svg código y funciona como un encanto.
    También, 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>
  13. 0

    .svg imagen no tiene es la altura inicial y la anchura. Por lo tanto no es visible. Tienes que ponerlo.

    Puede hacer ya sea en línea o en el 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;
    }
  14. 0

    Yo también tengo el mismo problema con chrome, después de la adición de DOCTYPE que funciona como se espera

    <!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 de

        <?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>
    • ¿Cuál es la diferencia entre estos dos fragmentos de código? No estoy viendo.
    • mi mal, primero se supone sin doctype
  15. 0

    Que asegurarse de que usted agregue el Estilo de la Imagen
    que se trabajó para mí.

    style= "width:320; height:240"
  16. 0

    Tenga cuidado de que usted no tiene transición propiedad css para que las imágenes svg

    Yo no ahora, ¿por qué, pero si usted hace: «la transición: toda facilidad 0,3 s» para una imagen svg en Chrome las imágenes no aparecen

    e.g:

    * {
       transition: all ease 0.3s
      }
    

    Chrome no representan svg.

    Eliminar cualquier transición de la propiedad de css y pruebe de nuevo

  17. 0

    Sobre los problemas de intentar abrir las imágenes con un programa que es capaz de leer el formato svg-imágenes.

    Si eso falla, entonces el svg de imagen está dañado de alguna manera.

    Tuve ese caso, y copia el archivo svg-rutas en un nuevo svg-imagen y ajustar todos los detalles de la svg-etiquetas.

    Nunca he probado la razón por la que no fue de representación, pero supongo que algunos invisibles signos especiales causado el render-error. Llegar a veces los archivos editados en Mac, he tenido este problema en otro contexto ya.

Dejar respuesta

Please enter your comment!
Please enter your name here