Why aren't my svg images rendering properly in processing?

Processing
1

i am using PShape to draw an svg image with shape(); but it’s not closing all the way. it basically looks like how the shape would look if i was doing beginShape() vertices and endShape() without using endShape(CLOSE); the problem is that obviously you can’t use CLOSE in the shape() function, so how do i make sure the shape closes all the way?

here’s the svg file if it helps

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.6 55.56"><path d="M39.9,14c-.57,0-1.14,0-1.7.06l3.17-3.19a1.55,1.55,0,0,0-1.1-2.64H37.12a1.37,1.37,0,0,0-1.37,1.37v4.67A24.51,24.51,0,0,0,32.1,14a24.9,24.9,0,1,0,0,49.79A24.08,24.08,0,0,0,36,63.47a23.75,23.75,0,0,0,3.89.31A24.9,24.9,0,1,0,39.9,14ZM56.55,29a1,1,0,0,1-1.39-.29,17.2,17.2,0,0,0-6.58-5.85,1,1,0,0,1-.5-1.23L49,19.11a1,1,0,0,1,1.35-.55A23.15,23.15,0,0,1,59,26.07a1,1,0,0,1-.26,1.36Z" transform="translate(-7.2 -8.22)"/></svg>

bonus: how can i modify this shape to draw it with a custom fill or stroke? would i have to modify the root file directly or is there a way to do like shape.fill()

::update::
okay i think the problem is actually a lot deeper here, i tried it with some of my other svg images and some of them omit like half of the vertices. they look fine everywhere else, they just break in processing. one of the svg files won’t even load, and i get an unhandled shape command error? wouldn’t something like that make the shape unreadable from any software? it works everywhere else and i made it in illustrator- what can i do to make sure my svgs all work properly in processing?

here’s the svg that’s not even loading properly:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.86 55.12"><path d="M58,24.07s-8-6.5-16-3.14c-2.35,1-4.14,1.72-5.52,2.23l6,3.46a1.63,1.63,0,0,1,.41,2.5l-31,35.31A1.64,1.64,0,0,1,9,62.83l4.81-14.22a15.67,15.67,0,0,0,4.29-.74,20.12,20.12,0,0,1-3.64-1.15l3-9a14.86,14.86,0,0,0,5-.75,19,19,0,0,1-4.27-1.45l3-8.76c1.6.56,3.85.59,7-.36A19.54,19.54,0,0,1,22.15,24l1.94-5.76a1.65,1.65,0,0,1,2.38-.89l5.82,3.36A11.79,11.79,0,0,1,32.82,19,13.07,13.07,0,0,1,37,13.43,20.47,20.47,0,0,1,50.28,9.94c12.31.69,14.4,7.76,14.5,8.22-.4-.23-8.82-4.75-17.05-2.3l.35.07C57.59,18.14,58,24.07,58,24.07Z" transform="translate(-8.92 -9.88)"/></svg>

and here’s the error i’m getting

parsed: M,58,24.07,s,-8,-6.5,-16,-3.14,c,-2.35,1,-4.14,1.72,-5.52,2.23,l,6,3.46,a,1.63,1.63,0,0,1,.41,2.5,l,-31,35.31,A,1.64,1.64,0,0,1,9,62.83,l,4.81,-14.22,a,15.67,15.67,0,0,0,4.29,-.74,20.12,20.12,0,0,1,-3.64,-1.15,l,3,-9,a,14.86,14.86,0,0,0,5,-.75,19,19,0,0,1,-4.27,-1.45,l,3,-8.76,c,1.6.56,3.85.59,7,-.36,A,19.54,19.54,0,0,1,22.15,24,l,1.94,-5.76,a,1.65,1.65,0,0,1,2.38,-.89,l,5.82,3.36,A,11.79,11.79,0,0,1,32.82,19,13.07,13.07,0,0,1,37,13.43,20.47,20.47,0,0,1,50.28,9.94,c,12.31.69,14.4,7.76,14.5,8.22,-.4,-.23,-8.82,-4.75,-17.05,-2.3,l
unparsed: .35.07,C,57.59,18.14,58,24.07,58,24.07,Z
RuntimeException: shape command not handled: .35.07
2

Hi @canslp,

I think this is because decimal points are being used as a delimiter between two numbers in the Illustrator generated SVG. For example, the command that throws an error, l.35.07, is probably supposed to mean line to relative coordinate (0.35, 0.07). Processing’s SVG parsing does not cover the full spectrum of syntax, and so it doesn’t check for this shorthand.

As far as fills and strokes, try enableStyle and disableStyle?

Best,
Jeremy

3

thanks, is there anything i can do to convert these files to a format processing will understand? would it help to export with vertices rounded to whole numbers?

4

Hi @canslp ,

A good way to find out if whole numbers will work would be to test it. I don’t have Illustrator, so I can’t help you with your other questions. This could be reported as an issue on Processing’s Github, but most issues there are ignored.

Best,
Jeremy

5

PS, For what it’s worth, here are the two files you provided, with all instructions converted to cubic Bezier curves. I converted them with a homebrew library.

Carrot:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="405" viewBox="0 0 720 405">
<path id="background" d="M 0.0 0.0 L 720.0 0.0 L 720.0 405.0 L 0.0 405.0 Z" stroke="none" fill-opacity="1.000000" fill="#fff7d5"></path>
<g id="camera" transform="translate(360.000000, 202.500000) scale(1.000000, -1.000000) rotate(0.0) translate(0.0, 0.0)">
<g id="3c05d20c" class="materialsolid" stroke-width="0.000000" stroke-opacity="1.000000" stroke="#afafaf" stroke-linejoin="round" stroke-linecap="round" fill-opacity="1.000000" fill="#202020">
<path id="514a1823" class="curveentity2" fill-rule="evenodd" transform="translate(0.0, 0.0) rotate(0.0) scale(700.000000, -700.000000)" d="M 0.206924 -0.129940 C 0.206924 -0.129940,0.129033 -0.193226,0.051142 -0.160512 C 0.028261 -0.150776,0.010833 -0.143765,-0.002602 -0.138800 C 0.016870 -0.127571,0.036343 -0.116341,0.055815 -0.105112 C 0.059972 -0.102742,0.062842 -0.098615,0.063616 -0.093894 C 0.064390 -0.089172,0.062989 -0.084345,0.059807 -0.080771 C -0.040801 0.033825,-0.141410 0.148422,-0.242019 0.263018 C -0.244798 0.268039,-0.250061 0.271205,-0.255799 0.271308 C -0.261536 0.271411,-0.266910 0.268436,-0.269868 0.263519 C -0.272826 0.258602,-0.272936 0.252460,-0.270157 0.247440 C -0.254546 0.201290,-0.238935 0.155140,-0.223325 0.108989 C -0.209135 0.108543,-0.195076 0.106118,-0.181556 0.101784 C -0.193697 0.099184,-0.205564 0.095435,-0.216996 0.090588 C -0.207260 0.061379,-0.197524 0.032169,-0.187787 0.002960 C -0.171262 0.003325,-0.154796 0.000855,-0.139105 -0.004341 C -0.153475 -0.007380,-0.167431 -0.012119,-0.180680 -0.018459 C -0.170943 -0.046889,-0.161207 -0.075319,-0.151471 -0.103749 C -0.135892 -0.098297,-0.113986 -0.098005,-0.083316 -0.107254 C -0.104085 -0.111706,-0.123963 -0.119604,-0.142124 -0.130621 C -0.135827 -0.149315,-0.129531 -0.168009,-0.123235 -0.186703 C -0.121667 -0.191219,-0.118163 -0.194807,-0.113686 -0.196482 C -0.109208 -0.198156,-0.104209 -0.197747,-0.100063 -0.195368 C -0.081174 -0.184463,-0.062286 -0.173559,-0.043397 -0.162654 C -0.042101 -0.168326,-0.040376 -0.173892,-0.038237 -0.179303 C -0.029826 -0.200726,-0.015758 -0.219472,0.002460 -0.233535 C 0.040354 -0.259404,0.086042 -0.271411,0.131759 -0.267514 C 0.251613 -0.260796,0.271962 -0.191960,0.272936 -0.187482 C 0.269041 -0.189721,0.187061 -0.233729,0.106931 -0.209875 C 0.108067 -0.209648,0.109203 -0.209421,0.110339 -0.209194 C 0.202932 -0.187676,0.206924 -0.129940,0.206924 -0.129940 C 0.206924 -0.129940,0.206924 -0.129940,0.206924 -0.129940 Z "></path>
</g>
</g>
</svg>

Apple:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="405" viewBox="0 0 720 405">
<path id="background" d="M 0.0 0.0 L 720.0 0.0 L 720.0 405.0 L 0.0 405.0 Z" stroke="none" fill-opacity="1.000000" fill="#fff7d5"></path>
<g id="camera" transform="translate(360.000000, 202.500000) scale(1.000000, -1.000000) rotate(0.0) translate(0.0, 0.0)">
<g id="61dd98bc" class="materialsolid" stroke-width="0.000000" stroke-opacity="1.000000" stroke="#afafaf" stroke-linejoin="round" stroke-linecap="round" fill-opacity="1.000000" fill="#202020">
<path id="3e8ec9b2" class="curveentity2" fill-rule="evenodd" transform="translate(0.0, 0.0) rotate(0.0) scale(700.000000, -700.000000)" d="M 0.036912 -0.215409 C 0.031365 -0.215409,0.025818 -0.215409,0.020368 -0.214825 C 0.030651 -0.225173,0.040935 -0.235522,0.051218 -0.245870 C 0.055487 -0.250186,0.056753 -0.256676,0.054418 -0.262279 C 0.052083 -0.267883,0.046584 -0.271554,0.040513 -0.271562 C 0.030294 -0.271562,0.020076 -0.271562,0.009857 -0.271562 C 0.002543 -0.271562,-0.003475 -0.265544,-0.003475 -0.258229 C -0.003475 -0.243080,-0.003475 -0.227931,-0.003475 -0.212781 C -0.015233 -0.214541,-0.027107 -0.215419,-0.038996 -0.215409 C -0.126596 -0.217164,-0.208584 -0.171278,-0.252898 -0.095693 C -0.297213 -0.020108,-0.297213 0.073845,-0.252898 0.149430 C -0.208584 0.225015,-0.126596 0.270901,-0.038996 0.269145 C -0.026281 0.269139,-0.013588 0.268097,-0.001042 0.266031 C 0.011473 0.268074,0.024134 0.269083,0.036815 0.269048 C 0.124874 0.271562,0.207631 0.225867,0.252413 0.150003 C 0.297194 0.074139,0.297213 -0.020395,0.252462 -0.096277 C 0.207711 -0.172159,0.124972 -0.217888,0.036912 -0.215409 C 0.036912 -0.215409,0.036912 -0.215409,0.036912 -0.215409 Z M 0.198950 -0.069429 C 0.196785 -0.068000,0.194137 -0.067493,0.191598 -0.068023 C 0.189059 -0.068552,0.186834 -0.070076,0.185422 -0.072251 C 0.169379 -0.096461,0.147307 -0.116084,0.121386 -0.129183 C 0.116988 -0.131355,0.114885 -0.136530,0.116520 -0.141154 C 0.119504 -0.149329,0.122489 -0.157504,0.125473 -0.165678 C 0.126437 -0.168185,0.128397 -0.170184,0.130884 -0.171197 C 0.133371 -0.172210,0.136170 -0.172150,0.138611 -0.171031 C 0.172349 -0.154107,0.201300 -0.128972,0.222793 -0.097944 C 0.225617 -0.093593,0.224493 -0.087710,0.220263 -0.084708 C 0.213158 -0.079615,0.206054 -0.074522,0.198950 -0.069429 Z "></path>
</g>

</g>
</svg>
6

oh sweet thanks. it looks like there are big off white rectangles in the background of these, but otherwise they do load in and work without crashing

7

hey i think i’m gonna try using your library to convert the rest of the graphics. do you think you could explain how to use this to format svgs for processing

8

Hi @cansip,

Here’s how I converted it:

import camzup.core.*;
import camzup.pfriendly.*;

PShape converted;

void setup() {
  
  // Set the renderer.
  size(256, 256, YupJ2.PATH_STR);

  // Load the original SVG into a CurveEntity2.
  // Supply the sketch's path.
  CurveEntity2 entity = ParserSvg.load(
    sketchPath() + "\\data\\carrotOriginal.svg");

  // Resize.
  entity.reframe();
  entity.scaleTo(new Vec2(256, -256));

  // Create the SVG fill color.
  MaterialSolid material = new MaterialSolid(new Color(1.0, 0.5, 0.0));

  // Get the graphics renderer.
  YupJ2 graphics = (YupJ2)getGraphics();
  
  // Give the entity and the material to the renderer's
  // SVG string maker.
  String svgstr = graphics.toSvgString(entity, material);

  // Save the String with vanilla Processing.
  saveStrings("newCarrot.svg", new String[] { svgstr });

  // Optional: convert to PShape for display.
  converted = Convert.toPShape(graphics, entity);
  converted.disableStyle();
}

void draw() {  
  background(#fff7d5);
  noStroke();
  fill(#ff7f00);
  shape(converted);
}

The SVG import doesn’t look for any style info (color fills, stroke information), so that will be lost if it’s in your original file. The graphics renderer’s size and background color are what create the background rectangle; that is a single path you can delete from the SVG.

Jeremy

1 Like