CODEWITHSUNDEEP
htmlcsssvg
wetjosh
wetjosh

Reputation: 6398

SVG background not displaying in Safari

Works fine in Firefox and Chrome. Safari just doesn't display my SVG background image. What's the deal?

HTML

<div class="container">
    <div class="row">
        <header class="span12 hero-unit">
            <h1>Timeline</h1>
        </header>
    </div>
    <div class="svg"></div>
</div>

CSS

.svg {
    width: 200px;
    height: 200px;
    background-image: url(../img/mars.svg);
    background-size: contain;
}

Link

http://distantfuturejosh.com/timeline/

Upvotes: 3

Views: 7067

Answers (3)

Arslan Chaudhary
Arslan Chaudhary

Reputation: 1

I was just searching out about SVG background that was not working on Windows safari and after extensive search I found this issue. I was using it with linear gradient like this

background:url("../images/cover-blue-nodots.svg"), linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);

it was not working and I just use webkit and provide it all this stuff in it and it works.

background:url("../images/cover-blue-nodots.svg"), linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);
background:url("../images/cover-blue-nodots.svg"), -webkit-linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);

Upvotes: -1

wetjosh
wetjosh

Reputation: 6398

Ok, my problem was a graphics software issue, not a web code problem. But for the record, what I was doing was opening a raster psd in Illustrator and saving it as an svg. That just embedded a png inside an svg as Erik pointed out. To fix this, I simply selected the object in illustrator, chose Object > Image Trace > Make. Then I selected my preferred image tracing preset (6 colors) and saved that as an svg. Works beautifully.

Upvotes: 3

Scott Solmer
Scott Solmer

Reputation: 3897

Have you tried it leaving off the "-image" like this?

background: url(../img/mars.svg);

Reference Using SVG as a background-image

Upvotes: 0

Related Questions