Skip to content

Instantly share code, notes, and snippets.

@seflless
Last active July 16, 2022 13:45
Show Gist options
  • Save seflless/5a18063bce0f6dd15993c81d021fc314 to your computer and use it in GitHub Desktop.
Save seflless/5a18063bce0f6dd15993c81d021fc314 to your computer and use it in GitHub Desktop.
Visually display an SVG element as an image in the dev tools console

Usage

const svgElement = document.getElementById('example-id')

logSVG(svgElement)

// You should see a visual version of the svg element in the dev tool's console.
function logSVG(svg){
// Get svg data
var xml = new XMLSerializer().serializeToString(svg);
// Make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';
// Prepend a "header"
var image64 = b64Start + svg64;
const width = 300
const height = 300
const style =
'font-size: 1px; padding: ' +
Math.floor((height) / 2) +
'px ' +
Math.floor((width) / 2) +
'px; line-height: ' +
height +
'px;'
// Logging part
console.log(
'%c' + '+',
style +
'background-image: url(' +
image64 +
'); background-size: ' +
width +
'px ' +
height +
'px; background-size: 100% 100%; background-repeat: norepeat; color: transparent;'
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment