: 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
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?
More posts by @Sherry646
1 Comments
Sorted by latest first Latest Oldest Best
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?
Not able to render SVG image in Safari
Safari embeded SVG doctype
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.