Cryptocurrencies SVG Logos-CodePudding

It's been hours ! I can't find how they did it. I'm trying to figure out where do cryptocurrencies logo come from, on this webpage: https://www.payb.io/accepted-cryptos

How do they integrate them ? I'm pretty sure it's an external source (web source) but which one ??

CodePudding user response：

They are in a SVG sprite that is inlined at the top of the page. Look at the (shortened) source:

<html lang="en">
  <head>...</head>
  <body>
    <svg ... style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
      ...
      <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.512 25.512" id="xmr">
        <path d="..."></path>
      </symbol>
      ...
    </svg>
    ...
    <div ...>
      <svg ...><use xlink:href="#xmr"></use></svg>
      <p>Monero</p>
      <p><strong>(XMR)</strong></p>
    </div>
  </body>
</html>

The first <svg> element has a size of 0x0, being effectively hidden, and only contains <symbol> elements, templates to be rendered elsewhere. They contain the definitions of the logo geometries.

Further down the page, these symbols are quoted in <use> elements, to be rendered there. CSS and attributes on their parent <svg> element govern how the geometries are drawn (size and color).

CodePudding user response：

SVG is a type of file format. It's kind of like a downloaded PNG image but in SVG format. It is not a website. You can find them on open-source image websites, or you can make your own using Inkscape: https://inkscape.org/.