Skip to content

Generate a SVG file from a fingerprint visualisation on the website

Daniele Guido edited this page Jun 26, 2023 · 1 revision

Open your browser development tool inspector and select the fingerprint you'd like to save as independent svg:

Screenshot 2023-06-26 at 16 37 47

Then, right click on the <svg component in the developer pane and select 'Copy outer HTML'

Screenshot 2023-06-26 at 16 38 25

Paste the resulting code into you editor. Remove the class svg attribute and reformat the initial line to obtain a clean first line containing only basic attributes:

<svg xmlns="http://www.w3.org/2000/svg" width="416" height="416">

Finally, add this code below directly after the svg declaration, to obtain smt like this:

<svg xmlns="http://www.w3.org/2000/svg" width="416" height="416">
<style>
    :root{
      --gray-300: #dee2e6;
      --gray-500: #718096;
      --gray-700: #495057;
      --secondary: #222322;
      --accent: #5e2bff;
      --primary: #51f6e0;
    }
    g.is-heading circle, g.is-heading circle.heading-placeholder {
      fill: transparent;
      stroke: var(--secondary);
    }
    g.is-heading circle.origin{
      
      fill: var(--secondary);
      stroke: transparent;
    }
    g.type-markdown line{
      stroke: var(--gray-500);
    }
    g.type-markdown circle,g.type-markdown circle.refs {
      fill: var(--gray-700);
      stroke: transparent;
    }

    g.type-code line {
      stroke: #5e2bff;
      stroke: var(--accent);
    }
    g.type-code circle {
      stroke: transparent;
      fill: #5e2bff;
      fill: var(--accent);
    }
    g.is-hl line {
      stroke: #51f6e0;
      stroke: var(--primary);
    }
    g.is-hl circle.origin {
      fill: #222322;
      fill: var(--secondary);
      stroke: transparent;
    }
    g.is-heading circle,  g.is-heading circle.heading-placeholder {
      fill: transparent;
      stroke: #222322;
      stroke: var(--secondary);
    }
    g.is-hl circle {
      fill: #51f6e0;
      fill: var(--primary);
      stroke: #dee2e6;
      stroke: var(--gray-300);
    }
    g.type-markdown circle, g.type-markdown circle.refs {
      fill: #495057;
      stroke: transparent;
    }
    g.is-hl circle {
      fill: #51f6e0;
      fill: var(--primary);
      stroke: #dee2e6;
      stroke: var(--gray-300);
    }
  </style>
Clone this wiki locally