Designed your certificate template? Once you have designed your certificate templates you are ready to configure the SVG. Please refer to our guidance on designing a certificate here: 3.5 Designing a certificate template
The next step is for you to design and configure your certificate template SVG files. Your certificates will be different SVG files for each vital event. You use {{ handlebar }} syntax to mark where in the SVG you wish the citizen data to be rendered. To get an idea of what we mean, take a look at the Farajaland example certificates and available handlebars for each event:
| Event | Certificate template SVG | Available handlebars |
|---|---|---|
Birth | Birth Certificate | |
Death | Death Certificate | |
Marriage | Marriage Certificate |
We have supplied helper handlebars for all use cases. Some need explanation, or if you feel that you do not have a handlebar for your specific needs, please discuss with us on Github or email us at team@opencrvs.org and we can work on a new handlebar for you.
As an example of a handlebar that needs explanation: {{placeOfBirth}} is used if a user selects a pre-loaded health facility. This handlebar dynamically returns the location hierarchy, e.g. "district, state" to render based on the location of the health facility. You can see that in our place of birth location in the SVG, we have if/else logic to handle whatever the user chooses to enter into the form.
It is possible to make custom form fields and when you do, custom handlebars are automatically created. Here is an example of a custom form field handlebar
Open the SVG in a text editor tool such as Visual Studio Code. Replace the dummy text you added with the required handlebar.
Example:
<text fill="#222222" xml:space="preserve" style="white-space: pre" font-family="Noto Sans-Bold" font-size="16" font-weight="bold" letter-spacing="0px"><tspan x="86.6699" y="444.268">{{eventDate}} </tspan></text>\
Watching the videos below will really help you understand how to configure the certificate. The time spent watching the video will make your life much easier!
Drop your custom font file (.ttf) in this directory: https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/fonts Then add an entry regarding your new font similar to the "NotoSans" ones here: https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificate-configuration/handler.ts#L27-L34For example, if we wanted to add the Merriweather font it would look something like this:
This would require the "Merriweather-Regular.ttf" & "Merriweather-Black.ttf" file to be available in the directory mentioned above.
When you are ready to seed your database in step 3.2.8, these certificates will be uploaded. Alternatively, a National System Admin user can upload the certificate template at any time in the functional configuration UI. You can preview the certificate to check that the some handlebar data is loading as intended.
