skip to Main Content

I have css like this below,

  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%23767d83%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E');

It shows the magnifying glass icon.

Now I want to change this icon to home button.

I can find the icon on fontawesome page and get the link

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

However this is the bit different the one I got in css.

Is it convertable? or am I wrong from the begginng?

2

Answers


  1. Yes it is convertible.

    The css url function expects a absolute URL, a relative URL, a blob URL, or a data URL. In your example the css is using a Data URL, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents..

    We can surely build a data URL from that svg by following the expected syntax.

    Note: the svg must contain xmlns="http://www.w3.org/2000/svg"

    data:[<mediatype>][;encoding],<data>
    
    • mediatype for svg is image/svg+xml. from Common MIME types

    • encoding can be omitted but let’s use charset=utf8

    • data has to be encoded. The easiest way will be to use encodeURIComponent("<svg...")

    Putting all together:

    let mySvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
    `;
    
    // ensure xmlns attr
    if (!mySvg.includes('xmlns="http://www.w3.org/2000/svg"')) {
      mySvg = mySvg.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
    }
    
    const encoding = "charset=utf8";
    const mediaType = "image/svg+xml";
    const data = encodeURIComponent(mySvg);
    
    const dataURL = `data:${mediaType};${encoding},${data}`;
    
    const el = document.getElementById("my");
    el.style.background = `url(${dataURL})`;
    #my {
      width: 50px;
      height: 50px;
    }
    <div id="my"></div>
    Login or Signup to reply.
  2. you can use encodeURI()

    the full process:
    (remove the comments ; <!--!Font Awesome ..... )

    const svgTxt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>`
    
    
    document.querySelector('pre')
      .textContent = encodeURI(svgTxt);
    svg { 
      width : 5em; 
      fill: orange; 
      }
    div {
      width  : 5em; 
      height : 5em; 
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1l-32%200%20.7%20160.2c0%202.7-.2%205.4-.5%208.1l0%2016.2c0%2022.1-17.9%2040-40%2040l-16%200c-1.1%200-2.2%200-3.3-.1c-1.4%20.1-2.8%20.1-4.2%20.1L416%20512l-24%200c-22.1%200-40-17.9-40-40l0-24%200-64c0-17.7-14.3-32-32-32l-64%200c-17.7%200-32%2014.3-32%2032l0%2064%200%2024c0%2022.1-17.9%2040-40%2040l-24%200-31.9%200c-1.5%200-3-.1-4.5-.2c-1.2%20.1-2.4%20.2-3.6%20.2l-16%200c-22.1%200-40-17.9-40-40l0-112c0-.9%200-1.9%20.1-2.8l0-69.7-32%200c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22/%3E%3C/svg%3E');
      background-repeat: no-repeat;
      }
    initial svg : <br>
    <svg viewBox="0 0 576 512">
      <path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2
      c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0
      c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0
      c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0
      c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0
      c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40
      l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24
      L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>
    </svg>
    <br><br><br><br>
    svg encoded text:
    <pre></pre>
    
    <br><br><br><br>
    result:
    <div></div>

    to set your own color
    use CSS mask-image.
    (also set viewbox to 0 0 576 576)

    div {
      width  : 5em; 
      height : 5em;
      background-color  : red;
      mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20576%22%3E%3Cpath%20d=%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1l-32%200%20.7%20160.2c0%202.7-.2%205.4-.5%208.1l0%2016.2c0%2022.1-17.9%2040-40%2040l-16%200c-1.1%200-2.2%200-3.3-.1c-1.4%20.1-2.8%20.1-4.2%20.1L416%20512l-24%200c-22.1%200-40-17.9-40-40l0-24%200-64c0-17.7-14.3-32-32-32l-64%200c-17.7%200-32%2014.3-32%2032l0%2064%200%2024c0%2022.1-17.9%2040-40%2040l-24%200-31.9%200c-1.5%200-3-.1-4.5-.2c-1.2%20.1-2.4%20.2-3.6%20.2l-16%200c-22.1%200-40-17.9-40-40l0-112c0-.9%200-1.9%20.1-2.8l0-69.7-32%200c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22/%3E%3C/svg%3E');
      }
    <div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search