Внешние вершины изображения SVG, загруженного извне

Я хотел загрузить самые внешние вершины изображения SVG на веб-страницу. Существуют ли какие-либо библиотечные функции на основе Javascript, которые можно использовать для решения вышеуказанной проблемы?

Я попробовал библиотеку snap.svg. но я мог получить только bbox из svg. но я хочу, чтобы точные вершины лежали снаружи svg.

мой код для загрузки svg и получения bbox

    var s = Snap("#svg");
    Snap.load("myTestImg.svg", onSVGLoaded);

    function onSVGLoaded(data) {
        s.append(data);
        s.node.getBBox();
    } 

мой код svg выглядит так

<?xml version = "1.0" encoding = "UTF-8" standalone = "no"?><svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" contentScriptType = "application/ecmascript" contentStyleType = "text/css" height = "119.0" preserveAspectRatio = "xMidYMid meet" version = "1.1" viewBox = "-118.812089225497 -118.812089225497 237.624178450994 242.624178450994" width = "119.0" zoomAndPan = "magnify"><g fill = "none" stroke = "black" stroke-width = "0.00028525" transform = "translate(0,0) scale(1, -1)">
<g id = "NewFeatureType">
  <g id = "Halo">
    <ellipse cx = "-0.000118878670036793" cy = "0.000118878465145826" rx = "69.9997622428617" ry = "69.9997622428617" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "-49.5,49.5 49.5,-49.5" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "49.5,49.5 -49.5,-49.5" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "82.14,82.35 -81.42,82.35 -81.42,-81.57 82.14,-81.57 82.14,82.35" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "-82.62,-2.18 -82.62,-2.18" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "81.19,-0.54 81.19,-0.54" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "1.93,-82.25 1.93,-82.25" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "0.14,79.5 0.14,79.5" style = "fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
  </g>
  <g id = "Org">
    <ellipse cx = "-0.000118878670036793" cy = "0.000118878465145826" rx = "69.9997622428617" ry = "69.9997622428617" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "-49.5,49.5 49.5,-49.5" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "49.5,49.5 -49.5,-49.5" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "82.14,82.35 -81.42,82.35 -81.42,-81.57 82.14,-81.57 82.14,82.35" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "-82.62,-2.18 -82.62,-2.18" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "81.19,-0.54 81.19,-0.54" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "1.93,-82.25 1.93,-82.25" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points = "0.14,79.5 0.14,79.5" style = "fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <ellipse cx = "0" cy = "0" rx = "116.312089225497" ry = "116.312089225497" style = "fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0"/>
  </g>
</g>

Пожалуйста, предоставьте решение, я новичок в обработке изображений svg.