Support for SVG Sprites is limited in Internet Explorer and Safari, causing compatibility issues with SVG functionality

Utilizing SVG Sprites to incorporate svg icons on my webpage has worked smoothly in Chrome and Firefox, but I am encountering an issue where none of the svg icons are displaying in IE and Safari.

<div class="toggle-icons">
<span class="toggle-rows active">
<svg class="icon"  >
<use xmlns:xlink="http://www.w3.org/1999/xlink" link:href="icons.svg#icon-photo-row"></use>
</svg>
<input type="radio" name="toggle" value="row"> 
</span>
<span class="toggle-grid">
<svg class="icon"  >
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#icon-photo-grid"></use>
</svg>        
<input type="radio" name="toggle" value="grid">
</span>
</div>

The structure of icons.svg is as follows:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<symbol id="icon-photo-row" viewBox="0 0 19.983 11.084">
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="0.375" x2="3.75" y2="0.375"/>
...

<p>CSS:</p>

<pre><code>.toggle-icons svg.icon {
  width: 3rem;
  height: 3rem;
  fill: #bfbfbf;
  stroke: #4D5E68;
  vertical-align: middle;
}

.toggle-icons span.active svg.icon {
  fill: #95a1aa;
}

If anyone could shed light on why there's a rendering issue with SVGs on IE and Safari, along with a potential solution, it would be greatly appreciated.

Thank you in advance

Answer №1

My solution to the excessive calls caused by svg4everybody using requestAnimationFrame was to develop a lightweight polyfill. This polyfill is designed to fetch and cache external SVGs referenced in <use> elements when the browser fails to do so on its own. Unlike other methods, my polyfill relies on feature detection instead of browser sniffing. You can find the code on github: https://github.com/Keyamoon/svgxuse

For a live demonstration, check out:

Answer №2

Svg4everybody successfully resolved the issue, making it accessible on both Internet Explorer and Safari browsers.

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

Trouble with Bootstrap 5 Dropdown Menu failing to drop down

I am attempting to utilize a dropdown menu on my Wordpress site with Bootstrap, but it is not working as expected. If I manually add the class "show" to my dropdown-menu div, the menu displays, but the button does not function. These are the scripts being ...

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

Expand your sidebar: tips to maximize its vertical potential

I am currently in the process of creating a sidebar using CSS flexbox and I am trying to make it expand vertically to cover the entire screen height. Here is an outline of what I have so far. Check out my JSFiddle example here .app { display: flex; f ...

Which is better: Utilizing Vue.js methods or creating a separate JavaScript file?

Why is it important to understand the distinctions between declaring functions within methods in a vue.js instance versus creating them in a separate JavaScript file? What advantages does utilizing vue.js methods offer? ...

Discovering the pressed submit button in Node.js: A beginner's guide

How can the controller or admin determine which submit button was pressed in a form like this? <form method="POST"> <input type="submit" value="Add Admin" name="addAdmin"> <input t ...

Sending a form without the need to reload the page

While it's known that Ajax is the preferred method to submit a form without refreshing the page, going through each field and constructing the Post string can be time-consuming. Is there an alternative approach that utilizes the browser's built-i ...

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

Determined margin value to replicate the maximum and minimum margin in CSS styling

When attempting to set the margin on an object to 20% with a maximum margin of 200px, I experimented with various methods: margin-left: calc(min(200px, 20%)); and max-margin-left: 200px However, neither property proved to be valid. Is there an alterna ...

Animation in Three.JS not visible in Chrome version 61 on Mac OS X Sierra

I've been going through some beginner tutorials for three.js and I'm facing an issue where I only see a red background when I try to run the code I created in Atom on Chrome (Version 62.0.3202.75 (Official Build) (64-bit)), Mac OS X (macOS Sierra ...

Obtain all elements of the body except for the div element through a Selenium python query

I need help fetching all body elements in a query without including div elements. Below is the code I have so far: body = driver.find_element(By.TAG_NAME, 'body') elements = body.find_elements(By.TAG_NAME, '*') However, this code retr ...

When the page initially loads, the block appears on top of the upper block and remains in place after the page is refreshed

Upon initial loading, the block appears on top of another block but remains fixed upon page refresh. The same issue occurs in the mobile version of the site and occasionally displays correctly. The website is built on WordPress and optimized using Page Spe ...

HTML display issue: Angular curly braces failing to show up

I am facing a peculiar issue in my browser where the content inside the angular curly braces is not being displayed. Even though there are no errors in the console and the value gets logged successfully, the page appears blank. The expected output should b ...

Ways to incorporate HTML replacement within a function

In my application, non-IT users are responsible for creating and maintaining product pages for music CDs. These pages typically include information about the CD as well as a track-listing. We want to add an mp3 music player to each track, but we need to en ...

Where is this mysterious negative position originating from in Firebug?

I'm dealing with an element that has the following CSS attributes: .myElem { position: absolute; width: 100%; top: 25px; height: 6px; padding: 1px 0px; } Can someone please take a look at this screenshot I uploaded? When checking the layou ...

Place the div at the center within the header

I'm struggling to center the logo in my media query for screens below 479px. Whenever I use margin auto, the image gets pushed to the right by the browser. Here is what I have so far and any assistance would be greatly appreciated. HTML <div clas ...

What should be in the header of your Outlook email signature?

For a while now, I've been attempting to create a specific design for my email signature but have hit a wall. It seems like the image I want to include above the first line of text is causing some trouble and it doesn't quite work as intended. T ...

Overlap of the X-axis domain line with the stroke of a d3 bar graph

When a bar is selected in my d3 bar chart, it should have a white border. Currently, the border is achieved using stroke, but the bottom border gets hidden under the x-axis line. // establish container size var margin = {top: 10, right: 10, bottom: 30, le ...

What are the steps to align content within a column in Bootstrap?

I need help aligning two elements, one on the left and one on the right inside a Col, and make them horizontal. I tried using justify-self: right; to position the div on the right but it's not working. Here is my code: <Col xs="12" className={it ...

Developing a website that is able to adapt to various

Hey everyone, I'm facing an issue with coding a responsive website and I was hoping someone here could help me out: Whenever I view the website on an iPad and rotate the screen, it doesn't automatically reset the zoom. This results in the page b ...

What is the best way to update an existing cookie value using angularjs?

Currently, I am working with AngularJS. When a button is clicked, I am setting a cookie and it works perfectly fine. However, when the page is refreshed and another button click occurs, a new value is stored in the array while the old cookie value becomes ...