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.beginDraw();
  graphic.textMode(SHAPE);
  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.textFont(myFont);
      graphic.textLeading(fieldGeometry.getInt("leading"));
      graphic.fill(unhex(fieldGeometry.getString("color")));
      graphic.textAlign(alignment.get(fieldGeometry.getString("aligmentX")), alignment.get(fieldGeometry.getString("aligmentY")));
      graphic.text(fieldValue, fieldGeometry.getInt("x"), fieldGeometry.getInt("y"));
    }
  }
  graphic.dispose();
  graphic.endDraw();
}

Answers

  • 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. https://community.glowforge.com/t/generative-svgs-for-engraving/5843/43

    or

    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. https://github.com/jabauer/DAVILA

    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.