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:
// Module
import simpleSvgPlaceholder from '@cloudfour/simple-svg-placeholder';
// CommonJS
const simpleSvgPlaceholder = require('@cloudfour/simple-svg-placeholder');
Then call the function to generate placeholder SVGs:
const placeholder = simpleSvgPlaceholder(/* options */);
// => 'data:image/svg+xml;...'
Examples
Default
simpleSvgPlaceholder();
Dimensions
simpleSvgPlaceholder({
width: 180,
height: 135,
});
Text
simpleSvgPlaceholder({
text: 'Hello world!',
});
Colors
simpleSvgPlaceholder({
bgColor: '#0F1C3F',
textColor: '#7FDBFF',
});
Font
simpleSvgPlaceholder({
fontFamily: 'Georgia, serif',
fontWeight: 'normal',
});
Option Reference
{Number}
width Defaults to 300
, the default width of SVG elements in most browsers.
{Number}
height Defaults to 150
, the default height of SVG elements in most browsers.
{String}
text The text to display. Defaults to the image dimensions.
{String}
fontFamily The font to use for the text. For data URIs, this needs to be a system-installed font. Defaults to 'sans-serif'
.
{String}
fontWeight Defaults to 'bold'
.
{Number}
fontSize Defaults to 20% of the shortest image dimension, rounded down.
{Number}
dy Adjustment applied to the dy
attribute of the text element so it will appear vertically centered. Defaults to 35% of the fontSize
.
{String}
bgColor The background color of the image. Defaults to #ddd
.
{String}
textColor The color of the text. For transparency, use an rgba
or hsla
color value. Defaults to rgba(0,0,0,0.5)
.
{Boolean}
dataUri 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
.
{String}
charset Defaults to UTF-8
, but if your source HTML document's character set is different, you may want to update this to match.