Hey everyone, Lately, I encountered an problem and the solution was to create the badge of my own. Since I was using node.js and I searched for it. Finally, swig was the answer to me. So here is the source of code that will help you to create badges of your own without any hassles.
![node js](https://i0.wp.com/chandanbhagat.com.np/wp-content/uploads/2021/05/1200px-Node.js_logo.svg_.png?resize=640%2C391)
![node js](https://i0.wp.com/chandanbhagat.com.np/wp-content/uploads/2021/05/1200px-Node.js_logo.svg_.png?resize=640%2C391)
![node js](https://i0.wp.com/chandanbhagat.com.np/wp-content/uploads/2021/05/1200px-Node.js_logo.svg_.png?resize=640%2C391)
So, first of all, you need to create a badge svg template. Below is the content of the file that you might want to save it in a file called “badge.svg”
{% set leftWidth = left.length * 10 %}
{% set rightWidth = right.length * 13.5 %}
{% set totalWidth = leftWidth + rightWidth - 10 %}
<svg xmlns="http://www.w3.org/2000/svg" width="{{ totalWidth }}" height="18">
<linearGradient id="smooth" x2="0" y2="100%">
<stop offset="0" stop-color="#fff" stop-opacity=".7"/>
<stop offset=".1" stop-color="#aaa" stop-opacity=".1"/>
<stop offset=".9" stop-color="#000" stop-opacity=".3"/>
<stop offset="1" stop-color="#000" stop-opacity=".5"/>
</linearGradient>
<mask id="round">
<rect width="{{ totalWidth }}" height="18" rx="4" fill="#fff"/>
</mask>
<g mask="url(#round)">
<rect width="{{ leftWidth }}" height="18" fill="#555"/>
<rect x="{{ leftWidth }}" width="{{ rightWidth }}" height="18" fill="{{ color }}"/>
<rect width="{{ totalWidth }}" height="18" fill="url(#smooth)"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">
<text x="{{ leftWidth /2+1 }}" y="14" fill="#010101" fill-opacity=".3">{{ left }}</text>
<text x="{{ leftWidth /2+1 }}" y="13">{{ left }}</text>
<text x="{{ leftWidth + rightWidth /2.5-1 }}" y="14" fill="#010101" fill-opacity=".3">{{ right }}</text>
<text x="{{ leftWidth + rightWidth /2.5-1 }}" y="13">{{ right }}</text>
</g>
</svg>
And secondly, create a js file with the dependency of “swig“. So I installed it in my node application using
npm install swig
And finally, created a js file and added this and ran this js file to create a badge file.
var swig = require("swig");
var badgeValue = {
left: "Left",
right: "Right";
color: "Red";
}
var badge = swig.renderFile("./badge.svg", badgeValue);
const fs = require("fs");
const file = fs.createWriteStream("file-badge.svg");
file.write(badge);
And there you go, you have a new file created.