# Paintable Canvas - SVG File **URL:** \ **Category:** Ignition\ **Created:** [August 23, 2018, 6:04pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392 "2018-08-23T18:04:59Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![rgarcher](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rgarcher](https://forum.inductiveautomation.com/u/rgarcher)\ **Post date:** [August 23, 2018, 6:04pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/1 "2018-08-23T18:04:59Z")
Does anyone know how parse a svg file on a paintable canvas so I can redraw the graphics? ---
**Author:** ![framebuilder](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@framebuilder](https://forum.inductiveautomation.com/u/framebuilder)\ **Post date:** [August 23, 2018, 8:58pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/2 "2018-08-23T20:58:18Z")
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. ---
**Author:** ![rgarcher](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rgarcher](https://forum.inductiveautomation.com/u/rgarcher)\ **Post date:** [August 23, 2018, 9:23pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/3 "2018-08-23T21:23:01Z")
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. ---
**Author:** ![mrogers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mrogers/32/4110_2.png) [@mrogers](https://forum.inductiveautomation.com/u/mrogers)\ **Post date:** [August 23, 2018, 9:31pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/4 "2018-08-23T21:31:53Z")
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. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [August 23, 2018, 9:43pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/5 "2018-08-23T21:43:11Z")
Given that the SVG (1.1) spec is a mind-numbing 826 pages ([https://www.w3.org/TR/SVG11/REC-SVG11-20110816.pdf](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](https://xmlgraphics.apache.org/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). ---
**Author:** ![framebuilder](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@framebuilder](https://forum.inductiveautomation.com/u/framebuilder)\ **Post date:** [August 23, 2018, 10:03pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/6 "2018-08-23T22:03:14Z")
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? ---
**Author:** ![PRAMANJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pramanj/32/66935_2.png) [@PRAMANJ](https://forum.inductiveautomation.com/u/PRAMANJ)\ **Post date:** [August 24, 2018, 3:32am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/7 "2018-08-24T03:32:58Z")
. 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](http://www.pramanj.com)) ---
**Author:** ![R.Alamsha](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@R.Alamsha](https://forum.inductiveautomation.com/u/R.Alamsha)\ **Post date:** [August 25, 2018, 8:28am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/8 "2018-08-25T08:28:43Z")
> [@rgarcher](#): > > Does anyone know how parse a svg file on a paintable canvas so I can redraw the graphics? > [@PRAMANJ](#): > > 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. 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](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas) > **[GitHub - fabricjs/fabric.js: Javascript Canvas Library, SVG-to-Canvas (&...](https://github.com/fabricjs/fabric.js)** > > Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser ---
**Author:** ![R.Alamsha](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@R.Alamsha](https://forum.inductiveautomation.com/u/R.Alamsha)\ **Post date:** [August 25, 2018, 8:35am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/9 "2018-08-25T08:35:16Z")
I like this. [20 examples of SVG that will make your jaw drop](https://www.creativebloq.com/design/examples-svg-7112785) [25 Snippets That Demonstrate the Power of Canvas & SVG](https://envato.com/blog/snippets-canvas-svg/) ---
**Author:** ![PRAMANJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pramanj/32/66935_2.png) [@PRAMANJ](https://forum.inductiveautomation.com/u/PRAMANJ)\ **Post date:** [August 25, 2018, 1:32pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/10 "2018-08-25T13:32:32Z")
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. ---
**Author:** ![PRAMANJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pramanj/32/66935_2.png) [@PRAMANJ](https://forum.inductiveautomation.com/u/PRAMANJ)\ **Post date:** [August 25, 2018, 1:39pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-svg-file/19392/11 "2018-08-25T13:39:46Z")
There are lots of such web sites available demonstrating features of SVG and Canvas.