In Python mode, p5js.svg logo image displays strangely

Processing.py
1

I had been experimenting with the p5.js logo, downloaded from the upper left corner of their home page, and it appeared perfectly in the browser, when rendered with p5.js code. I then decided to experiment with the same image in Processing.py. Disappointingly, it has not rendered correctly in the display window. Following is a screen capture of the result:

screen shot of p5js svg display

Here’s the code:

def setup():
  global img
  
  # this svg image displays correctly, ...
  # img = loadShape("network.svg")
  
  # but this svg image displays strangely.
  img = loadShape("p5js.svg")
  
  size(250, 114)
  noLoop()

def draw():
  shape(img, 0, 0, 250, 114)

What needs to be done in order for the image to render correctly?

2

I’m afraid you’ll get the same result in Java Mode for Processing. The SVG renderer won’t support certain SVG features – in this case, drawing all of the shapes with one <path> element. You can open the SVG with a code editor to see what I mean.

You could modify the graphic using an editor like Inkscape or Adobe Illustrator. In Inkscape, you select the graphic, then Path > Break Apart to create multiple paths. You’d have to touch up a few other things, too – use a Path > Difference to repair the P character, re-add the fill, etc.

Here’s the result for the modified SVG, which you can just paste over the existing markup –

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="114">
  <path
     id="p"
     d="M 36.431641 25.957031 C 33.805641 25.957031 31.435125 26.257516 29.328125 26.853516 C 27.218125 27.451516 25.32725 28.209094 23.65625 29.121094 C 21.98425 30.038094 20.570969 31.072563 19.417969 32.226562 C 18.262969 33.380563 17.328281 34.515906 16.613281 35.628906 L 16.253906 35.628906 L 16.253906 27.630859 L 2.5253906 27.630859 L 2.5253906 113.58984 L 16.851562 113.58984 L 16.851562 77.294922 L 17.089844 77.294922 C 18.919844 80.162922 21.525156 82.429563 24.910156 84.101562 C 28.292156 85.771562 32.012266 86.607422 36.072266 86.607422 C 40.448266 86.607422 44.369031 85.791156 47.832031 84.160156 C 51.295031 82.532156 54.238969 80.341703 56.667969 77.595703 C 59.093969 74.849703 60.967297 71.626781 62.279297 67.925781 C 63.593297 64.224781 64.25 60.264875 64.25 56.046875 C 64.25 51.828875 63.573703 47.888562 62.220703 44.226562 C 60.866703 40.566562 58.956234 37.382781 56.490234 34.675781 C 54.022234 31.970781 51.076297 29.840156 47.654297 28.285156 C 44.231297 26.734156 40.491641 25.957031 36.431641 25.957031 z M 33.207031 37.658203 C 35.992031 37.658203 38.420234 38.195531 40.490234 39.269531 C 42.560234 40.345531 44.269047 41.759812 45.623047 43.507812 C 46.976047 45.259813 47.991922 47.229969 48.669922 49.417969 C 49.345922 51.606969 49.683594 53.815922 49.683594 56.044922 A 22.937 22.937 0 0 1 48.669922 62.730469 C 47.991922 64.959469 46.976047 66.949219 45.623047 68.699219 C 44.269047 70.451219 42.559234 71.883047 40.490234 72.998047 C 38.420234 74.113047 35.992031 74.669922 33.207031 74.669922 C 30.580031 74.669922 28.232063 74.134594 26.164062 73.058594 A 17.214 17.214 0 0 1 20.851562 68.822266 A 18.438 18.438 0 0 1 17.507812 62.910156 C 16.749813 60.723156 16.373047 58.514156 16.373047 56.285156 C 16.373047 54.058156 16.749813 51.828609 17.507812 49.599609 A 18.321 18.321 0 0 1 20.851562 43.628906 A 18.075 18.075 0 0 1 26.164062 39.330078 C 28.232062 38.215078 30.580031 37.658203 33.207031 37.658203 z "
     style="fill:#ed225d" />
  <path
     id="5"
     d="m 124.086,45.836 c -1.473,-3.301 -3.521,-6.088 -6.148,-8.357 -2.626,-2.268 -5.711,-4 -9.252,-5.193 -3.543,-1.193 -7.384,-1.791 -11.521,-1.791 -1.513,0 -3.204,0.082 -5.074,0.238 -1.871,0.162 -3.482,0.439 -4.835,0.838 l 0.835,-18.268 h 34.504 V 0.41 H 74.481 l -1.433,46.201 c 1.271,-0.635 2.725,-1.232 4.357,-1.791 a 66.991,66.991 0 0 1 5.014,-1.49 45.797,45.797 0 0 1 5.254,-1.016 38.588,38.588 0 0 1 5.074,-0.357 c 2.307,0 4.576,0.258 6.805,0.775 2.228,0.518 4.238,1.434 6.029,2.746 1.791,1.312 3.242,3.045 4.358,5.193 1.113,2.148 1.671,4.855 1.671,8.119 0,2.547 -0.418,4.836 -1.254,6.865 -0.835,2.027 -1.97,3.721 -3.401,5.072 a 14.723,14.723 0 0 1 -5.016,3.104 c -1.91,0.719 -3.939,1.076 -6.089,1.076 -3.819,0 -7.124,-1.016 -9.909,-3.045 -2.787,-2.029 -4.775,-4.715 -5.97,-8.059 l -0.159,0.059 -10.368,9.715 c 2.097,3.42 4.8,6.281 8.14,8.553 4.854,3.301 10.823,4.955 17.909,4.955 4.218,0 8.197,-0.678 11.938,-2.029 3.74,-1.352 7.004,-3.303 9.79,-5.852 2.785,-2.545 4.994,-5.67 6.627,-9.371 1.63,-3.701 2.446,-7.898 2.446,-12.596 0.001,-4.298 -0.735,-8.096 -2.208,-11.401 z"
     style="fill:#ed225d" />
  <path
     id="*"
     d="m 153.559,72.816 8.533,-2.576 1.676,5.156 -8.498,2.898 5.275,7.48 -4.447,3.226 -5.553,-7.348 -5.408,7.154 -4.319,-3.289 5.275,-7.223 -8.563,-3.09 1.677,-5.16 8.599,2.771 V 63.92 h 5.754 v 8.896 z"
     style="fill:#ed225d" />
  <path
     id="j"
     d="m 189.333,24.893 v 63.506 c 0,3.422 -0.279,6.666 -0.836,9.73 -0.559,3.064 -1.611,5.73 -3.164,8 -1.551,2.27 -3.662,4.078 -6.328,5.432 -2.668,1.354 -6.148,2.029 -10.447,2.029 a 27.3,27.3 0 0 1 -3.582,-0.238 c -1.193,-0.16 -2.148,-0.32 -2.865,-0.479 l 1.195,-12.178 c 0.637,0.16 1.312,0.279 2.029,0.359 0.717,0.078 1.352,0.119 1.91,0.119 1.67,0 3.023,-0.318 4.059,-0.955 a 6.402,6.402 0 0 0 2.389,-2.627 c 0.555,-1.115 0.914,-2.408 1.074,-3.881 0.158,-1.473 0.238,-3.043 0.238,-4.715 V 24.893 Z"
     style="fill:#ed225d" />
  <path
     id="s"
     d="m 238.163,42.912 c -1.275,-1.672 -3.025,-3.123 -5.254,-4.357 -2.229,-1.234 -4.656,-1.852 -7.283,-1.852 -2.309,0 -4.416,0.479 -6.326,1.434 -1.912,0.953 -2.865,2.547 -2.865,4.775 0,2.228 1.053,3.803 3.162,4.715 2.109,0.916 5.195,1.852 9.254,2.807 2.148,0.479 4.316,1.115 6.506,1.91 2.19,0.795 4.18,1.85 5.971,3.164 a 15.605,15.605 0 0 1 4.357,4.895 c 1.113,1.951 1.672,4.318 1.672,7.104 0,3.504 -0.658,6.469 -1.971,8.895 -1.312,2.428 -3.064,4.398 -5.254,5.91 -2.19,1.512 -4.736,2.607 -7.641,3.283 a 39.64,39.64 0 0 1 -9.014,1.014 c -4.459,0 -8.795,-0.816 -13.014,-2.447 -4.219,-1.629 -7.721,-3.959 -10.506,-6.982 l 9.432,-8.836 c 1.592,2.07 3.66,3.781 6.209,5.133 2.547,1.354 5.371,2.029 8.477,2.029 1.033,0 2.088,-0.117 3.164,-0.357 a 10.742,10.742 0 0 0 2.984,-1.133 6.202,6.202 0 0 0 2.209,-2.09 c 0.555,-0.877 0.834,-1.949 0.834,-3.225 0,-2.389 -1.094,-4.098 -3.281,-5.133 -2.191,-1.035 -5.475,-2.07 -9.85,-3.104 a 47.301,47.301 0 0 1 -6.27,-1.852 c -2.029,-0.756 -3.84,-1.75 -5.432,-2.984 a 13.778,13.778 0 0 1 -3.82,-4.598 c -0.955,-1.83 -1.434,-4.098 -1.434,-6.805 0,-3.184 0.656,-5.928 1.971,-8.236 a 16.936,16.936 0 0 1 5.193,-5.674 c 2.148,-1.471 4.576,-2.566 7.283,-3.281 a 32.486,32.486 0 0 1 8.357,-1.076 c 4.137,0 8.178,0.717 12.117,2.148 3.939,1.434 7.062,3.625 9.373,6.568 z"
     style="fill:#ed225d" />
</svg>

Note there’s a path for each character now. I’ve renamed the id values so you can tell what each path is for.

2 Likes
3

Thanks, @tabreturn. Your modified SVG file displays perfectly in Processing.py.

In order to make a comparison, I had opened the original p5js.svg file and the network.svg file from the media.zip set offered for use with the Make: introductory Processing books, and noticed that the network.svg code consists of circle and line features, while the p5js.svg consists solely of one path. I figured that this had something to do with the differences in behavior, but was unaware that splitting up the path would help.

Edited on December 17, 2020 to specify the link to the media.zip file.

1 Like