+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / SVG files in CSS not loading

SVG files in CSS not loading

9 posts, 0 answered
  1. kele
    kele avatar
    10 posts
    Registered:
    05 Nov 2013
    06 Dec 2013
    Link to this post
    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
  2. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    21 Nov 2016
    11 Dec 2013
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. kele
    kele avatar
    10 posts
    Registered:
    05 Nov 2013
    11 Dec 2013
    Link to this post
    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?
  4. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    21 Nov 2016
    16 Dec 2013
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Kurren
    Kurren avatar
    23 posts
    Registered:
    08 Jun 2013
    29 Jan 2014
    Link to this post
    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: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

    Kurren
  6. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    30 Jan 2014 in reply to Kurren
    Link to this post
    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.
  7. Eric
    Eric avatar
    7 posts
    Registered:
    10 Dec 2012
    22 May 2014
    Link to this post

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

  8. kele
    kele avatar
    10 posts
    Registered:
    05 Nov 2013
    22 May 2014
    Link to this post

    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.

  9. Paul
    Paul avatar
    1 posts
    Registered:
    13 May 2014
    20 Jun 2014 in reply to kele
    Link to this post

    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)

9 posts, 0 answered