SVG files in CSS not loading

Has anyone tried using a SVG file inside their css? For some reason the mime type is getting set to text/html. 

I've updated web config for image/svg+xml

This is what is in the CSS:

background-image:url(../Images/svgs/XYZ.svg);

If i direct link to the svg in a browser it works. So something on server side seems to be setting incorrect mime-type. I hope this isn't a bug in Sitefinity.

Thanks

Hi,

I am afraid that it is not possible to use the SVG file in CSS. The way I would advise to proceed with this is to include the xml directly on the page/template or using a content block and place the markup in the HTML window. Please take a look at the video we have recorded for your convenience.

Regards,
Stefani Tacheva
Telerik

is there really no way to get this working from the server side?

the svgs are fairly complex so i don't want to make a massive css file.

what exactly is happening that the mime type is being converted to text/html?

Hi,

Unfortunately, this is a limitation of Sitefinity and it is not possible to use them in a way different than the one described in the video demonstration.

Regards,
Stefani Tacheva
Telerik

Hi kele

I had to reference an svg file in CSS too. You can use Data URIs to do so (making sure to use proper base64 coding for internet explorer):

background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCINCgkgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJMYXllcl8xIiBkaXNwbGF5PSJub25lIj4NCjwvZz4NCjxnIGlkPSJlbF94NUZfYmFzaWMiPg0KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRDlEOUQ5IiBkPSJNMTkuNDEzLDE3LjQ3NGwtNS4xNjYtNS4xNjVjMC44NzYtMS4yMzUsMS4zOTEtMi43NDQsMS4zOTEtNC4zNzMNCgkJYzAtNC4xODItMy4zOTItNy41NzMtNy41NzQtNy41NzNjLTQuMTgzLDAtNy41NzUsMy4zOTEtNy41NzUsNy41NzNjMCw0LjE4MiwzLjM5Miw3LjU3Myw3LjU3NSw3LjU3Mw0KCQljMS42NTksMCwzLjE5NC0wLjUzNSw0LjQ0Mi0xLjQ0bDUuMTU3LDUuMTU2YzAuNDUsMC40NSwxLjE4NCwwLjQ1LDEuNjM0LDBsMC4xMTctMC4xMTdDMTkuODYzLDE4LjY1OCwxOS44NjMsMTcuOTI0LDE5LjQxMywxNy40NzQNCgkJeiBNOC4wNjQsMTMuMzI3Yy0yLjk3OCwwLTUuMzkyLTIuNDE0LTUuMzkyLTUuMzkxYzAtMi45NzYsMi40MTQtNS4zOTEsNS4zOTItNS4zOTFjMi45NzcsMCw1LjM5MSwyLjQxNCw1LjM5MSw1LjM5MQ0KCQlDMTMuNDU1LDEwLjkxMywxMS4wNDEsMTMuMzI3LDguMDY0LDEzLjMyN3oiLz4NCjwvZz4NCjwvc3ZnPg0K") no-repeat 5px center;
    
I ran the svg through this encoder: www.opinionatedgeek.com/.../

Kurren

If you use visual studio you might also check into WebEssentials.  It has a base64 encode tool as well.  I have not tried it with SVG though.

What happens if you place the svg file in the root dir of your website and reference it there:

background-image:url(/XYZ.svg);

 I seem to recall this working for me but it has been a year or so since I messed with it (was Sitefinity 5.4 or 6).

Yes i think that likely will work. It seems you just can't put specific mime-types in the App_Data directories where App_Themes lives.

 We ended up just using a CDN so that worked for us. But we did move our webfonts outside of App_data and that worked for us. So i would assume that would work for the SVG's as well.

Sorry for arriving late to the party, but I found a workaround to this.

IIS7's URL Rewrite allows rewriting of outbound values as well as inbound...

<rewrite>
            <outboundRules>
                <rule name="SVG" preCondition="SVG PC" patternSyntax="Wildcard" stopProcessing="true">
                    <match serverVariable="RESPONSE_Content-Type" pattern="*" />
                    <action type="Rewrite" value="image/svg+xml" />
                    <conditions>
                    </conditions>
                </rule>
                <preConditions>
                    <preCondition name="SVG PC">
                        <add input="REQUEST_URI" pattern=".svg$" />
                    </preCondition>
                </preConditions>
            </outboundRules>
        </rewrite>

 ^^ this basically checks that a file has a filetype of .svg on the way in (request), and then rewrites the Content-Type header to to image/svg+xml on the way out (response)

Just stumbled upon this thread. It's June 2017 and we're still facing the very same problem/limitation with Sitefinity 10 (10.0.6400.1 to be exact).

This workaround works like a champ.

Thanks very much for sharing!