-
Notifications
You must be signed in to change notification settings - Fork 4
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:
Then, right click on the <svg
component in the developer pane and select 'Copy outer HTML'
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>