I'm trying to use an SVG on background-image like:
.logo
{position: absolute;
width: 300px; height: 300px;
background-image: url(../img/logo.svg);
background-size: 256px 256px;
background-repeat: no-repeat;}
This works on Safari, Firefox, Chrome, but not on Opera and I don't get the problem.
Example Chrome 24:
[CHROME](I'm so sorry, I deleted the example from host)
Example Opera 12.14:
[OPERA](I'm so sorry, I deleted the example from host)
UPDATE 1:
SVG File
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#00A99D" d="M41.027,96.075H16.375v-54.84c0-10.062,2.636-18.258,7.91-24.586c3.032-3.647,6.888-6.547,11.568-8.7
c4.68-2.153,9.48-4.23,14.402-4.23c9.798,0,18.061,4.296,24.784,10.887c6.724,6.591,10.085,14.677,10.085,24.256
c0,9.316-3.341,17.357-10.019,24.124c-6.68,6.769-14.59,10.151-23.729,10.151c-1.495,0-3.691-0.154-6.591-0.462
c0,0,15.358-31.682,15.358-34.277c0-2.592-0.945-4.801-2.834-6.625c-1.891-1.823-4.153-2.735-6.79-2.735
c-6.328,0-9.491,4.373-9.491,13.117V96.075z"/>
</g>
<g>
<path fill="#003333" d="M67.922,9.087 M56.177,30.83c-1.147-0.565-2.048-1.283-3.411-1.283c-5.88,0-8.821,4.373-8.821,13.117
v53.411H21.038V41.741c0-17.062,2.45-18.258,7.351-24.586c6.874-8.876,18.079-15.234,29.436-12.2
c3.438,0.918,6.994,2.387,10.098,4.132"/>
</g>
<polyline fill="#003333" points="15.557,19.809 21.038,47 40,44 40,20 "/>
</svg>
Removing the width
and height
attributes in the svg makes it render nicely (tested in Opera 12).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With