SVG image is not displayed

Question

I placed a green png image as the background for the div and looks like this:

I used a CSS hack to save text inside a green background. So this is my HTML for this section:

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

And this is CSS:

#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;
    }

Now I want to replace the png with the svg file, and the only thing I changed in CSS is the file extension:

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

But when I view this in the browser, I no longer see the background:

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

Thank you for your help.

EDIT: Here is the Dropbox link to the SVG file.

Answer 1

, , , tech_bg.svg , ( img), , , . GitHub, , , SVG (.svg vs .SVG).

OP, . : . , SVG? , , Illustrator? .

, , z-index #aboutprocess, ( , , , , ). CSS , , , .. .

, . , IE8 Android 2.3 , .

, , , .

Answer 2

css. .htaccess, svg css (background: url ( "../img/tech_bg.svg" ) no- repeat left top;), :

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

, , , , , , " svg" .htaccess.

, !:)

Answer 3

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

dont foreget points /--- > ../ --- > background-image:

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

Answer 4

, , - ( Google): svg, - "content-type". - "application/octet-stream" "text/xml", , , , SVG .

SVG image/svg+xml