Terminology

A conforming render method is any concrete expression of the data model that complies with the normative statements in this specification. Specifically, all relevant normative statements in Sections and of this document MUST be enforced.

A conforming processor is any algorithm realized as software and/or hardware that generates or consumes a conforming render method. Conforming processors MUST produce errors when non-conforming documents are consumed.

This document also contains examples that contain JSON and JSON-LD content. Some of these examples contain characters that are invalid JSON, such as inline comments (`//`) and the use of ellipsis (`...`) to denote information that adds little value to the example. Implementers are cautioned to remove this content if they desire to use the information as valid JSON or JSON-LD.

The `renderMethod` Property

The `renderMethod` property is a reserved extension point in the Verifiable Credentials Data Model specification [[VC-DATA-MODEL-2.0]]. An issuer can utilize this property in a verifiable credential to express one or more preferred render methods.

renderMethod

The value of the `renderMethod` property MUST specify one or more rendering methods that can be used by software to express the verifiable credential using a visual, auditory, or haptic mechanism. Each `renderMethod` value MUST specify its `type`, for example, `SvgRenderingTemplate2023`. The precise contents of each rendering hint is determined by the specific `renderMethod` `type` definition.

SvgRenderingTemplate2023

When an issuer desires to specify SVG rendering instructions for a verifiable credential, they MAY add a `render` property that uses the data model described below.

The data model shown above is expressed in a verifiable credential in the example below.

{
  "@context": [
    "https://www.w3.org/ns/credentials/v2",
    "https://www.w3.org/ns/credentials/examples/v2"
  ],
  "id": "http://example.edu/credentials/3732",
  "type": ["VerifiableCredential", "UniversityDegreeCredential"],
  "issuer": "https://example.edu/issuers/14",
  "validFrom": "2010-01-01T19:23:24Z",
  "credentialSubject": {
    "id": "did:example:ebfeb1f712ebc6f1c276e12ec21",
    "degree": {
      "type": "BachelorDegree",
      "name": "Bachelor of Science and Arts"
    }
  },
  "renderMethod": [{
    "id": "https://example.edu/credentials/BachelorDegree.svg",
    "type": "SvgRenderingTemplate2023",
    "name": "Portrait Mode",
    "css3MediaQuery": "@media (orientation: portrait)",
    "digestMultibase": "zQmAPdhyxzznFCwYxAp2dRerWC85Wg6wFl9G270iEu5h6JqW"
  }]
  
}
        

In the example above, the issuer has provided an SVG rendering template for a bachelor's degree that will be filled in with the information in the verifiable credential. The rendering is preferred when the device or paper is in a portrait (display is taller than it is wider) orientation.

Render (SvgRenderingTemplate2023)

The following algorithm is used to transform the SVG image template into the final SVG image that is displayed. The inputs to the algorithm are the verifiable credential (`verifiableCredential`) and the SVG image source code (`svgImage`). The output is a SVG image.

1. Generate a map, `replacementMap`, by finding all strings in `svgImage` that start with `{{` (double open braces) and end with `}}` (double close braces). For each string, `templateKey`, that is found:
   1. Generate another string, `templateValue`, by evaluating the value of `templateKey` (without the opening or closing braces) using the JSON Pointer [[RFC6901]] algorithm with the `verifiableCredential` as input to the algorithm. If the evaluation is `null`, set `templateValue` to the empty string.
   2. Set a key in `replacementMap` by using `templateKey` and associate it with `templateValue`.
2. For every key in `replacementMap`, replace each corresponding string in `svgImage` that matches the key with the associated value in the `replacementMap`.