Rendering text in SVG files

edited March 2018 in Questions about Code

Hey folks, long time no see ;) I am developing a template engine using Processing so we can quit Illustrator when doing data-driven image generation. This little tool basically allows you to pick a template file and write a a bunch of strings loaded from a json file, saving a image for each entry in the json file. The images are exported as PNG, SVG and PDF.

Everything is working fine except when exporting the SVG, I am getting: textMode(SHAPE) is not supported by this renderer.

Text is being rendered as tags inside the svg file instead of Shapes (as I would like to). Everything is good in with PDF and PNG exporting. Tried taking a look at the SVG renderer and it looked almost as a clone of the PDF renderer so that gave me no clue how to fix this issue. Here is my code snippet:

void exportSVG(String entryId, String entryFont, boolean entryIsRTL, JSONArray data, JSONObject geometry) {
  String format = "svg";
  String filePath = EXPORT_PATH + format + "/" + templateFile + "_" + entryId + "." + format;
  PGraphics graphic = createGraphics(templateWidth, templateHeight, SVG, filePath);
  graphic.shape(templateShape, 0, 0, templateWidth, templateHeight);
  for (int i = 0; i < data.size(); i++) {
    JSONArray stringData = data.getJSONArray(i);
    String fieldName = stringData.getString(0);
    String fieldValue = stringData.getString(1);
    if(!geometry.isNull(fieldName)) {
      JSONObject fieldGeometry = geometry.getJSONObject(fieldName);
      PFont myFont = createFont(entryFont, fieldGeometry.getInt("fontSize"));
      graphic.textAlign(alignment.get(fieldGeometry.getString("aligmentX")), alignment.get(fieldGeometry.getString("aligmentY")));
      graphic.text(fieldValue, fieldGeometry.getInt("x"), fieldGeometry.getInt("y"));


  • long time no see

    Edit post, highlight code, press ctrl-o to format

  • edited March 2018

    @mperes -- re:

    a template engine using Processing

    Sounds like fun!

    Interestingly, I've seen the error message you list mentioned many times as a red herring -- you get the error, but the output is fine -- for both SVG or PDF renderers.

    Unfortunately I don’t seem to be able to save out to svg and I see the following error in the log: textMode(SHAPE) is not supported by this renderer. [...] I just looked in the location of the output in the logs and the svg was output correctly. So that error in the log does not affect the output.


    Error message while running the code: "textMode(SHAPE) is not supported by this renderer." -- Ignore this error message. It happens every time the code runs, but does not actually indicate a problem. In fact, the PDF renderer does support textMode(SHAPE) and if it is removed will not render bold fonts in the PDF snapshot. Go figure.

    A much older discussion:

  • edited March 2018

    Hey Jeremy,

    The SVG is being saved, however the text() is being rendered as a text tag instead of a Path, which is the behavior I would like and that happens to be the case with the PDF Renderer.

    The problem is that I am using a lot os custom fonts (multi language translation) and having plain text inside the svg does not help to distribute the files.

Sign In or Register to comment.