¿Cómo utilizar una imagen SVG como fondo?

Debo estar haciendo algo mal. La imagen se exportó de Illustrator como SVG y (no estoy seguro de si esto es relevante o no) tiene algunos datos de píxeles. Here's my JSFiddle example.¿Cómo utilizar una imagen SVG como fondo?

Tenga en cuenta que va directamente a la imagen, se muestra muy bien: http://ykcreations.com/tv.svg

Editar: Esto no funciona en Chrome o Safari pero lo hace en Firefox. ¿Problema de Webkit?

Fuente

2012-07-17 Yuval Karmi

Parece que me funciona. – Herohtar

Funciona bien para mí ... sin embargo, llevó mucho tiempo cargar. –

No funciona para mí en Chrome/ubuntu pero funciona en FF/ubuntu. –

Tiene que ver con su imagen, trate de conectar el siguiente en su CSS:

.tv 
{ 
    background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg"); 
    width: 400px; 
    height: 400px; 
}

Tal vez su SVG es en realidad un SVGZ? Los archivos SVGZ son las versiones comprimidas de los archivos SVG. Por lo general, debe configurar su servidor para que lo haga, pero es posible que FF solo pueda tratar con las versiones comprimidas.

EDIT Consulte la respuesta de Phrogz a continuación (posiblemente más arriba cuando lea esto); cubre esto y da una mejor explicación.

Fuente

2012-07-17 20:38:14

Puede ver en los encabezados de respuesta HTTP que los datos no tienen gzip. – Phrogz

¿El encabezado indicaría si el archivo FUE comprimido pero no correctamente marcado como comprimido? (Lo pido solo porque honestamente no sé estas cosas) –

Si ese fuera el caso, entonces 'curl http: // www.ykcreations.com/tv.svg' entraría datos binarios. No; muestra la codificación adecuada. – Phrogz

Hay un problema con su SVG de origen. Ver este violín actualizado señalando a different SVG file que funciona correctamente: http://jsfiddle.net/wdW2K/2/

.tv { 
    background: url("http://phrogz.net/svg/800x800.svg"); 
    width: 400px; height: 400px; 
}

Editar: En concreto, el problema aparece ser que WebKit no soporta <image> en un SVG utilizado como fondo. Modificando su archivo mínimamente para cambiar el <image> para hacer referencia a un archivo local (sin datos) y agregando un <circle/>, pude ver tanto la imagen como el círculo al ver el SVG directamente en Chrome, pero cuando se usa como fondo solo la imagen del círculo era visible.

This bug huele relevante.

Fuente

2012-07-17 20:38:37 Phrogz

No entiendo muy bien tu edición. También tengo un archivo SVG que no funciona como fondo y veo que tiene una gran parte de '' .. – vsync

@vsync Lo que estaba diciendo es que reduje el ejemplo para ser muy simple: el ' 'elemento no utilizaba' data: 'uri, y no usaba contenido complejo, y parecía correcto por sí mismo pero incorrecto como fondo. Se trata de datos que respaldan la creencia de que hay un error en WebKit, y no un problema con el contenido. – Phrogz

hay un error, desearía poder encontrarlo para poder protagonizarlo. – vsync

Otra causa posible es servir el SVG con el tipo MIME incorrecto. Establecerlo en 'image/svg + xml' puede solucionar el problema.

En Rails, esto se puede hacer mediante la adición de lo siguiente a config/intializers/mime_types.rb:

Mime::Type.register 'image/svg+xml', :svg

Fuente

2016-05-20 23:52:12 joe

Lo arreglé para PHP usando https://css-tricks.com/snippets/htaccess/serve -svg-correct-content-type/& http://stackoverflow.com/a/37598893/1461060 – gihanchanuka

que tenía un problema con simmilar renderizado SVG imagen de fondo en Chrome como, pero todo estaba bien en Firefox.Me di cuenta de que había un error de sintaxis dentro de mis archivos SVG exportados de Adobe:

mal atributo XLink:

xlink:href="data:img/png;base64

correcta atributo XLink:

xlink:href="data:image/png;base64

artículo abajo:

Link to article from css-trick that helped me

Fuente

2017-10-19 06:43:53 Adi

¿Cómo utilizar una imagen SVG como fondo?

Respuesta

Cuestiones relacionadas