How to display SVG images? (currently displaying broken images on website)
Hello all,
I'm having an issue where SVG files are displaying a broken image on the front of our website.
I can upload them as 'Images' or 'Files' through the media tab just fine and when I put them on a Rich Text Editor they are showing up on the umbraco interface - but when I save and publish, the corresponding webpage displays a broken image (regardless of 'Image' or 'File' type).
I've tried adding the following code to the umbracoSettings.config:
Thank you for your responses - after delving deeper with coworkers we've determined the issue was with my local umbraco looking for the uploaded image file in the wrong place. like this:
So we tried JPGs and JPEGs which resulted in a similar console error:
Clearly there is some trouble with my local umbraco website keeping track of the images, but this isn't really an issue because our live site is able to do this fine.
So I walked through the process with our editor to see the exact issue - it turns out the drag and drop was not uploading the svg correctly (I think it was automatically uploading it as a 'File') but going through the 3 dots and uploading as 'Media' file makes it work just fine on our live site!
I previously tried the following:
Making sure svg is not in the 'disallowedFileTypes' tag in
umbracoSettings.config
Adding the .svg mimeMap code to the web.config as suggested above
Adding 'imageFileTypes' tag in umbracoSettings.config with svg inside
it
Adding 'allowedFileTypes' in umbracoSettings.config with svg inside
it
I don't think it was solving the issue because of how media is being handled and kept track of by Umbraco on my local - but I'm gonna try these methods now to see if they allow me to drag and drop the 'media' file type because that should make life a lot easier for our editor.
whew - so the issue is pretty much resolved - I hope my ramblings are somewhat clear and hopefully might be able to help some one in the future if they run in to a similar problem.
Also, for your reply Søren, this is what I was seeing:
Then the front end:
How to display SVG images? (currently displaying broken images on website)
Hello all,
I'm having an issue where SVG files are displaying a broken image on the front of our website.
I can upload them as 'Images' or 'Files' through the media tab just fine and when I put them on a Rich Text Editor they are showing up on the umbraco interface - but when I save and publish, the corresponding webpage displays a broken image (regardless of 'Image' or 'File' type).
I've tried adding the following code to the umbracoSettings.config:
Which didn't work.
Let me know if there's any more details I can provide to help diagnose the issue.
Any help is much appreciated!
(using Umbraco 7.13.2 btw)
Hi,
Can you give examples of the output, working and non-working if possible :)
Have you got the svg mime type added to the web.config?
Thank you for your responses - after delving deeper with coworkers we've determined the issue was with my local umbraco looking for the uploaded image file in the wrong place. like this:
So we tried JPGs and JPEGs which resulted in a similar console error:
Clearly there is some trouble with my local umbraco website keeping track of the images, but this isn't really an issue because our live site is able to do this fine.
So I walked through the process with our editor to see the exact issue - it turns out the drag and drop was not uploading the svg correctly (I think it was automatically uploading it as a 'File') but going through the 3 dots and uploading as 'Media' file makes it work just fine on our live site!
I previously tried the following:
I don't think it was solving the issue because of how media is being handled and kept track of by Umbraco on my local - but I'm gonna try these methods now to see if they allow me to drag and drop the 'media' file type because that should make life a lot easier for our editor.
whew - so the issue is pretty much resolved - I hope my ramblings are somewhat clear and hopefully might be able to help some one in the future if they run in to a similar problem.
Also, for your reply Søren, this is what I was seeing:
Then the front end:
Also,
-Adding 'imageFileTypes' tag in umbracoSettings.config with svg inside it
allows me to drag and drop the svg files as 'Media' type - so hopefully that makes life a bit easier for our editor
is working on a reply...