SVG Real-Time Preview

[xaios]

Body

What are you proposing?

Real-time preview embedded in SVG files

Why does this matter?

Easier and faster way to view the content of SVG files without adding panels

Are there any examples or context?

This has been implemented in Atom in the form of plugin code, which can be referenced

'use babel'

export default function() {
  atom.workspace.observeTextEditors(editor => {
    if (!editor.getFileName()?.endsWith('.svg')) return

    let dom = document.createElement('div')
    dom.className = 'container_svg_previewer'
    editor.getElement().appendChild(dom)

    dom.innerHTML = editor.getText()
    editor.onDidChange(() => dom.innerHTML = editor.getText())
  })
}

.container_svg_previewer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 240px;
  pointer-events: none;
}

.container_svg_previewer svg {
  position: absolute;
  width: 100%;
  height: 100%;
}