Remove special characters from SVG

credentials/fema-ics-100/build.js

@@ -0,0 +1,18 @@
+import fs from 'fs';
+import path from 'path';
+
+const svgPath = path.join(import.meta.dirname, 'image.svg');
+const jsonPath = path.join(import.meta.dirname, 'credential.json');
+
+const svgContent = fs.readFileSync(svgPath, 'utf8');
+// put SVG on a single line and remove excess whitespace
+const minifiedSvg = svgContent
+  .replace(/\r?\n|\r/g, ' ')
+  .replace(/\s{2,}/g, ' ')
+  .replace(/>\s+</g, '><')
+  .trim();
+
+// add the SVG as the `template` value of the first `renderMethod` property
+const json = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+json.renderMethod[0].template = minifiedSvg;
+fs.writeFileSync(jsonPath, JSON.stringify(json, null, 2));

credentials/fema-ics-100/credential.json

@@ -28,7 +28,7 @@
         "narrative": "Awarded upon completion of the [Introduction to the Incident Command System (ICS-100.c)](https://training.fema.gov/is/courseoverview.aspx?code=IS-100.c&lang=en) online course.\n\nICS 100, Introduction to the Incident Command System, introduces the Incident Command System (ICS) and provides the foundation for higher level ICS training. This course describes the history, features and principles, and organizational structure of the Incident Command System. It also explains the relationship between ICS and the National Incident Management System (NIMS).\n\nThis course takes approximately 2 hours to complete, self-paced, online."
       },
       "image": {
-        "id":"https://examples.vcplayground.org/credentials/fema-ics-100/image.png",
+        "id": "https://examples.vcplayground.org/credentials/fema-ics-100/image.png",
         "type": "Image"
       },
       "alignment": [
@@ -45,11 +45,11 @@
   },
   "renderMethod": [
     {
-      "name": "Badge",
-      "mediaQuery": "@media (min-width: 1px)",
+      "name": "FEMA Certification",
+      "mediaQuery": "@media (orientation: portrait)",
       "type": "SvgRenderingTemplate2024",
       "mediaType": "image/svg+xml",
-      "template": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\"><defs><filter id=\"hexShadow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\"><feDropShadow dx=\"0\" dy=\"4\" stdDeviation=\"8\" flood-color=\"rgba(0,0,0,0.15)\"/></filter><linearGradient id=\"hexGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#ffffff\"/><stop offset=\"100%\" stop-color=\"#f8fafc\"/></linearGradient></defs><polygon points=\"256,20 472,138 472,374 256,492 40,374 40,138\" fill=\"url(#hexGradient)\" stroke=\"#1e3a8a\" stroke-width=\"4\" filter=\"url(#hexShadow)\"/><polygon points=\"256,50 442,158 442,354 256,462 70,354 70,158\" fill=\"none\" stroke=\"#dc2626\" stroke-width=\"2\" opacity=\"0.6\"/><g transform=\"translate(256, 256)\"><text x=\"0\" y=\"-100\" text-anchor=\"middle\" fill=\"#1e3a8a\" font-family=\"Arial, sans-serif\" font-size=\"24\" font-weight=\"bold\">FEMA IS-100.C</text><text x=\"0\" y=\"-75\" text-anchor=\"middle\" fill=\"#dc2626\" font-family=\"Arial, sans-serif\" font-size=\"13\" font-weight=\"600\">ICS Foundation</text><text x=\"0\" y=\"-58\" text-anchor=\"middle\" fill=\"#1e3a8a\" font-family=\"Arial, sans-serif\" font-size=\"13\" font-weight=\"600\">CERTIFIED</text><text x=\"0\" y=\"-25\" text-anchor=\"middle\" fill=\"#374151\" font-family=\"Arial, sans-serif\" font-size=\"9\" font-weight=\"400\"><tspan x=\"0\" dy=\"0\">Recognizes knowledge of the Incident Command System (ICS).</tspan><tspan x=\"0\" dy=\"11\">Holders can explain the principles and basic structure</tspan><tspan x=\"0\" dy=\"11\">of ICS and functional staff roles within the system.</tspan></text><text x=\"0\" y=\"15\" text-anchor=\"middle\" fill=\"#6b7280\" font-family=\"Arial, sans-serif\" font-size=\"9\" font-weight=\"500\">0.2 CEUs • 2 Hours • Self-Paced Online</text><text x=\"0\" y=\"35\" text-anchor=\"middle\" fill=\"#7c3aed\" font-family=\"Arial, sans-serif\" font-size=\"10\" font-weight=\"600\">NIMS Training Program</text><text x=\"0\" y=\"55\" text-anchor=\"middle\" fill=\"#6b7280\" font-family=\"Arial, sans-serif\" font-size=\"9\" font-weight=\"400\">FEMA Emergency Management Institute</text><g transform=\"translate(0, 85)\"><rect x=\"-70\" y=\"-8\" width=\"140\" height=\"16\" rx=\"8\" ry=\"8\" fill=\"#f3f4f6\" stroke=\"#d1d5db\" stroke-width=\"1\"/><text x=\"0\" y=\"2\" text-anchor=\"middle\" fill=\"#374151\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"500\">Valid: 2024-01-01 to 2026-02-01</text></g></g></svg>"
+      "template": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\"><defs><filter id=\"hexShadow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\"><feDropShadow dx=\"0\" dy=\"4\" stdDeviation=\"8\" flood-color=\"rgba(0,0,0,0.15)\"/></filter><linearGradient id=\"hexGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#ffffff\"/><stop offset=\"100%\" stop-color=\"#f8fafc\"/></linearGradient></defs><polygon points=\"256,20 472,138 472,374 256,492 40,374 40,138\" fill=\"url(#hexGradient)\" stroke=\"#1e3a8a\" stroke-width=\"4\" filter=\"url(#hexShadow)\"/><polygon points=\"256,50 442,158 442,354 256,462 70,354 70,158\" fill=\"none\" stroke=\"#dc2626\" stroke-width=\"2\" opacity=\"0.6\"/><g transform=\"translate(256, 256)\"><text x=\"0\" y=\"-100\" text-anchor=\"middle\" fill=\"#1e3a8a\" font-family=\"Arial, sans-serif\" font-size=\"24\" font-weight=\"bold\"> FEMA IS-100.C </text><text x=\"0\" y=\"-75\" text-anchor=\"middle\" fill=\"#dc2626\" font-family=\"Arial, sans-serif\" font-size=\"13\" font-weight=\"600\"> ICS Foundation </text><text x=\"0\" y=\"-58\" text-anchor=\"middle\" fill=\"#1e3a8a\" font-family=\"Arial, sans-serif\" font-size=\"13\" font-weight=\"600\"> CERTIFIED </text><foreignObject x=\"-180\" y=\"-45\" width=\"360\" height=\"60\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"font-family: Arial, sans-serif; font-size: 9px; font-weight: 400; color: #374151; text-align: center; line-height: 1.3;\"> {{credentialSubject.achievement.description}} </div></foreignObject><text x=\"0\" y=\"15\" text-anchor=\"middle\" fill=\"#6b7280\" font-family=\"Arial, sans-serif\" font-size=\"9\" font-weight=\"500\"> 0.2 CEUs | 2 Hours | Self-Paced Online </text><text x=\"0\" y=\"35\" text-anchor=\"middle\" fill=\"#7c3aed\" font-family=\"Arial, sans-serif\" font-size=\"10\" font-weight=\"600\"> NIMS Training Program </text><text x=\"0\" y=\"55\" text-anchor=\"middle\" fill=\"#6b7280\" font-family=\"Arial, sans-serif\" font-size=\"9\" font-weight=\"400\"> FEMA Emergency Management Institute </text><g transform=\"translate(0, 85)\"><rect x=\"-70\" y=\"-8\" width=\"140\" height=\"16\" rx=\"8\" ry=\"8\" fill=\"#f3f4f6\" stroke=\"#d1d5db\" stroke-width=\"1\"/><text x=\"0\" y=\"2\" text-anchor=\"middle\" fill=\"#374151\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"500\"> Valid: {{#formatDate}}{{validFrom}}{{/formatDate}} to {{#formatDate}}{{validUntil}}{{/formatDate}} </text></g></g></svg>"
     }
   ]
 }

credentials/fema-ics-100/queries.json

@@ -10,7 +10,14 @@
             "https://purl.imsglobal.org/spec/ob/v3p0/context-3.0.3.json",
             "https://w3id.org/vc/render-method/v2rc1"
           ],
-          "type": ["OpenBadgeCredential"]
+          "type": ["VerifiableCredential", "OpenBadgeCredential"],
+          "credentialSubject": {
+            "type": ["AchievementSubject"],
+            "achievement": {
+              "id": "urn:uuid:ac254bd5-8fad-4bb1-9d29-dfe049647037",
+              "type": ["Achievement"]
+            }
+          }
         },
         "acceptedCryptosuites": [
           "eddsa-rdfc-2022",