デフォルトの機能のみでSVGをパース

ブラウザのデフォルトの機能で座標を取得する

• まずイラレでパスを作る。「オブジェクト＞複合パス＞解除」をした方がいい場合もある。
• svgの各種APIを使う

svg parser by kitasenjudesign -p5.js Web Editor

var paths;

function setup() {
  
  var svgText = '<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.3555 159.5796"><defs><style>.cls-1{fill:#e71f19;stroke:#040000;stroke-miterlimit:10;}</style></defs><path class="cls-1" d="M67.0952,102.0596h-33.6743v57.02H.5V.5h69.0693c15.9229,0,28.6177,4.0879,38.085,12.2646,9.4678,8.1763,14.2012,20.8359,14.2012,37.9771,0,18.7197-4.7334,31.9526-14.2012,39.6987-9.4673,7.7461-22.9878,11.6191-40.5591,11.6191Z"/><path class="cls-1" d="M82.5874,69.0312c4.3032-3.8008,6.4551-9.8257,6.4551-18.0742s-2.1704-14.1289-6.5088-17.644c-4.3408-3.5132-10.4189-5.2715-18.2358-5.2715h-30.877v46.6919h30.877c7.8169,0,13.9136-1.8999,18.2896-5.7021Z"/></svg>';
  
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
  
  const svgElement = svgDoc.querySelector('svg');
  document.body.appendChild(svgElement); // SVGをDOMに追加
  
  paths = svgElement.querySelectorAll('path');

  
  paths.forEach((path) => {
    const length = path.getTotalLength();
    console.log('Total length:', length);
  });
  
  
  createCanvas(400, 400);
}

function draw() {
  
  background(220);
  
  paths.forEach((path) => {
    const length = path.getTotalLength();
    
    for(i=0;i<100;i++){
      const point = path.getPointAtLength(length / 100*i); // パスの点を取得    
      circle(10+point.x,10+point.y,5)
      
    }
    
    //console.log('Total length:', length);
  });
}

viewBoxの値を取得

        const svgElement = svgDoc.querySelector('svg');
        //document.body.appendChild(svgElement); // SVGをDOMに追加
  
        const viewBox = svgElement.getAttribute('viewBox');
        console.log(viewBox); // 例: "0 0 100 100"
        const [minX, minY, width, height] = viewBox.split(' ').map(Number);
        console.log('min-x:', minX);
        console.log('min-y:', minY);
        console.log('width:', width);
        console.log('height:', height);