A simple SVG file display incompetely

Hello everyone!
I am trying to write a simple SVG file which is a rounded rectangle,I use the PShape method to switch the SVG file to a PShape Object.
Through the SVG can be displayed by Edge browser,in the Processing it lose orginal rounded corners.
My SVG file is shown below.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="0" y="0" width="100" height="100" rx="20" ry="20" fill="#000000" />
  <rect x="10" y="10" width="80" height="80" rx="20" ry="20" fill="#FFFFFf"/>
</svg> 

This is the return of Processing:
image

The processing code:

PShape s;
void setup(){
  size(200,200);
  s=loadShape("box_round.svg");
}
void draw(){
  shape(s,10,10);
}

So what is this for?Sincerely waiting for your reply.

I’m guessing that Processing’s SVG parser doesn’t support rx and ry properties

Other way may be to use paths instead of rects. SVG’s path has a property called stroke-linejoin to set the corners, and this seems to be properly read by processing.

With the SVG from MDN doc, I tested something like this

PShape s;
void setup(){
  size(1000,1000);
  s=loadShape("paths.svg");
}
void draw(){
  shape(s,0,0,1000,1000);
}

3 Likes