SVG not rendering in Safari
I have several pages on my site that show SVG images on any browser without a problem. One of the pages shows two different SVG images, and one of them is a pretty complex image. In my Chrome Web Browser, the complex image shows up without a problem, but when I try to view that page in Safari the SVG shows up with blank spots in the image where there is supposed to be content.
I think I need to replace the image with a PNG version of the SVG image for Safari browswers, but I have no idea how to do that. Does anyone know how I can fix this SVG problem or replace the SVG with a PNG if the web client is safari?
If you are trying to do an inline SVG I dont think it's supported in Safari:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <svg id="newYear" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="year" cx="150" cy="150" r="50" fill="blue" /> </svg> </body> </html>
You should try declaring it like you would an image:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <embed src="circle.svg" type="image/svg+xml"></embed> <object data="circle.svg" type="image/svg+xml"></object> <iframe src="circle.svg"></iframe> </body> </html>
I would also look into a PNG fallback. A Google search will render results on how to do a fallback for legacy browsers. Have you looked into previous question?
If you want a better answer I would suggest editing your question to show what you've tried and the code because it's hard to ask for help when we have no clue what the you're doing exactly.