SVG image not showing up in Safari browser

The image I created in Figma was exported as an SVG and consists of a collage made up of 11 other images. However, the image does not display correctly on Safari, neither on my MacBook nor iPhone, but it renders fine on Chrome. What could be causing this issue? You can view the original file after exporting from Figma here.

Here is the SVG code along with some of the image encoding:

<svg width="1440" height="1107" viewBox="0 0 1440 1107" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  (SVG code here)

This is how I'm trying to render the SVG image using Next.JS:

<Image
   className="absolute left-0 top-0 h-full w-full object-cover object-center"
   src="/assets/Hero.svg"
   fill={true}
 />

I also attempted using the <img> tag but that didn't solve the problem.

cssiossvgnext.jssafari

Answer №1

The issue may stem from Safari's treatment of base64-encoded images and the xlink:href attribute.

To fix it, update xlink:href to href in the <use> tags:

<use href="#image0_1330_2263" transform="translate(-0.43633) scale(0.000749064)" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminating date and time formatting in HTML emails on iPhones

I've designed an HTML email that is responsive and displays well on various platforms, but I'm encountering an issue specifically when viewing it on an iPhone. It appears that iOS is identifying a date and time in the content and applying a blue ...

htmliosiphoneemailhtml-email

Safari displaying elements without following font styling specified in CSS

I have a select element in my web page, and I've customized the font using CSS: @font-face { font-family: myFont; src: url('myFont.woff'); } body select{ font-family: myFont; } After testing in Chro ...

htmlcssfontssafari

When utilizing CKEDITOR, the default TEXTAREA is obscured, and CKEDITOR does not appear

I am trying to incorporate CKEDITOR into my project. I have added the ckeditor script in the footer and replaced all instances of it. <script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.min.js') ?>" type="text/javasc ...

javascriptjqueryhtmlcssckeditor

The hamburger menu for the responsive navigation bar is not being shown on the screen

I am having trouble creating the "Hamburger menu" on my website. It looks fine, but when I click on it, nothing happens. I have set up an event listener to detect any clicks on the button and toggle the class to display or hide the ul elements accordingly ...

javascripthtmlcssresponsivehamburger-menu

Unable to Retrieve Public File on Deployed Next.js Application

I have been working on setting up my personal website to allow users to easily download my resume by clicking on a button. Initially, on my development server, I placed my resume.pdf in the public folder of Next.js, and the download functioned without any ...

next.js

Some devices are experiencing null CFUUID values when stored in SSKeychain

My application uses CFUUID and SSKeychain to identify the device and keep that ID consistent even if the app is uninstalled and reinstalled. I store these device IDs on the server, but I've noticed that some users have multiple IDs for the same devic ...

iosobjective-ckeychainsskeychain

Strange Division Split in the Code. Link to JSFiddle Provided

I encountered a strange line break between two divs while working on a website design. The issue is with the gap between the divs offersContainer and recentWinnersHeadlineContainer. Here's the JSFiddle link: http://jsfiddle.net/d593fdea/ Although the ...

htmlcssspacespacing

What are some effective ways to slow down the image transitions in a Javascript slideshow?

I am currently developing a slideshow that updates Images, Title, and Description simultaneously based on their Array index. The slideshow is functional BUT, my goal is to achieve a smooth transition to the next/previous Image (... title & descript ...

javascriptjqueryhtmlcssslideshow

Issues with CSS in ASP.NET MVC

Calling all CSS experts! I need some guidance on applying my custom stylesheet to a project in MVC. It seems like I'm doing everything right, but nothing is changing. Here's what I have in index.html: <link rel="stylesheet" href="~/Content/m ...

cssasp.net-mvctwitter-bootstrap

Having trouble establishing a connection with mongoose and typescript

When attempting to establish a connection using mongoose, I consistently encounter the errors outlined below. However, if I use MongoClient instead, everything functions as expected. import connectMongo from '../../lib/connectMongo' console.log( ...

reactjstypescriptmongoosenext.js

CSS for Adjusting Parent Height Based on Child Content

I've been working on adjusting the height of the parent class to fit the child class perfectly without overflowing Here is a snippet from my CSS file: Parent &__video position: relative; width: 471px; background: red; border-radius: 12px ...

cssvue.js

Designing websites or applications for mobile devices requires careful consideration of how content will

Currently, I am trying to use media queries to cater to mobile screens. The main problem I am encountering involves the text on the header when switching between Portrait and Landscape modes. In the landscape view, the top property overrides the portrait ...

cssmedia-querieslandscape-portrait

In the readmore.js script, position the "readmore" link within a div instead of outside of it

I have added annotations that vary in length, so I am looking to integrate the readmore.js plugin. To ensure uniform sizing for all annotations (even empty ones), I need to set a minimum height for the div container. <annotation> <div style="wi ...

javascriptjqueryhtmlcss

Encountering a 500 error when making API requests after deploying Next.js on Vercel, although they work fine

I recently deployed my Next.js app to Vercel, and I'm experiencing issues with my API calls returning a 500 status code, even though they work perfectly fine on localhost. The initial load using getStaticProps seems to be working, so I suspect the con ...

javascriptreactjsnext.jsvercel

Angular CLI is not displaying CSS

I am currently using angular cli version 1.4.3, node version 6.11.3, and npm version 5.4.2. My goal is to retrieve records using angular2 and display them on localhost. I expected the output to look like this: https://i.sstatic.net/S8TVI.jpg however, the ...

htmlcssangular-cli

Is there a way to access a user's phone number through the Titanium API's?

Is it possible to automatically retrieve a user's phone number and contact details as a backup when they use my app on iOS or Android? ...

androidiostitaniumtitanium-mobile

What is the best way to switch the toggle identifier in order to modify the CSS class "before" using Unicode characters?

I have a compilation of Frequently Asked Questions, accompanied by some custom CSS styling. I am looking to modify the unicode character before each question from a + sign to a - sign, specifically changing content:" \ff0b "; to content:" \002D " ...

javascriptjquerycss

The ordering of my styles and Material-UI styles is causing conflicts and overrides

Greetings fellow developers! I'm currently facing an issue with my custom styles created using makeStyles(...). The problem arises when I import my styles constant from another module, and the order of the style block is causing my styles to be overr ...

reactjstypescriptmaterial-uinext.js

Loading the database in Xamarin iOS

When working with the Database in my code, I am encountering an error "The name Database does not exist in the current context." Which namespace should I import to resolve this issue? (referencing ) if (!File.Exists (Database.DatabaseFilePath)) File ...

c#ios.netxamarin

error - ReferenceError: The function 'verifyUser' cannot be accessed before it has been initialized (No Circular Dependency)

Currently, I am implementing NEXT JS with Firebase and have set up Firebase-admin services as follows: import { initializeApp } from 'firebase-admin/app'; import { credential } from 'firebase-admin'; import { getAuth } from 'fireba ...

node.jsnext.js