Cannot get .svg files to work
I am trying to use .svg image files in my sitefinity site but they are not working. The content-type that is being returned in the header when the svg is requested is 'text/html'. I have had our server team add the correct mime type of 'image/svg+xml' and I have also created a mime mapping for it under Settings > Libraries > Mime Mappings with the same correct information. Even after an IIS reset it is still returning 'text/html' in the header. Is there something I'm missing or something else I can check?
Hello Matt,
Can you please let us know how exactly you reproduce the problem. I am able to upload .svg files in Sitefinity documents and then download them. A video, illustrating the problem would be helpful.
Greetings,Hi Jen,
I've attached two videos. In the first one, I try uploading a svg on a page and it displays the error message I am getting in Chrome. In the second video, I have uploaded a svg file on the back end into my theme, I then use css to try to display the image as a background. Using Chrome's developer tools, I have displayed the mime type message I'm getting. The other thing to note is that if I go directly to the image, it shows up fine. This is illustrated at the end of my video. I hope this helps!
(videos look best using 'large player') I have also attached the error messages, they are difficult to read in the video.
Video1: www.youtube.com/watch
Video2: www.youtube.com/watch
Thanks,
Matt
Hello Matt,
I was able to reproduce the uploading of .svg files problem. the exception is actually raised in the UploadImage method by a System method, called FromStream.
img = System.Drawing.Image.FromStream(source);
Thanks for the Reply Jen,
So this means that you cannot upload SVG's in Sitefinity? You said that you were able to upload SVG's in your previous post above. How did you get it to work that time? If you were not able to get it to work, do I need to submit a bug? How about the second video I posted above. If I reference an SVG that is hosted on someone else's site it works fine but if I reference it hosted on my sitefinity website the svg will not show up because it has the wrong mime type. Is this also a problem with the class?
Hey Jen, is there any way to get an SVG to work?
Hi Matt,
I believe what Jen was trying to say is that uploading *.svg files is possible trhough the Documents and Files section (i.e. it will be treated as a file), however our Images implementation does not support *.svg.
You can still store the *.svg-s under Documents and files and then retrieve them in your widgets using our Documents API
All the best,
Boyan Barnev
the Telerik team
Using data URI's works. Not my favorite technique cause they are lengthy and client has to download it every time. Still, if it's just an svg here and there it will work.
If you want to support both svg and png for a given image, go ahead and put both in your document at the same spot. Then give png images the css class "imagePNG" and your svg images the "imageSVG" class. Rules in CSS are as follows:
.svg .imagePNG,
.no-svg .imageSVG display: none;
This should serve the right image to the client and allow you to utilize SVG when your client browser actually can.
Hope this helped!
so is there really no way to use an SVG as a background image in CSS? We don't want to have to use Data-uris.
We're not even trying to upload svgs, we just have some that are part of our theme.
Matt did you every get this working?