ansi-to-svg

ANSI-to-SVG

😹 convert ANSI Escaped CLI strings to SVGs

Changelog

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

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:

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

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

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/

All Styles

If we dump some ANSI to a file: fixture.chalk-styles.ansi

bold             dim              italic           underline        inverse          strikethrough    
black            red              green            yellow           blue             magenta          cyan             white            
gray             redBright        greenBright      yellowBright     blueBright       magentaBright    cyanBright       whiteBright      
bgBlack          bgRed            bgGreen          bgYellow         bgBlue           bgMagenta        bgCyan           bgWhite          
bgBlackBright    bgRedBright      bgGreenBright    bgYellowBright   bgBlueBright     bgMagentaBright  bgCyanBright     bgWhiteBright    

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.

Light Color Scheme

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

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

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