Paintable Canvas - SVG File

Ignition
1

Does anyone know how parse a svg file on a paintable canvas so I can redraw the graphics?

2

I am also very interested in this. Specifically we’re looking at a project to display a Cognex overlay (SVG file) on top of the FTP’d image.

3

Thats exactly what I’m trying to do. I’m currently using the web browser to display the svg but with the browser constantly refreshing when a new image comes in, I think it will be distracting to the operators.

4

I believe Ignition can take an SVG imported by just dragging it into the designer, is there any reason you can’t do this? If you need to move it around or something, you can probably use the system.gui.transform() to move the group it puts it in around, change size etc.

5

Given that the SVG (1.1) spec is a mind-numbing 826 pages (https://www.w3.org/TR/SVG11/REC-SVG11-20110816.pdf) it’s very unlikely that you would be able to reasonably implement something like this. Inside of the designer we use the Batik toolkit to create Java graphic primitives out of SVG files - but as many people run into, the edge-case support is lacking (many CAD programs can output into an SVG that will either not work in the designer, or else cause massive performance problems).

There’s no good solution to this problem - the SVG spec is massive, so writing a complete interpeter is just not practical. You’re welcome to try, but there are no pre-existing resources (unless you can modify Batik to your purposes, in which case good luck).

6

I wonder if it’s possible to use an external tool like Flamingo SVG Transcoder and write the Java2d to a file that can be read by Ignition and used on the paintable canvas. Any thoughts?

7

.
My NodeJS scada server (NJSCADA add on module to Ignition), can render HTML pages in which you can render your SVG using HTML5 or JavaScript. My ARSCADA and mSCADA clients are 100% SVG based. I don’t know if it meets your requirements.

(I am going to release an eval version on gitHub pretty soon, but you can see the demo links on www.pramanj.com)

8

I found these 2 links interesting. What's your opinion on this?
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

9

I like this.

20 examples of SVG that will make your jaw drop

25 Snippets That Demonstrate the Power of Canvas & SVG

10

  1. DOM on Canvas - Why would one like to draw DOM on Canvas! DOM is natively supported in browsers in most efficient way. Its of academic interest. Canvas or SVG on DOM does make sense.

  2. fabric - Again of not very practical value. Canvas v/s SVG is a topic of debate and depends on application. While SVG is convenient to program, it has more overheads. Canvas being at lower level , is more efficient but difficult to program.

1 Like
11

There are lots of such web sites available demonstrating features of SVG and Canvas.

1 Like