Add SVG template and Update image.svg

bparth24 · bparth24 · commit e3861b3152d5 · 2025-09-30T12:28:19.000-07:00
diff --git a/credentials/fema-ics-100/fema_template_version.svg b/credentials/fema-ics-100/fema_template_version.svg
@@ -0,0 +1,106 @@
+<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>
diff --git a/credentials/fema-ics-100/image.svg b/credentials/fema-ics-100/image.svg
@@ -1,36 +1,28 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
-  <!-- Definitions for effects -->
   <defs>
-    <!-- Drop shadow filter -->
     <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>
-    
-    <!-- Hexagon background gradient -->
     <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>
   
-  <!-- Hexagon shape - 20px padding from edges -->
   <polygon points="256,20 472,138 472,374 256,492 40,374 40,138" 
            fill="url(#hexGradient)" 
            stroke="#1e3a8a" 
-           stroke-width="4"
+           stroke-width="4" 
            filter="url(#hexShadow)"/>
   
-  <!-- Inner hexagon border - content boundary -->
   <polygon points="256,50 442,158 442,354 256,462 70,354 70,158" 
            fill="none" 
            stroke="#dc2626" 
            stroke-width="2" 
            opacity="0.6"/>
   
-  <!-- Content area - centered within inner hexagon -->
   <g transform="translate(256, 256)">
     
-    <!-- Course Code with FEMA prefix (increased font size) -->
     <text x="0" y="-100" 
           text-anchor="middle" 
           fill="#1e3a8a" 
@@ -40,7 +32,6 @@
       FEMA IS-100.C
     </text>
     
-    <!-- ICS Foundation -->
     <text x="0" y="-75" 
           text-anchor="middle" 
           fill="#dc2626" 
@@ -50,7 +41,6 @@
       ICS Foundation
     </text>
     
-    <!-- Certification -->
     <text x="0" y="-58" 
           text-anchor="middle" 
           fill="#1e3a8a" 
@@ -60,29 +50,22 @@
       CERTIFIED
     </text>
     
-    <!-- Achievement description -->
-    <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>
+    <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;">
+        Recognizes knowledge of the Incident Command System (ICS). Holders can explain the principles and basic structure of the Incident Command System and the functional and staff roles within the ICS.
+      </div>
+    </foreignObject>
     
-    <!-- Credits and Duration -->
     <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
+      0.2 CEUs | 2 Hours | Self-Paced Online
     </text>
     
-    <!-- NIMS Framework -->
     <text x="0" y="35" 
           text-anchor="middle" 
           fill="#7c3aed" 
@@ -92,7 +75,6 @@
       NIMS Training Program
     </text>
     
-    <!-- Framework Reference -->
     <text x="0" y="55" 
           text-anchor="middle" 
           fill="#6b7280" 
@@ -102,7 +84,6 @@
       FEMA Emergency Management Institute
     </text>
     
-    <!-- Validity period -->
     <g transform="translate(0, 85)">
       <rect x="-70" y="-8" width="140" height="16" 
             rx="8" ry="8" 
