Advertisement


SVG not rendering in Safari


Question

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?

2015/01/02
1
-1
1/2/2015 2:28:00 AM

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.

2
5/23/2017 12:40:00 PM