title: fill path of svg icons is not working on Safari but on Chrome
body: <p><a href="https://i.stack.imgur.com/XaKE4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XaKE4.jpg" alt="enter image description here"></a>I am desperately looking for a solution why Chrome is displaying my svg icons correctly (in the correct color) and Safari not. </p>
  
  <p>Any improvements or hints are appreciated. </p>
  
  <p>Please ask if something remains unclear about my issue </p>
  
  <p>Thanks!        </p>
  
  <pre><code>  Script for transforming svg into inline svg 
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
          $('img[src$=".svg"]').each(function() {
              var $img = jQuery(this);
              var imgURL = $img.attr('src');
              var attributes = $img.prop("attributes");
  
          $.get(imgURL, function(data) {
              // Get the SVG tag, ignore the rest
              var $svg = jQuery(data).find('svg');
  
              // Remove any invalid XML tags
              $svg = $svg.removeAttr('xmlns:a');
  
          // Loop through IMG attributes and apply on SVG
          $.each(attributes, function() {
              $svg.attr(this.name, this.value);
          });
  
          // Replace IMG with SVG
          $img.replaceWith($svg);
              }, 'xml');
          });
          });
      &lt;/script&gt;
  
  
      HTML code
  
      &lt;div id="icon-bar"&gt;  
      &lt;ul id="navbaricons"&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;&lt;img src="bildernavbar/Logo.svg" alt="Logo" width="22" height="23"&gt;&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="search.html"&gt;&lt;img src="bildernavbar/search.svg" alt="Search" width="21" height="23"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="like.html"&gt;&lt;img src="bildernavbar/heart.svg" alt="Heart" width="23" height="23"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="annonce.html"&gt;&lt;img  src="bildernavbar/annonce.svg" alt="upload" width="35" height="23"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="profile" href="profile.html"&gt;&lt;img src="bildernavbar/user.svg" alt="Profil" width="23" height="23"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  CSS
  
  #navbaricons path {
      fill: #323b4a;
  }
  
  #navbaricons:hover path {
      fill: white;
  }
  </code></pre>