fill path of svg icons is not working on Safari but on Chrome

enter image description hereI am desperately looking for a solution why Chrome is displaying my svg icons correctly (in the correct color) and Safari not.

Any improvements or hints are appreciated.

Please ask if something remains unclear about my issue


  Script for transforming svg into inline svg 

  <script src=""></script>

  <script type="text/javascript">
        $(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.value);

        // Replace IMG with SVG
            }, 'xml');

    HTML code

    <div id="icon-bar">  
    <ul id="navbaricons">
        <li><a href="index.html"><img src="bildernavbar/Logo.svg" alt="Logo" width="22" height="23"></a></li> 
        <li><a href="search.html"><img src="bildernavbar/search.svg" alt="Search" width="21" height="23"></a></li>
        <li><a href="like.html"><img src="bildernavbar/heart.svg" alt="Heart" width="23" height="23"></a></li>
        <li><a href="annonce.html"><img  src="bildernavbar/annonce.svg" alt="upload" width="35" height="23"></a></li>
        <li><a id="profile" href="profile.html"><img src="bildernavbar/user.svg" alt="Profil" width="23" height="23"></a></li>


#navbaricons path {
    fill: #323b4a;

#navbaricons:hover path {
    fill: white;

1 answer

  • answered 2018-01-11 21:09 Paul LeBeau

    Do the SVGs set their fill colours using the style attribute? For example:

    style="fill: red"

    style attributes have higher precedence than CSS rules. Compare the two rectangles in the following example.

    rect {
      fill: green;
      <rect width="100" height="100" style="fill: red"/>
      <rect x="120" width="100" height="100" fill="red"/>

    To fix this, take any properties you want to style with CSS, and either:

    • remove them from the style attribute completely, or
    • change them to presentation attributes. Eg. fill="red".

  • currentColor in background image svg

    I have an inline SVG image I use as a background, a simlified example is below:

    div {
      width: 100%; height: 500px;
      color: green;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='' width='100' height='100'><path d='M0 0 H 100 V 100 H 0 Z' fill='currentColor'></path></svg>");

    The problem is that the image doesn't inherit the currentColor and is black when I expected it to be green. Any idea?

  • CSS backdrop-filter on SVG elements

    I am trying to add a backdrop filter to a SVG rect which lies on top of another SVG rect.

    When I do the same for two div's it works. How can I achieve the same effect for the two rects?

    body, html {
      margin: 0;
    .outerrect {
      position: absolute;
      left: 0px;
      top: 120px;
    .innerrect {
      position: absolute;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    .outerdiv {
      position: absolute;
      left: 0px;
      top: 120px;
      width: 200px;
      height: 100px;
      background-color: red;
    .innerdiv {
      position: absolute;
      left: 140px;
      top: 20px;
      width: 120px;
      height: 60px;
      border: 1px solid;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      <rect class="outerrect" fill="red" x="0" y="0" width="200" height="100"></rect>
      <rect class="innerrect" x="140" y="20" width="120" height="60"></rect>
    <div class="outerdiv">
      <div class="innerdiv"></div>

  • scaling svg to parent container

    I am using svg.js to draw lines on like a canvas. Is it possible to scale the svg element created by calling SVG() to the size of the parent? As of right now, I am just redrawing all the lines when the element resizes.

      ref={r => this.whiteboard = r}
    let { offsetWidth: width, offsetHeight: height } = this.whiteboard;
    this.draw = SVG('whiteboard').size(width, height);

    I am using React which I know will be hard to mix with svg.js but that is another conversation.

  • Multiple Workbook calculations

    I have the following calculation going into a master workbook.

    =SUM('[Budget Our Boys 2017-2018.xlsm]MONTHLY CASH FLOW'!$D$5, '[Closer     Than Ever.xlsm]MONTHLY CASH FLOW'!$D$5, '[Birds.xlsm]MONTHLY CASH FLOW'!$D$5, '[Poppets.xlsm]MONTHLY CASH FLOW'!$D$5)

    The calculation is for the month of January. I would like to then drag this formula across all other months for the year. However, when I do so, it does not fill the series. !$D$5 stay !$D$5 across all cells and would like it to go as follows:

    Dragging across !$D$5. !$E$5, !$F$5 Dragging down !$D$6. !$D$7, !$D$8

    Anyone able to help would save me hours of data input.

    many thanks in advance.

  • ggplot: Set colours with 2+ factors

    I have a dataset with 2 factors, each with 2 levels. I want to make a grouped bar graph with 4 different colours.

    The data looks like this:

    TrialType Group yvar
    TP         C     1
    TP         E     2
    TA         C     3
    TA         E     4

    I use this to make the bar graph using

    ggplot(data=k, aes(x=V2, y=V3, fill=V1)) + 
      geom_bar(stat="identity", position="dodge", color="#000000") + 
      scale_fill_manual(values=c("#d7191c", "#FFBB45"), breaks=c("TA", "TP"))

    And I get the this graph.

    Is there a way to make this graph so the bars go Dark red/light red/dark yellow/light yellow from left to right? So that the Groups are delineated based on red/yellow, and the trial type is delineated based on darkness?

    Thanks a lot!

  • Can't change a single value of an array created with fill method

    I created an array using Array and fill however after that I cannot edit a single value of this.

     const board = new Array(4).fill(Array(4).fill(0))
     board[0][0] = 1

    This changes first index of every nested array.

    [1, 0, 0, 0]
    [1, 0, 0, 0]
    [1, 0, 0, 0]
    [1, 0, 0, 0]

    So it isn't correct to create multidimensional array this way?