svg-inline-images

A Scalar Vector Graphics (SVG) document may contain images (via the <image> tag), which can point at external image files. In order to make a more portable .svg file, this tool converts them to data URLs so that the images are embedded inline.

To do this, svg-inline-images requires the Document Object Model (DOM). For headless (nodejs) use, this can be provided by jsdom. The DOM is unaltered, and the content of a new .svg file is returned as a string.

svg-inline-images has a single production dependency upon the mime-types package.

Installation

npm install svg-inline-images

Documentation

Function: svgElementInlineImages()

svgElementInlineImages(svgElement, fetchLite): Promise<string>

Defined in: svgInlineImages.ts:16

Inlines the images of an svg element

Parameters

svgElement

Element

an SVGElement

fetchLite

FetchLite

a fetch or fs.promises.readFile function, used to retrieve the image

Returns

Promise<string>

a promise which resolves to a string containing the svg content with images inlined.

Example

const svgElement = document.querySelector('svg');
const svgText = await svgElementInlineImages(svgElement, fetch);

Function: svgTextInlineImages()

svgTextInlineImages(svgText, fetchLite, document): Promise<string>

Defined in: svgInlineImages.ts:57

Inlines the images of an svg string

Parameters

svgText

string

the text of a .svg file, or the outerHTML of an svg element

fetchLite

FetchLite

a fetch or fs.promises.readFile function, used to retrieve the image

document

Document

Returns

Promise<string>

a promise which resolves to a string containing the svg content with images inlined.

Example

const svgText = await svgTextInlineImages('<svg></svg>', fetch, document);

const svgText = await svgTextInlineImages(
    '<svg></svg>',
    fs.promises.readFile,
    myJsDomDocument
);

Function: svgFileInlineImages()

svgFileInlineImages(path, fetchLite, document): Promise<string>

Defined in: svgInlineImages.ts:93

Inlines the images of an svg file

Parameters

path

string

the url or path to the svg file

fetchLite

FetchLite

a fetch or fs.promises.readFile function, used to retrieve the svg and image files

document

Document

Returns

Promise<string>

a promise which resolves to a string containing the svg content with images inlined.

Example

const svgText = await svgFileInlineImages(
    'http://example.com/myFile.svg',
    fetch,
    document
);

const svgText = await svgFileInlineImages(
    'myFile.svg',
    fs.promises.readFile,
    myJsDomDocument
);

Type Alias: FetchLite()

FetchLite = (path) => Promise<FetchLiteResponse>

Defined in: fetchLite.ts:18

A paired down fetch type compatible with both fetch functions and fs.promises.readFile

In browser you would typically literally pass fetch as a parameter, in order to use your browser's fetch function. However, because usually fetch does not support file:// urls, it may be desirable when working headlessly in nodejs to pass fs.promises.readFile instead. Alternatively, in a nodejs application, it might make sense to use node-fetch or nodejs's native fetch implementation. Finally, you could of course provide another/your own implementation of FetchLite.

By requiring fetchLite as a parameter, and providing it, we can ensure the correct dependency is injected for whatever JavaScript environment we are in.

Parameters

path

string

The url or path of the file we are fetching

Returns

Promise<FetchLiteResponse>

A promise from which the fetched file can ultimately be obtained as an ArrayBufferLike object

Type Alias: FetchLiteResponse

FetchLiteResponse = Buffer<ArrayBufferLike> | { arrayBuffer: () => Promise<ArrayBufferLike>; }

Defined in: fetchLite.ts:20