-1

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?

Improve this question
0

1 Answer 1

Reset to default
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.