Troubles loading and viewing SVG files

edited November 2014 in Questions about Code

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

Tagged:

Answers

  • Answer ✓

    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.

  • 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

  • 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.

Sign In or Register to comment.