Input can be any SVG Polygon image of different irregular sizes as below

logo.svg
--------
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,100 150,25 150,75 200,0"
            fill="none" stroke="black" />
</svg>

Have to find a efficient way to read those polygon points loaded through image tag as mentioned below

import React from 'react';
{/*images*/}
import logo from './logo.svg'

const App = () => {
  return (
    <div className="App">
      <img src={logo } alt="SVG Image" />
    </div>
  );
}
export default App;

With polygon points, have to calculate the optimal spot within a SVG polygon to place the text label dynamically