Troubles loading and viewing SVG files

eide

Hi,

I'm trying to make my sketch suitable for various sizes and resolutions of screen, and thus would like to use PShapes instead of PImages.

However, I came across many problems with loading and displaying SVG files in Processing (I tried first stable release of processing v 2, now I'm working with latest3.0a5). I tried to resave all SVG files with Inkscape to Inkscape SVG and SVG plain format. No luck. Do SVG files need to be made in some particular way to be able to work with them in Processing?

I am developing in JAVA mode, bude would like to have my app working on Android and also with Javascript mode.

Below are few example of the issues:

file: http://www.clipartsfree.net/svg/kitchen-scales_Clipart_svg_File.svg

Build messages: Ignoring inkscape:path-effect tag. Ignoring clipPath tag. Ignoring inkscape:perspective tag.

issue part of the image is missing

---

file: http://www.clipartsfree.net/svg/1-euro_Clipart_svg_File.svg

Build messages: Filters are not supported.

issue Loads without white color in the middle

---

file: https://openclipart.org/detail/184667/2-euro-coin-by-frankes-184667

Build messages: Exception in thread "Animation Thread" java.lang.NullPointerException at processing.core.PShapeSVG.parseStyleAttributes(PShapeSVG.java:1334) at processing.core.PShapeSVG$Gradient.(PShapeSVG.java:1419) at processing.core.PShapeSVG$LinearGradient.(PShapeSVG.java:1441) at processing.core.PShapeSVG.parseChild(PShapeSVG.java:380) at processing.core.PShapeSVG.parseChildren(PShapeSVG.java:306) at processing.core.PShapeSVG.(PShapeSVG.java:295) at processing.core.PShapeSVG.parseChild(PShapeSVG.java:338) at processing.core.PShapeSVG.parseChildren(PShapeSVG.java:306) at processing.core.PShapeSVG.(PShapeSVG.java:295) at processing.core.PShapeSVG.(PShapeSVG.java:181) at processing.core.PGraphicsJava2D.loadShape(PGraphicsJava2D.java:1695) at processing.core.PGraphicsJava2D.loadShape(PGraphicsJava2D.java:1684) at processing.core.PApplet.loadShape(PApplet.java:11734) at test.setup(test.java:42) at processing.core.PApplet.handleDraw(PApplet.java:2365) at processing.core.PGraphicsJava2D.requestDraw(PGraphicsJava2D.java:245) at processing.core.PApplet.run(PApplet.java:2260) at java.lang.Thread.run(Unknown Source)

issue Does not build at all..

Code i am using to test display of svg files: PShape euro;

void setup() {
  size(500,500);
  smooth();
  euro = loadShape("2euro.svg");
}

void draw() {
  background(255);
  shape(euro,250,250,250,250);
}

Many thanks Martin

PhiLho

The problem with Processing's SVG support (and they are (or were) explicit about this) is that it is quite limited. On purpose: full support is difficult (an enormous effort) and would bloat the runtime. A library like Batik would be better suited for such support.

On the first two examples, the library is explicit about what is not supported. On the last one, it looks like a bug. Perhaps you should open an issue about this one.

eide

Thanks for the response.

I understand that support is somewhat limited, but I didn't manage to find what are the limitations, or in another words, how should be SVG files made so that processing can work with them (e.g. they should no contain gradient fills or layers or whatever)

As I have no previous experience with Java, is there some good tutorial to learn how to incorporate batik into my sketch?

PS: bug reported here: https://github.com/processing/processing/issues/2992

PhiLho

Well, the messages are explicit: if a tag or property is ignored, it should be avoided... Of course, it is harder with a file generated by a tool like Inkscape.

As you see, there is no support for clipping, masking, filters, etc. And for proprietary tags like the Inkscape ones (use stripped SVG).
Processing SVG do support gradients, at least a simple version of them.

Honestly, I wrote about Batik, because it is the most complete SVG implementation in Java, but I am not sure it is usable inside a sketch.