Simple SVG Placeholder

  

> A very simple placeholder image generator with zero dependencies. Returns a data URI (or raw SVG source) as a string for use in templates.

Getting Started

The package is available to install via npm:

``
npm i --save @cloudfour/simple-svg-placeholder
`

Once installed, you may import the function as an ES or CommonJS module:

`javascript
// Module
import simpleSvgPlaceholder from 'simple-svg-placeholder';

// CommonJS
const simpleSvgPlaceholder = require('@cloudfour/simple-svg-placeholder');
`

Then call the function to generate placeholder SVGs:

`javascript
const placeholder = simpleSvgPlaceholder(/ options /);
// => 'data:image/svg+xml;...'
`

Examples

$3

![](./examples/default.svg?sanitize=true)

`javascript
simpleSvgPlaceholder();
`

$3

![](./examples/size.svg?sanitize=true)

`javascript
simpleSvgPlaceholder({
width: 180,
height: 135,
});
`

$3

![](./examples/text.svg?sanitize=true)

`javascript
simpleSvgPlaceholder({
text: 'Hello world!',
});
`

$3

![](./examples/color.svg?sanitize=true)

`javascript
simpleSvgPlaceholder({
bgColor: '#0F1C3F',
textColor: '#7FDBFF',
});
`

$3

![](./examples/font.svg?sanitize=true)

`javascript
simpleSvgPlaceholder({
fontFamily: 'Georgia, serif',
fontWeight: 'normal',
});
`

Option Reference

$3

Defaults to 300, the default width of SVG elements in most browsers.

$3

Defaults to 150, the default height of SVG elements in most browsers.

$3

The text to display. Defaults to the image dimensions.

$3

The font to use for the text. For data URIs, this needs to be a system-installed font. Defaults to 'sans-serif'.

$3

Defaults to 'bold'.

$3

Defaults to 20% of the shortest image dimension, rounded down.

$3

Adjustment applied to the dy attribute of the text element so it will appear vertically centered. Defaults to 35% of the fontSize.

$3

The background color of the image. Defaults to #ddd.

$3

The color of the text. For transparency, use an rgba or hsla color value. Defaults to rgba(0,0,0,0.5).

$3

If true, the function will return an encoded string for use as an img element's src value. If false, the function will return the unencoded SVG source. Defaults to true.

$3

Defaults to UTF-8`, but if your source HTML document's character set is different, you may want to update this to match.