Why doesn't my SVG background-image work?

Question

I placed a green PNG image as background to a div and it looks like this:

I used a CSS hack in order to keep the text inside the green background. So this is my code for that section:

#aboutprocess {
    background: url("../img/tech_bg.png") no-repeat left top;
    width: 100%;
    background-size: cover;
}
#aboutprocess .container {
    padding-top: 32.6316%;
    position: relative;
}
#aboutprocess .row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#aboutprocess p {
    color: #ffffff;
    text-align: center;
}

<section id="aboutprocess">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ">
                <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
                <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button>
            </div>
            <!--end col-md-8 col-md-offset-2-->
        </div>
        <!--end row -->
    </div>
    <!--end container-->
</section>
<!--end aboutprocess-->

I want to replace the PNG with an SVG file, and the only thing that I changed in the CSS is the file extension:

#aboutprocess {
    background: url("../img/tech_bg.svg") no-repeat left top;
    width: 100%;
    background-size: cover;
}

But when I preview this in browser, I can't see the background anymore:

What am I doing wrong? You can see the demo page with the PNG background image here.

Here's a Dropbox link to the SVG file.

Could you post your SVG file as well. – Holger Will Dec 07 '16 at 17:34 — Holger Will, Dec 07 '16 at 17:34
I updated my original post with a Dropbox link. – bijoume Dec 07 '16 at 17:44 — bijoume, Dec 07 '16 at 17:44

score 7 · Answer 1 · edited Sep 14 '21 at 13:23

7

Browsers will NOT display SVG files if the web server transfers it with the wrong "content-type" header.

If your web service is returning application/octet-stream or text/xml, the image will not work properly, in spite of the SVG being transferred correctly and the SVG file itself being fine.

The correct media type for SVG is image/svg+xml.

edited Sep 14 '21 at 13:23

TylerH

20,799
66
75
101

answered Jan 12 '18 at 19:41

Felype

3,087
2
25
36

score 4 · Accepted Answer · edited Sep 14 '21 at 13:28

4

There are a few potential solutions here.

Revisit how you created the SVG. The software you use and the method you generate it with (e.g. in Illustrator) matter greatly. There's a pretty specific way of doing it correctly.
_{This was the solution for OP; see comments for specifics}

Making absolutely positively sure that tech_bg.svg is in the directory that it's supposed to be (the img folder) and that it's spelled exactly the same as it is in the text editor, including case sensitivity of the filename and file extension. GitHub certainly takes extension case sensitivity literally and I've had problems uploading SVG files for that same reason (.svg vs .SVG).
Increasing the z-index of #aboutprocess, particularly if your text really has disappeared (I'm assuming it's still there, just white, but try highlighting it to make sure). Play around with the other CSS values nearby like no-repeat, left, top, etc, too.
Try clearing your browser cache and refreshing once, and try other browsers too. Also, if by some chance you happen to be using IE8 and below or Android 2.3 and below, that would definitely be the cause; they don't support SVGs in background-images.

It's a tough question to answer definitively since we can't be there testing it with you on your local machine, which is where the inconsistency is happening.

edited Sep 14 '21 at 13:28

TylerH

20,799
66
75
101

answered Dec 07 '16 at 18:03

Kyle Vassella

2,296
10
32
62

I actually exported this green background as svg from Photoshop. Maybe I should try Illustrator instead? It crossed my mind that maybe that might be the issue but why should Photoshop's svg be any different. Or is it? I'll give it a try. – bijoume Dec 07 '16 at 18:09
1

Photoshop has historically been a raster based graphics editor that cannot produce true SVGs, whereas Illustrator is a vector based graphics editor and is designed specifically to produce true SVG's. – Kyle Vassella Dec 07 '16 at 18:17
Ok, I tried the same thing in Illustrator. No luck. I made several other SVG files today that work just fine, so it can't be that I'm generating this wrong. – bijoume Dec 07 '16 at 18:20
Sorry, accidentally pressed enter. I was about to say that this may have changed some in the latest photoshop releases (Photoshop CC), but after looking online, I doubt it. I think photoshop CC's 'save as SVG' function is more for converting shapes, not png images. Converting a PNG to a true vector graphic is very unconventional anyways. But it is possible and it can look decent, particularly since yours is a solid color and not a picture of people or a building. If any program should do this, it's illustrator. Look up how to do it. You'll use the 'Live Trace' button. Could be ur problem. – Kyle Vassella Dec 07 '16 at 18:21
Hmm, it is a very odd problem. If I were you and I had exhausted all the options above (cache clearing, z-index, proper file location/name, true vector image, using different browser), I may even try a git push to a gh-pages branch and see what it looks like when uploaded. Could just be your local machine being finicky with the SVG. – Kyle Vassella Dec 07 '16 at 18:24
@KyleVassella actually if you open that svg in a browser you will see that it's not solid color at all. Also to OP , you could just put that base64 code straight into your css. Tho i don't think there's any point doing that, in this case. – VilleKoo Dec 07 '16 at 18:27
4

OP: If you are dragging a PNG into Photoshop and exporting as SVG, Photoshop will give it an .SVG extension, but your photo will almost certainly be re-rasterized on export. So you're adding the .SVG extension without making your file an actual functioning SVG (purpose of SVG is to make image infinitely scaleable). Photoshop is not designed to generate SVG - it's only designed to work with them since it has to be able to work with Illustrator files. If you want to actually create a real SVG, you MUST use Illustrator and use the Live Trace button. Currently you're using SVG with no benefit. – Kyle Vassella Dec 07 '16 at 18:53
Granted, this doesn't solve your original glitch of the image not showing up at all when your other photoshop 'svg' files did. But it does address another important issue - you're needlessly using large (slow) SVG files with no benefit. They are supposed to be 'scaleable' vector graphics but the ones saved out of PS are raster (pixel) based, rather than vector (line) based. Actually converting a saved PNG to SVG is a big deal, takes big processing power and decent amount of time after you click the Live Trace button. Not as simple as saving as a diff file extension unfortunately. – Kyle Vassella Dec 07 '16 at 19:14
1

You were right. I tried again.I exported the background image as PNG from Photoshop. I placed it in Illustrator, used Image Trace as High Fidelity Photo and saved it as SVG. And now it works fine. Previously I hadn't used the trace option. So thank you! :) But it addresses another issue. The tracing quality is not so good as it should. So I should probably stick to PNG anyhow. I just don't like the rough edges it leaves and I thougt that SVG would give a better result. – bijoume Dec 07 '16 at 19:58
I'm glad it showed up for you. You could play around with Illustrator's Trace Options (there are tutorials on YouTube), but I think a better way is to fix the rough edges in PhotoShop (do it to your original PNG file, no need to save as SVG). Using the Quick Selection Tool, select all of the green area. Then near the top of the PhotoShop window click the Refine Edge button. Finally adjust the 'Smooth' slider until you (possibly) get a better look. If smooth doesn't give you a cleaner edge, perhaps try the other sliders or a combo of sliders, but I think smooth alone should do a nice job. – Kyle Vassella Dec 07 '16 at 21:11
Last thing - if you have a problem with the 'Smooth' slider distorting the already clean left and right edges of your green bar, use the method I described above but instead of selecting the green area, try selecting the white areas and smooth those instead (if green is already selected, CMD+Shift+i (mac) or CTRL+Shift+i (Windows) will quickly inverse the selection to the white areas). – Kyle Vassella Dec 07 '16 at 21:24

score 0 · Answer 3 · answered Jan 11 '17 at 18:19

Sometimes the problem is not always came from the css. Please have a try to add the following line to your .htaccess, so the server can recognize svg files from your css file (background: url("../img/tech_bg.svg") no-repeat left top;), Insert this line:

RewriteRule !\.(js|ico|gif|jpg|jpeg|svg|bmp|png|css|pdf|swf|mp3|mp4|3gp|flv|avi|rm|mpeg|wmv|xml|doc|docx|xls|xlsx|csv|ppt|pptx|zip|rar|mov)$ index.php

No need to have so many rules as above but depends on what you need for the format you would like to have on your site, but for your current question here, please make sure there is "svg" in the rule of your .htaccess file.

It works, try it! :)

please check your browser's network tab or debugging console before going with this solution. If you aren't seeing errors with the request then this is not going to help you. — Sgnl, Apr 23 '18 at 23:56

score 0 · Answer 4 · answered Dec 19 '17 at 08:25

0

.pic {
    width: 20px;
    height: 20px;
    background-image: url("../img/tech_bg.svg");
    }

dont foreget dots and / ---> ../ not background ---> background-image: and dont forget clear browser history and cash

<div class="pic"></div>

answered Dec 19 '17 at 08:25

kamran abbasov

11

1

Please have a look at the other answers. – L. Guthardt Dec 19 '17 at 08:45

Why doesn't my SVG background-image work?

4 Answers4

Linked