SVGPath can load content from SVG files

[leewyatt]

I think the complicated svg path, no one should be able to handwrite it;
Add an open button to the content of SVGPath, which is used to open the file in svg format, and then after the opening is completed, the path inside can be loaded as the content of SVGPath;
current

new

Because there are many Classs involved, I simply wrote a draft for preview.
If someone familiar with these classes does it, it should be faster.
https://user-images.githubusercontent.com/75261429/154894351-91037868-c363-4640-8952-f5d35b02ab49.mp4

[abhinayagarwal]

This is a nice enhancement.

If I am not mistaken JavaFX only support SVG path and cannot handle complex SVG files. What would be an ideal way to handle SVGs which can have <svg> with single or multiple paths? Or, with tags like <circle> or <ellipse>?

For example:

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

With multiple paths:

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M 80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M 230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
</svg>

With other tags:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
  <path d="M 10 315
           L 110 215
           A 36 60 0 0 1 150.71 170.29
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
  <circle cx="110" cy="215" r="2" fill="red"/>
  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
</svg>

[leewyatt]

Multiple paths:

• Method 1: As a single path, all paths can be concatenated with strings. and this is what my current parsing does;
• Method 2: As multiple paths. Add a button to the menu bar, click the button to load the multi-path SVG file, and then generate an AncorPane containing multiple SVGPaths; I used this principle to write a custom component RXSVGView; RXSVGView Currently only inline color styles are supported, I did not implement the parsing of each style;
  https://github.com/leewyatt/rxcontrols/blob/master/src/main/java/com/leewyatt/rxcontrols/controls/RXSVGView.java
  https://github.com/leewyatt/rxcontrols/blob/master/src/main/java/com/leewyatt/rxcontrols/skins/RXSVGViewSkin.java
  https://github.com/leewyatt/rxcontrols/blob/master/src/main/java/com/leewyatt/rxcontrols/utils/SvgUtil.java

Other tags: it is a bit troublesome, We can skip these tags for now; If necessary, we can give the user a warning to prompt, for example, the solution to this problem is to use Adobe IIIustrator to convert the special tags inside into paths

My English is not very good, I will try to make a video later to explain the above.

[abhinayagarwal]

Sounds like a good approach.

[leewyatt]

The video is 4 minutes long. I can only post to Youtube; https://youtu.be/HKZB0VU6FTw