# A simple SVG file display incompetely

**URL:** <https://discourse.processing.org/t/a-simple-svg-file-display-incompetely/32771>\
**Category:** Coding Questions\
**Created:** [October 12, 2021, 3:24am UTC](https://discourse.processing.org/t/a-simple-svg-file-display-incompetely/32771 "2021-10-12T03:24:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Load](https://avatars.discourse-cdn.com/v4/letter/l/958977/32.png) [@Load](https://discourse.processing.org/u/Load)\
**Post date:** [October 12, 2021, 3:24am UTC](https://discourse.processing.org/t/a-simple-svg-file-display-incompetely/32771/1 "2021-10-12T03:24:03Z")

</div>

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.

```auto
<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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/291e66c57925d84aa2b4068d9fcb9142086521ba.png)

The processing code:

```auto
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.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 12, 2021, 6:11pm UTC](https://discourse.processing.org/t/a-simple-svg-file-display-incompetely/32771/2 "2021-10-12T18:11:51Z")

</div>

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

> <https://github.com/processing/processing/blob/a6e0e227a948e7e2dc042c04504d6f5b8cf0c1a6/core/src/processing/core/PShapeSVG.java#L443>

Other way may be to use paths instead of rects. SVG’s `path` has a property called [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/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

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

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9b77c75cec37f54f7a8e3b47e5420db1b7bbbf75.png)