# SVG based Credential Rendering

### 1. Overview

SVG Template Rendering enables **issuer-controlled visual representation of Verifiable Credentials (VCs)** in **Inji Web**, aligned with the W3C VC Render Method specification.

Instead of relying on static HTML layouts, Inji Web dynamically renders credentials using:

* **SVG templates hosted by issuers**
* **renderMethod (**svg-mustache**) in VC**
* **inji-vc-renderer library for binding VC data → SVG**

### 2. Why This Feature Matters

#### Key Benefits

**1. Issuer-Controlled Branding**

* Governments, universities, enterprises can define:
  * Layout
  * Colors
  * Logos
  * Field placement

**2. Standardized Rendering (W3C Aligned)**

* Uses **W3C VC Render Method**
* Ensures **interoperability across wallets & verifiers**

**3. Better User Experience**

* Human-readable credentials (like real certificates)
* Not just raw JSON or basic UI cards

**4. Reusability Across Ecosystem**

* Same VC renders consistently in:
  * Inji Web
  * Wallets
  * Verifier portals (e.g., Mimoto)

**5. Security via Template Integrity**

* `digestMultibase` ensures:
  * Template is **not tampered**
  * Trusted rendering source

### 3. Supported Credential Types

#### Supported

* **W3C JSON-LD VC 2.0 credentials**
* Credentials containing:

```
"renderMethod": {
  "type": "TemplateRenderMethod",
  "renderSuite": "svg-mustache"
}
```

#### Example Use Cases

* National ID
* Farmer Registry Certificate
* Pollution Certificate
* Student ID / Hall Ticket
* Vaccination Certificate

### 4. How does the Flow Work? (User Flow)

#### Step-by-Step Flow (Inji Web)

**Step 1: VC Acquisition**

* User:
  * Downloads VC OR
  * Receives via wallet OR
  * Scans QR (OpenID4VP)

**Step 2: Detect Rendering Capability**

* Inji Web checks:
  * VC format = JSON-LD 2.0
  * `renderMethod` present
  * `renderSuite` = `svg-mustache`

**Step 3: Invoke Renderer**

* Call `renderSvg(vcJsonData)` (from `inji-vc-renderer`)

**Step 4: Fetch Template**

* Extract template URL from VC
* Fetch SVG from issuer endpoint

**Step 5: Verify Integrity**

* Compare `digestMultibase` (VC) vs actual template hash
* If mismatch → ❌ fail rendering

**Step 6: Pre-processing (Library Logic)**

From renderer capabilities:

* Locale transformation:

gender → gender.eng / gender.fr

* QR Code injection:

`credentialSubject.qrCodeImage`

* Multi-line formatting:
  * Benefits
  * Address fields

**Step 7: Placeholder Replacement**

Example:

```
<svg>{{credentialSubject/fullName}}</svg>
```

\-->

```
<svg>John Doe</svg>
```

**Step 8: Render Output**

* SVG displayed in UI
* Optional:
  * Convert SVG → PDF (download/share)

**Step 9: Fallback Flow**

If not eligible:

➡️ Use existing:

* HTML templates
* Default credential card UI

\[Image] - Flow

### 5. Current Limitations

#### Technical Constraints

**1. Only SVG Templates Supported**

* No support for:
  * HTML templates (via renderMethod)
  * Other render suites

**2. Strict JSON Pointer Compliance**

* Placeholders must follow:

```
{{credentialSubject/name}}
```

* Incorrect mapping → rendering failure

**3. Template Hosting Dependency**

* Template must be:
  * Publicly accessible
  * Highly available

**4. Integrity Dependency**

* If `digestMultibase` fails:
  * Rendering is blocked

**5. Limited Dynamic Layout Handling**

* Complex layouts (tables, dynamic sections) require:
  * Careful SVG design

**6. No Offline Template Support (Currently)**

* Requires network fetch

**7. Partial Credential Rendering Edge Cases**

* When VP shares:
  * Partial credentials
  * Multiple credentials

→ Template may not align

### 6. Test the Feature Today

#### How to Enable

**Step 1: Configure Inji Certify**

Set:

```
mosip.certify.data-provider-plugin.rendering-template-id=<TEMPLATE_ID>
```

**Step 2: Add renderMethod in VC Template**

```
"renderMethod": [{
  "type": "TemplateRenderMethod",
  "renderSuite": "svg-mustache",
  "template": {
    "id": "https://issuer-host/template.svg",
    "mediaType": "image/svg+xml",
    "digestMultibase": "<digest>"
  }
}]
```

**Step 3: Host SVG Template**

* Ensure:
  * Public URL
  * Correct MIME: `image/svg+xml`

**Step 4: Issue Credential**

* Via OpenID4VCI flow
* Ensure VC contains `renderMethod`

**Step 5: Load in Inji Web**

* Upload VC OR
* Use OpenID4VP flow

**Step 6: Verify Rendering**

Expected:

* ✅ SVG visual card appears
* ✅ Correct data binding
* ✅ Branding applied

**Step 7: Negative Testing**

* Remove template URL → expect error
* Change digest → expect integrity failure
* Break placeholders → expect incorrect rendering


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.inji.io/inji-wallet/inji-web/overview/features/svg-based-credential-rendering.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.