Re: SVG templating language standards?

Manu (etc.) – the biggest problem that you would encounter with this approach is SVG 1.1 (current version) does not support text wrap/flow, so that you will end up with a visual result that is probably not what you’d like in many cases.  And for some longer content esp. in certainly languages, most definitely not.

SVG 2 supports flowing text, but it is still in development and therefore not wide support.

Leonard

From: Manu Sporny <msporny@digitalbazaar.com>
Date: Sunday, July 10, 2022 at 1:26 PM
To: public-svgcg@w3.org <public-svgcg@w3.org>
Subject: SVG templating language standards?
EXTERNAL: Use caution when clicking on links or opening attachments.


Hi SVG-ers, :)

The Verifiable Credentials WG has been rechartered to work on VC 2.0:

https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2F2022%2F06%2Fverifiable-credentials-wg-charter.html&amp;data=05%7C01%7Clrosenth%40adobe.com%7C345a616ebe7c4eb0a11408da62994ffa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637930707857826298%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=dr1g2D3TzQGOk5ItFIhn0AB9KqQBKfRbNDdHsahuiD8%3D&amp;reserved=0

... and "display of VCs" is almost certainly going to be a topic of concern
over the next 18 months.

It has been suggested that utilizing SVG to provide graphical rendering of VCs
will meet the needs of 80% of our use cases. With that in mind, here's what we
have to work with:

* We have a JSON data structure containing variables
  that need to be rendered in an SVG file.

* We can reference an SVG file TEMPLATE or include one
  directly in the Verifiable Credential.

The questions to this group are:

1. Does there exist an SVG templating language?
2. If so, does it take JSON objects as input?
3. Any hints/pointers on previous attempts/failures?

We have been mixing SVG + a subset of Handlebars + JSON Pointer:

<svg version="1.1" width="300" height="200"
  xmlns="https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&amp;data=05%7C01%7Clrosenth%40adobe.com%7C345a616ebe7c4eb0a11408da62994ffa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637930707857826298%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=QyK3cjE%2FlfLT6NONbvXUMB%2BZtr%2BUjBE8FlOS8k3GOdg%3D&amp;reserved=0">

  <text x="150" y="125" font-size="60"
        text-anchor="middle" fill="white">
    {{credentialSubject.name}}
  </text>
</svg>

Note the use of "{{credentialSubject.name}}" in the SVG markup.

Any guidance from those who know better before we go down this path?

-- manu

--
Manu Sporny - https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.linkedin.com%2Fin%2Fmanusporny%2F&amp;data=05%7C01%7Clrosenth%40adobe.com%7C345a616ebe7c4eb0a11408da62994ffa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637930707857826298%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=BjkamL1rfFgaM3U2fe8UFrpduUl8RSN21QnvHdCHE18%3D&amp;reserved=0
Founder/CEO - Digital Bazaar, Inc.
News: Digital Bazaar Announces New Case Studies (2021)
https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.digitalbazaar.com%2F&amp;data=05%7C01%7Clrosenth%40adobe.com%7C345a616ebe7c4eb0a11408da62994ffa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637930707857826298%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=725pyQCBCHK87hgr1psSfoU7YKtyRPRn2CF64Y2lV10%3D&amp;reserved=0