Skip to content

F1LT3R/ansi-to-svg

Repository files navigation

ANSI-to-SVG

😹 convert ANSI Escaped CLI strings to SVGs

Build Status Coverage Status NPM Version XO code style

Changelog

ANSI-to-SVG provides a Markdown friendly way to include Node.js CLI output in your software documentation; like this SVG here:

hello-world.svg

Support

Support the development of ANSI-to-SVG by becoming a patreon.

Features

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.

Install

$ yarn add ansi-to-svg

Usage

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:

basic-example.svg

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>

iTerm2 Color Support

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})

iterm2colors-file.svg

Emoji Support

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'
})

emojis.svg

Powerline Font Compatability

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/

powerline-font.svg

All Styles

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:

chalk-base-styles.svg

Note: this example uses Chalk as a base to write the ANSI Escape sequences.

Light Color Scheme

const result = ansiToSVG(String(ansiText), {colors: 'base16-tomorrow-256.itermcolors'})

light-iterm2-color-scheme.svg

Padding

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
})

padding.svg

Combined Strikethrough and Underline

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
})

colored-strikethrough-underline