JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg" width="100" height="100">
  <rect fill="red" width="100" height="100" />
</svg>

CSS

#svg {
  padding: 50px;
}

JavaScript

var svg = document.getElementById('svg'),
  svgLeftTop = svg.createSVGPoint(0, 0),
  svgLeftTopOnViewport = svgLeftTop.matrixTransform(svg.getScreenCTM());

console.log(svgLeftTopOnViewport.x + ' , ' + svgLeftTopOnViewport.y);