Security News
Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
By Sarah Gooding - Jan 28, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
The OpenBadge Project
Why
SVG badges are pretty awesome, but the current solutions (eg: shield.io, fury.io) are somewhat heavy.
Sometimes you need to run custom functionality, sometimes the source data to generate lives behind firewalls, and sometimes hackers just want to hack.
The Open Badge project gives you a module that produces custom SVG badges, giving you full control over fonts, sizes, padding, colors, etc. It's pretty lightweight, so you can include it as part of your projects. Pure SVG solution. Does not require canvas libraries to be installed on your system.
Runnable Example usage in an express app:
var app = require('express')(),
openBadge = require('./');
/**
* A simple badge using config defaults.
* We only specify the text on the left and the text on the right
*/
app.get('/simple.svg', function (req, res) {
openBadge({text: ['Accident Free', '20 Days']}, function (err, badgeSvg) {
/* TODO: Check for err */
res.set('Content-Type', 'image/svg+xml');
res.send(badgeSvg);
});
});
/**
* Changing fonts:
* Example: Comic Sans. Just because you can, doesn't mean you should...
*/
app.get('/font.svg', function (req, res) {
openBadge({text: ['Favorite Font', 'Comic Sans'], font: {fontFace: 'fonts/comic-sans/comic-sans.ttf'}}, function (err, badgeSvg) {
/* TODO: Check for err */
res.set('Content-Type', 'image/svg+xml');
res.send(badgeSvg);
});
});
/**
* Changing Colors:
* Individual control over both halves, the font and its dropshadow
*/
app.get('/colors.svg', function (req, res) {
openBadge({text: ['Pretty', 'Colors!'], color:{left:"#ccc",right:"#cc99ff",font:"#333",shadow:"#fff"}}, function (err, badgeSvg) {
/* TODO: Check for err */
res.set('Content-Type', 'image/svg+xml');
res.send(badgeSvg);
});
});
app.get('/defaults.svg', function (req, res) {
// Note: This is an exaggerated configuration showing all the defaults
// In reality you *DON'T* needs to set all of these, and can get away
// with just specifying the `text` parameter.
var badgeConfig = {
badge: 'baseBadge', // baseBadge is the only one we have for now.
text: ['Hello', 'World'], // Array with the copy on either side of the badge
color: {
left: '#555', // Background color on the left
right: '#4c1', // Background color on the right
font: '#fff', // Badge font color
shadow: '#010101' // Text shadow color. (Defaults to 0.3 opacity)
},
font: {
fontFace: 'fonts/Open_Sans/OpenSans-Bold.ttf', // Path to the font to use.
fontSize: 11 // Font size in pixels
},
paddingX: 6, // Horizontal padding (in pixels) around text
paddingY: 6 // Vertical padding (in pixels) around text
};
openBadge(badgeConfig, function (err, badgeSvg) {
/* TODO: Check for err */
res.set('Content-Type', 'image/svg+xml');
res.send(badgeSvg);
});
});
app.get('/', function (req, res) {
res.send(
'<html>' +
'<head>' +
'<style>' +
' img {vertical-align: top} ' +
' * {line-height: 25px}' +
'</style>' +
'</head>' +
'<body style="font-family: monospace">' +
'Default Confg: <img src="defaults.svg"/><br>' +
'A Basic Badge: <img src="simple.svg"/><br>' +
'Changed Fonts: <img src="font.svg"/><br>' +
'Changed Color: <img src="colors.svg"/><br>' +
'</body>' +
'</html>'
)
});
app.listen(1337, function (err) {
console.log('Listening on http://localhost:1337/');
});
FAQs
Create SVG badges programatically
We found that openbadge demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 29 Mar 2016
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
By Sarah Gooding - Jan 24, 2025
Security News
cURL Project and Go Security Teams Reject CVSS as Broken
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
By Sarah Gooding - Jan 24, 2025