😹 convert ANSI Escaped CLI strings to SVGs
ANSI-to-SVG provides a Markdown friendly way to include Node.js CLI output in your software documentation; like this SVG here:
Support the development of ANSI-to-SVG by becoming a patreon.
ANSI-to-SVG sits on top of tha base-package ANSI-to and is part of a collection of tools used for ZDD development.
ANSI-to has the following plugins available:
- SVG - Export ANSI to Scalable Vector Graphics
- PNG, JPG - Export ANSI to raster image (JPG, PNG)
HTML(coming soon)
The SVGs output have been tested with Chrome, Firefox and Sketch.
$ yarn add ansi-to-svg
const ansiToSVG = require('ansi-to-svg')
// Returns an SVG string
ansiToSVG(ansiText, {
// Defaults to 2x for Retina compatibility
scale: 2,
// Font settings
fontFace: 'Courier',
fontSize: 14,
lineHeight: 18,
// Padding
paddingTop: 0,
paddingLeft: 0,
paddingBottom: 0,
paddingRight: 0,
// Supply an iTerm2 Color file
colors: './base16-flat-dark-f1lt3r-256.itermcolors',
// Or override the default colors
// (all defaults shown here)
colors: {
black: '#000000',
red: '#B22222',
green: '#32CD32',
yellow: '#DAA520',
blue: '#4169E1',
magenta: '#9932CC',
cyan: '#008B8B',
white: '#D3D3D3',
gray: '#A9A9A9',
redBright: '#FF4500',
greenBright: '#ADFF2F',
yellowBright: '#FFFF00',
blueBright: '#87CEEB',
magentaBright: '#FF00FF',
cyanBright: '#00FFFF',
whiteBright: '#FFFFFF',
bgBlack: '#000000',
bgRed: '#B22222',
bgGreen: '#32CD32',
bgYellow: '#DAA520',
bgBlue: '#4169E1',
bgMagenta: '#9932CC',
bgCyan: '#008B8B',
bgWhite: '#D3D3D3',
bgGray: '#A9A9A9',
bgRedBright: '#FF0000',
bgGreenBright: '#ADFF2F',
bgYellowBright: '#FFFF00',
bgBlueBright: '#87CEEB',
bgMagentaBright: '#FF00FF',
bgCyanBright: '#00FFFF',
bgWhiteBright: '#FFFFFF',
backgroundColor: '#000000',
foregroundColor: '#D3D3D3'
}
})})
## Basic Text
```js
const antoToSVG = require('ansi-to-svg')
const chalk = require('chalk')
const ansiText = chalk`Your {red $wish}\n is {bgYellow.cyan my} command.`
const result = ansiToSVG(ansiText)
Saving this result to an .SVG file and opening it in your browser would reveal:
Logging the result to console would show:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 126.02, 40.45" font-family="SauceCodePro Nerd Font, Source Code Pro, Courier" font-size="14"><g fill="#D3D3D3"><rect x="0" y="0" width="126.02" height="40"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 126.02, 40.45" font-family="SauceCodePro Nerd Font, Source Code Pro, Courier" font-size="14">
<g fill="#D3D3D3">
<rect x="0" y="0" width="126.02" height="40.45" fill="#000000" />
<text x="0" y="14.55">Your </text>
<text x="42.01" y="14.55" fill="#B22222">$wish</text>
<text x="8.4" y="33.55"> is </text>
<rect x="33.61" y="19" width="16.8" height="19" fill="#DAA520" opacity="1" />
<text x="33.61" y="33.55" fill="#008B8B">my</text>
<text x="58.81" y="33.55"> command.</text>
</g>
</svg>Using: ./fixtures/base16-flat-dark-f1lt3r-256.itermcolors
const ansiText = chalk`Your {red $wish}\n is {bgYellow.cyan my} command.`
const colorFile = 'base16-flat-dark-f1lt3r-256.itermcolors'
ansiToSVG(ansiText, {color: colorFile})
const ansiText = chalk.bgRed('🌈') +
chalk.bgYellow('🦄') +
chalk.bgGreen('🐘') +
chalk.bgCyan('🍄') +
chalk.bgBlue('🎃') +
chalk.bgMagenta('🐦') +
chalk.bgRed('🖤') +
chalk.bgYellow('😳') +
chalk.bgGreen('😒') +
chalk.bgCyan('😮') +
chalk.bgBlue('😐') +
chalk.bgMagenta('😱') +
chalk.bgRed('😕') +
chalk.bgYellow('😕') +
chalk.bgGreen('😑') +
chalk.bgCyan('😘')
ansiToSVG(ansiText, {
colors: 'base16-flat-dark-f1lt3r-256.itermcolors'
})
const ansiText = chalk` {bgGreen.white Testing background colors } butting adjacent lines. \n` +
chalk` {red ✘ }{bgBlue.black ~/repos/minkjs/ansi-to }{bgYellow.blue }{bgYellow.black svg-image-plugins ● }{yellow } ava powerline-fonts.test.js \n` +
chalk` {green 1 passed}`
ansiToSVG(ansiText, {
colors: 'base16-flat-dark-f1lt3r-256.itermcolors',
fontFamily: 'SauceCodePro Nerd Font'
})Note: you will need SauceCodePro Nerd font for the following example to render correctly. You can find Nerd Fonts here: https://nerdfonts.com/
If we dump some ANSI to a file: fixture.chalk-styles.ansi
�[1mbold �[22m �[2mdim �[22m �[3mitalic �[23m �[4munderline �[24m �[7minverse �[27m �[9mstrikethrough �[29m
�[1m�[30mblack �[39m�[22m �[1m�[31mred �[39m�[22m �[1m�[32mgreen �[39m�[22m �[1m�[33myellow �[39m�[22m �[1m�[34mblue �[39m�[22m �[1m�[35mmagenta �[39m�[22m �[1m�[36mcyan �[39m�[22m �[1m�[37mwhite �[39m�[22m
�[1m�[90mgray �[39m�[22m �[30m�[91mredBright �[30m�[39m �[30m�[92mgreenBright �[30m�[39m �[30m�[93myellowBright �[30m�[39m �[30m�[94mblueBright �[30m�[39m �[30m�[95mmagentaBright �[30m�[39m �[30m�[96mcyanBright �[30m�[39m �[30m�[97mwhiteBright �[30m�[39m
�[37m�[1m�[40mbgBlack �[49m�[22m�[39m �[30m�[1m�[41mbgRed �[49m�[22m�[39m �[30m�[1m�[42mbgGreen �[49m�[22m�[39m �[30m�[1m�[43mbgYellow �[49m�[22m�[39m �[30m�[1m�[44mbgBlue �[49m�[22m�[39m �[30m�[1m�[45mbgMagenta �[49m�[22m�[39m �[30m�[1m�[46mbgCyan �[49m�[22m�[39m �[30m�[1m�[47mbgWhite �[49m�[22m�[39m
�[37m�[3m�[100mbgBlackBright �[49m�[23m�[39m �[30m�[3m�[101mbgRedBright �[49m�[23m�[39m �[30m�[3m�[102mbgGreenBright �[49m�[23m�[39m �[30m�[3m�[103mbgYellowBright �[49m�[23m�[39m �[30m�[3m�[104mbgBlueBright �[49m�[23m�[39m �[30m�[3m�[105mbgMagentaBright �[49m�[23m�[39m �[30m�[3m�[106mbgCyanBright �[49m�[23m�[39m �[30m�[3m�[107mbgWhiteBright �[49m�[23m�[39m
We can render it with ansiToSVG:
const ansiText = fs.readFileSync('all-supported-styles.ansi')
ansiToSVG(String(ansiText), {colors: 'base16-flat-dark-f1lt3r-256.itermcolors'})Resulting in the following output:
Note: this example uses Chalk as a base to write the ANSI Escape sequences.
const result = ansiToSVG(String(ansiText), {colors: 'base16-tomorrow-256.itermcolors'})
const ansiText = chalk`{red.bold padding} {green.italic woo!}`
const colorFile = './fixtures/base16-flat-dark-f1lt3r-256.itermcolors'
const result = ansiToSVG(String(ansiText), {
colors: colorFile,
paddingTop: 14,
paddingLeft: 14,
paddingRight: 14,
paddingBottom: 14
})
const ansiText = chalk`{bgCyan.yellow.strikethrough.underline woo!}`
const colorFile = './fixtures/base16-flat-dark-f1lt3r-256.itermcolors'
const result = ansiToSVG(String(ansiText), {
colors: colorFile,
paddingTop: 1,
paddingLeft: 1,
paddingBottom: -2.5,
paddingRight: 1
})