# Convert SVG path to Coordinate XY location

**URL:** <https://forum.inductiveautomation.com/t/convert-svg-path-to-coordinate-xy-location/54341>\
**Category:** Ignition\
**Tags:** perspective, ignition81, scripting\
**Created:** [December 21, 2021, 3:20am UTC](https://forum.inductiveautomation.com/t/convert-svg-path-to-coordinate-xy-location/54341 "2021-12-21T03:20:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![christopher.green](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@christopher.green](https://forum.inductiveautomation.com/u/christopher.green)\
**Post date:** [December 21, 2021, 3:20am UTC](https://forum.inductiveautomation.com/t/convert-svg-path-to-coordinate-xy-location/54341/1 "2021-12-21T03:20:10Z")

</div>

Does anyone know how to convert an SVG path into a grouping of XY coordinates? I’m looking to animate an entity location along an SVG path based on an integer position using the view canvas in perspective. Looking up options online I see references to importing svgpathtools but that is for python specific applications and I don’t know how to access that within ignition.

Any help is appreciated.

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [December 21, 2021, 6:33am UTC](https://forum.inductiveautomation.com/t/convert-svg-path-to-coordinate-xy-location/54341/2 "2021-12-21T06:33:51Z")

</div>

I think that, from Perspective designer point you view, that doesn’t have much sense. I would put the svg on a separate view, then use that view inside the canvas.

---

<div class="post-metadata">

**Author:** ![christopher.green](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@christopher.green](https://forum.inductiveautomation.com/u/christopher.green)\
**Post date:** [December 21, 2021, 7:40am UTC](https://forum.inductiveautomation.com/t/convert-svg-path-to-coordinate-xy-location/54341/3 "2021-12-21T07:40:26Z")

</div>

I do have the svg in a separate view and have it in the view canvas along with the instances of other views I want to track relative to the path in the svg.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 21, 2021, 1:12pm UTC](https://forum.inductiveautomation.com/t/convert-svg-path-to-coordinate-xy-location/54341/4 "2021-12-21T13:12:34Z")

</div>

> [@christopher.green](#):
>
> path in the svg

you mean like this?

```auto
d="M 10 10 H 90 V 90 H 10 L 10 10"
=>
[M 10 10], [H 90], [V 90], [H 10], [L 10 10]
=>
[[10,10],[90,10],[90,90],[10,90],[10,10]]

```

While thats not to hard if you only use straight lines M H V L Z... but if you start using curves i dont think there is an easy way without js (it has a function called "getPointAtLength" ) or some library which can translate it too. Unless you are really good at geometry xD

M and L are coordinates  
H = only changes x, V = only changes y  
Z = straight line to begin

> **[Paths - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)**
>
> The element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.