Open Design

Class LayerFacade

Identification Accessors

fileKey
get fileKey(): string

The key which can be used to name files in the file system. It SHOULD be unique within an artboard.

IDs can include characters invalid for use in file names (such as :).

Example:

// Safe:
layer.renderToFile(`./layers/${layer.fileKey}.png`)

// Unsafe:
layer.renderToFile(`./layers/${layer.id}.png`)
returns string
id
get id(): string

The ID of the layer.

Beware that this value may not be safely usable for naming files in the file system and the fileKey value should be instead.

returns string

Data Accessors

name
get name(): null | string

The name of the layer.

returns null | string
octopus
get octopus(): LayerOctopusData

Octopus data of the layer.

This data can be used for accessing details about the layer.

See the Octopus Format documentation page for more info.

Example:

const blendMode = layer.octopus['blendMode']
const opacity = layer.octopus['opacity']
const visible = layer.octopus['visible']
const overrides = layer.octopus['overrides']
returns LayerOctopusData
type
get type(): "shapeLayer" | "layer" | "document" | "textLayer" | "adjustmentLayer" | "backgroundLayer" | "groupLayer"

The type of the layer.

returns "shapeLayer" | "layer" | "document" | "textLayer" | "adjustmentLayer" | "backgroundLayer" | "groupLayer"

Reference Accessors

artboardId
get artboardId(): null | string

The ID of the artboard in which the layer is placed.

returns null | string

Layer Context Accessors

depth
get depth(): number

The nesting level at which the layer is contained within the layer tree of the artboard.

Root (first-level) layers have depth of 1.

Example:

const rootLayer = artboard.getRootLayers()[0]
console.log(rootLayer.depth) // 1

const nestedLayer = rootLayer.getNestedLayers()[0]
console.log(nestedLayer.depth) // 2

const deeperNestedLayer = nestedLayer.getNestedLayers()[0]
console.log(deeperNestedLayer.depth) // 3
returns number

Data Methods

getAttributes
getAttributes(): Promise<LayerAttributes>

Returns the attributes of the layer.

Example:

const { blendingMode, opacity, visible } = await layer.getAttributes()
returns Promise<LayerAttributes>
getBounds
getBounds(options?: { cancelToken?: null | CancelToken }): Promise<LayerBounds>

Returns various bounds of the layer.

The rendering engine and the local cache have to be configured when using this method.

Example:

const layerBounds = await layer.getBounds()
const boundsWithEffects = layerBounds.fullBounds

Parameters:

options: default: {}

Options

OptionalcancelToken?: null | CancelToken

A cancellation token which aborts the asynchronous operation. When the token is cancelled, the promise is rejected and side effects are not reverted (e.g. the artboards is not uncached when newly cached). A cancellation token can be created via createCancelToken.

returns Promise<LayerBounds>

Various layer bounds.

getEffects
getEffects(): IEffects

Returns a layer effect aggregation object.

Any layer can have various effects (such as shadows, borders or fills) applied to it.

Note that there can be bitmap assets in case of pattern fill effects being applied.

Example:

const effects = layer.getEffects()
const shadows = effects.octopus['shadows']
returns IEffects
getText
getText(): null | IText

Returns a text object of the layer if there is one.

Only text layers (type=textLayer) return text objects here.

Example:

const text = layer.getText()
const textValue = text ? text.getTextContent() : null
returns null | IText
getTextContent
getTextContent(): null | string

Returns the text value of the layer if there is one.

Only text layers (type=textLayer) return text objects here. This is a shortcut for .getText()?.getTextContent()

Example:

const textValue = layer.getTextContent()
returns null | string

Reference Methods

getArtboard
getArtboard(): null | ArtboardFacade

Returns the artboard object associated with the layer object.

Example:

const artboard = layer.getArtboard()
returns null | ArtboardFacade
getComponentArtboard
getComponentArtboard(): null | ArtboardFacade

Returns the artboard which represents the main/master component of which this layer is and instance.

Nothing is returned from layers which do not represent a component (instance), see isComponentInstance.

Example:

const componentArtboard = layer.getComponentArtboard()
returns null | ArtboardFacade

Layer Context Methods

hasComponentOverrides
hasComponentOverrides(): boolean

Returns whether there are any overrides on this component (instance) which override main/master component values.

The specific overrides can be obtained from the octopus data (octopus.overrides).

Layers which do not represent a component (instance), see isComponentInstance, return false.

Example:

if (layer.hasComponentOverrides()) {
  const overrides = layer.octopus['overrides']
}
returns boolean
isComponentInstance
isComponentInstance(): boolean

Returns whether the layer is a component (instance of a main/master component).

Example:

if (layer.isComponentInstance()) {
  console.log(layer.getComponentArtboard()) // Artboard
}
returns boolean
isInlineArtboard
isInlineArtboard(): boolean

Returns whether the layer represents an "inline artboard" (which is a feature used in Photoshop design files only).

Example:

const isInline = layer.isInlineArtboard()
returns boolean
isMasked
isMasked(): boolean

Returns whether the layer is masked/clipped by another layer.

Example:

if (layer.isMasked()) {
  layer.getMaskLayerId() // <MASK_ID>
  layer.getMaskLayer() // Layer { id: '<MASK_ID>' }
} else {
  layer.getMaskLayerId() // null
  layer.getMaskLayer() // null
}
returns boolean
isRootLayer
isRootLayer(): boolean

Returns whether the layer is located at the first level within the layer tree of the artboard (i.e. it does not have a parent layer).

Example:

const root = layer.isRootLayer()
returns boolean

Layer Lookup Methods

findNestedLayer
findNestedLayer(selector: LayerSelector | (layer: LayerFacade) => boolean, options?: { depth?: number }): null | LayerFacade

Returns the first layer object nested within the layer (i.e. the layer is either the immediate parent layer of other layers or one of their parent layers), optionally down to a specific layer nesting level, which matches the specific criteria.

Note that the subtree is walked in document order, not level by level, which means that nested layers of a layer are searched before searching sibling layers of the layer.

Example:

// Layer tree:
// a {
//   b1 { c1, c2 },
//   b2 { c3 }
// }

const layerA = artboard.getLayerById('a')

// All nesting levels
console.log(layerA.findNestedLayer({ id: 'c1' }))
// Layer { id: 'c1' },

// Immediate nesting level
console.log(layerA.findNestedLayer({ id: 'c1', depth: 0 }))
// null

// Function selectors
console.log(layerA.findNestedLayer((layer) => {
  return layer.id === 'c1'
}))
// Layer { id: 'c1' },

Parameters:

selector: LayerSelector | (layer: LayerFacade) => boolean

A layer selector. All specified fields must be matched by the result.

options: default: {}

Options

Optionaldepth?: number

The maximum nesting level within the layer to search. By default, all levels are searched. 0 also means "no limit"; 1 means only layers nested directly in the layer should be searched.

returns null | LayerFacade

A matched layer object.

findNestedLayers
findNestedLayers(selector: LayerSelector | (layer: LayerFacade) => boolean, options?: { depth?: number }): LayerCollectionFacade

Returns a collection of layer objects nested within the layer (i.e. the layer is either the immediate parent layer of other layers or one of their parent layers), optionally down to a specific layer nesting level, which match the specific criteria.

Note that the results are sorted in document order, not level by level, which means that matching nested layers of a layer are included before matching sibling layers of the layer.

Example:

// Layer tree:
// a {
//   b1 { c1, c2 },
//   b2 { c3 }
// }

const layerA = artboard.getLayerById('a')

// All nesting levels
console.log(layerA.findNestedLayers({ id: ['b1', 'c1', 'c3'] }))
// DesignLayerCollection [
//   Layer { id: 'b1' },
//   Layer { id: 'c1' },
//   Layer { id: 'c3' },
// ]

// Immediate nesting level
console.log(layerA.findNestedLayers({ id: ['b1', 'c1', 'c3'], depth: 0 }))
// DesignLayerCollection [ Layer { id: 'b1' } ]

// Function selectors
console.log(layerA.findNestedLayers((layer) => {
  return layer.id === 'b1' || layer.id === 'c1'
}))
// DesignLayerCollection [ Layer { id: 'b1' }, Layer { id: 'c1' } ]

Parameters:

selector: LayerSelector | (layer: LayerFacade) => boolean

A layer selector. All specified fields must be matched by the result.

options: default: {}

Options

Optionaldepth?: number

The maximum nesting level within the layer to search. By default, all levels are searched. 0 also means "no limit"; 1 means only layers nested directly in the layer should be searched.

A collection of matched layers.

findParentLayer
findParentLayer(selector: LayerSelector): null | LayerFacade

Returns the deepest parent layer objects which contains the layer and matches the provided criteria.

Example:

const rootLayer = artboard.getRootLayers()[0]
// Layer { id: 'x', type: 'groupLayer', name: 'A' }

const nestedLayer1 = rootLayer.getNestedLayers()[0]
// Layer { id: 'y', type: 'groupLayer', name: 'B' }

const nestedLayer2 = nestedLayer1.getNestedLayers()[0]
// Layer { id: 'z', type: 'groupLayer', name: 'A' }

console.log(nestedLayer2.findParentLayer({ name: 'A' })) // Layer { id: 'z' }

Parameters:

selector: LayerSelector

A parent layer selector.

returns null | LayerFacade

A matched parent layer object.

findParentLayers
findParentLayers(selector: LayerSelector): LayerCollectionFacade

Returns all parent layer objects which contain the layer and match the provided criteria sorted from the immediate parent layer to the first-level (root) layer.

Example:

const rootLayer = artboard.getRootLayers()[0]
// Layer { id: 'x', type: 'groupLayer', name: 'A' }

const nestedLayer1 = rootLayer.getNestedLayers()[0]
// Layer { id: 'y', type: 'groupLayer', name: 'B' }

const nestedLayer2 = nestedLayer1.getNestedLayers()[0]
// Layer { id: 'z', type: 'groupLayer', name: 'A' }

console.log(nestedLayer2.findParentLayers({ name: 'A' }))
// DesignLayerCollection [ Layer { id: 'z' }, Layer { id: 'x' } ]

Parameters:

selector: LayerSelector

A parent layer selector.

A collection of matched parent layer objects.

getMaskLayer
getMaskLayer(): null | LayerFacade

Returns the layer which masks/clips the layer if there is one.

Example:

layer.getMaskLayer() // Layer { id: '<MASK_ID>' }
layer.getMaskLayerId() // <MASK_ID>
returns null | LayerFacade
getMaskLayerId
getMaskLayerId(): null | string

Returns the ID of the layer which masks/clips the layer if there is one.

Example:

const maskLayerId = layer.getMaskLayerId()
returns null | string
getNestedLayers
getNestedLayers(options?: { depth?: number }): LayerCollectionFacade

Returns a collection of layer objects nested within the layer (i.e. the layer is either the immediate parent layer of other layers or one of their parent layers), optionally down to a specific layer nesting level.

This usually applies to group layers and expanded/inlined component layers. Empty group layers return an empty nested layer collection.

Note that, in case of depth other than 1, the subtree is flattened in document order, not level by level, which means that nested layers of a layer are included before sibling layers of the layer.

Example:

// Layer tree:
// a {
//   b1 { c1, c2 },
//   b2 { c3 }
// }

const layerA = artboard.getLayerById('a')

// Immediate nesting level
console.log(layerA.getNestedLayers())
// DesignLayerCollection [ Layer { id: 'b1' }, Layer { id: 'b2' } ]

// All nesting levels
console.log(layerA.getNestedLayers({ depth: 0 }))
// DesignLayerCollection [
//   Layer { id: 'b1' },
//   Layer { id: 'c1' },
//   Layer { id: 'c2' },
//   Layer { id: 'b2' },
//   Layer { id: 'c3' },
// ]

Parameters:

options: default: {}

Options

Optionaldepth?: number

The maximum nesting level within the layer to include in the collection. By default, only the immediate nesting level is included. Infinity can be specified to get all nesting levels.

A collection of nested layers.

getParentLayer
getParentLayer(): null | LayerFacade

Returns the immediate parent layer object which contains the layer.

Example:

const rootLayer = artboard.getRootLayers()[0]
rootLayer.getParentLayer() // null

const nestedLayer = rootLayer.getNestedLayers()[0]
nestedLayer.getParentLayer() // rootLayer

const deeperNestedLayer = nestedLayer.getNestedLayers()[0]
deeperNestedLayer.getParentLayer() // nestedLayer
returns null | LayerFacade
getParentLayerIds
getParentLayerIds(): Array<string>

Returns the IDs of all parent layers which contain the layer sorted from the immediate parent layer to the first-level (root) layer.

Example:

const rootLayer = artboard.getRootLayers()[0]
rootLayer.getParentLayerIds() // []

const nestedLayer = rootLayer.getNestedLayers()[0]
nestedLayer.getParentLayerIds() // [rootLayer.id]

const deeperNestedLayer = nestedLayer.getNestedLayers()[0]
deeperNestedLayer.getParentLayerIds() // [nestedLayer.id, rootLayer.id]
returns Array<string>
getParentLayers
getParentLayers(): LayerCollectionFacade

Returns all parent layer objects which contain the layer sorted from the immediate parent layer to the first-level (root) layer.

Example:

const rootLayer = artboard.getRootLayers()[0]
rootLayer.getParentLayers() // DesignLayerCollection []

const nestedLayer = rootLayer.getNestedLayers()[0]
nestedLayer.getParentLayers() // DesignLayerCollection [rootLayer]

const deeperNestedLayer = nestedLayer.getNestedLayers()[0]
deeperNestedLayer.getParentLayers() // DesignLayerCollection [nestedLayer, rootLayer]
hasNestedLayers
hasNestedLayers(): boolean

Returns whether there are any layers nested within the layer (i.e. the layer is the parent layer of other layers).

This usually applies to group layers and expanded/inlined component layers. Empty group layers return false.

Example:

if (layer.hasNestedLayers()) {
  console.log(layer.getNestedLayers()) // DesignLayerCollection [ ...(layers)... ]
} else {
  console.log(layer.getNestedLayers()) // DesignLayerCollection []
}
returns boolean
matches
matches(selector: DesignLayerSelector): boolean

Returns whether the layer matches the provided selector.

Example:

console.log(layer.name) // A
layer.matches({ name: 'A' }) // true

console.log(layer.getText().getTextContent()) // This is text.
layer.matches({ text: 'This is text.' }) // true

Parameters:

The selector against which to test the layer.

returns boolean

Whether the layer matches.

Asset Methods

getBitmap
getBitmap(): null | IBitmap

Returns the bitmap asset of the layer if there is one.

Example:

const bitmap = layer.getBitmap()
const bitmapAssetName = bitmap?.getBitmapAssetName()
returns null | IBitmap
getBitmapAssets
getBitmapAssets(options?: { depth?: number; includePrerendered?: boolean }): Array<BitmapAssetDescriptor & { layerIds: Array<string> }>

Returns a list of bitmap assets used by the layer and layers nested within the layer (optionally down to a specific nesting level).

Note that this method aggregates results of the more granular bitmap asset-related methods of getBitmap}.

Example:

// Bitmap assets from the layer and all its nested layers
const bitmapAssetDescs = await layer.getBitmapAssets()

Parameters:

options: default: {}

Options

Optionaldepth?: number

The maximum nesting level within the layer to search for bitmap asset usage. By default, all levels are searched. Specifying the depth of 0 leads to nested layer bitmap assets being omitted altogether.

OptionalincludePrerendered?: boolean

Whether to also include "pre-rendered" bitmap assets. These assets can be produced by the rendering engine (if configured; future functionality) but are available as assets for either performance reasons or due to the some required data (such as font files) potentially not being available. By default, pre-rendered assets are included.

returns Array<BitmapAssetDescriptor & { layerIds: Array<string> }>

A list of bitmap assets.

getBitmapMask
getBitmapMask(): null | IBitmapMask

Returns the bitmap mask of the layer if there is one.

Example:

const bitmapMask = layer.getBitmapMask()
const bitmapMaskAssetName = bitmapMask?.getBitmap().getBitmapAssetName()
returns null | IBitmapMask
getFonts
getFonts(options?: { depth?: number }): Array<FontDescriptor & { layerIds: Array<string> }>

Returns a list of fonts used by the layer and layers nested within the layer (optionally down to a specific nesting level).

Example:

// Fonts from the layer and all its nested layers
const fontDescs = await layer.getFonts()

Parameters:

options: default: {}

Options

Optionaldepth?: number

The maximum nesting level within page and artboard layers to search for font usage. By default, all levels are searched. Specifying the depth of 0 leads to fonts used by nested layers being omitted altogether.

returns Array<FontDescriptor & { layerIds: Array<string> }>

A list of fonts.

isBitmapPrerendered
isBitmapPrerendered(): boolean

Returns whether the bitmap asset is "pre-rendered".

Only non-bitmap layers (type!=layer) have prerendered assets. Bitmap assets of bitmap layers are not considered "pre-rendered".

Example:

const prerendered = layer.isBitmapPrerendered()
const originalBitmap = prerendered ? null : layer.getBitmap()
returns boolean

Rendering Methods

renderToFile
renderToFile(filePath: string, options?: { blendingMode?: "BLEND_DIVIDE" | "BLEND_SUBTRACTION" | "COLOR" | "COLOR_BURN" | "COLOR_DODGE" | "DARKEN" | "DARKER_COLOR" | "DIFFERENCE" | "DISSOLVE" | "EXCLUSION" | "HARD_LIGHT" | "HARD_MIX" | "HUE" | "LIGHTEN" | "LIGHTER_COLOR" | "LIGHTEN_BURN" | "LIGHTEN_DODGE" | "LIGHTEN_LIGHT" | "LUMINOSITY" | "MULTIPLY" | "OVERLAY" | "PASS_THROUGH" | "PIN_LIGHT" | "SATURATION" | "SCREEN" | "SOFT_LIGHT" | "VIVID_LIGHT" | "NORMAL"; bounds?: Bounds; cancelToken?: null | CancelToken; clip?: boolean; includeComponentBackground?: boolean; includeEffects?: boolean; opacity?: number; scale?: number }): Promise<void>

Renders the layer as an PNG image file.

In case the layer is a group layer, all visible nested layers are also included.

Uncached items (bitmap assets of rendered layers) are downloaded and cached.

The rendering engine and the local cache have to be configured when using this method.

Example:

With default options (1x, whole layer area)

await layer.renderToFile(
  './rendered/layer.png'
)

With custom scale and crop and using the component background color

await layer.renderToFile(
  './rendered/layer.png',
  {
    scale: 2,
    // The result is going to have the dimensions of 400x200 due to the 2x scale.
    bounds: { left: 100, top: 0, width: 100, height: 50 },
    includeComponentBackground: true,
  }
)

Parameters:

filePath: string

The target location of the produced PNG image file.

options: default: {}

Render options

OptionalblendingMode?: "BLEND_DIVIDE" | "BLEND_SUBTRACTION" | "COLOR" | "COLOR_BURN" | "COLOR_DODGE" | "DARKEN" | "DARKER_COLOR" | "DIFFERENCE" | "DISSOLVE" | "EXCLUSION" | "HARD_LIGHT" | "HARD_MIX" | "HUE" | "LIGHTEN" | "LIGHTER_COLOR" | "LIGHTEN_BURN" | "LIGHTEN_DODGE" | "LIGHTEN_LIGHT" | "LUMINOSITY" | "MULTIPLY" | "OVERLAY" | "PASS_THROUGH" | "PIN_LIGHT" | "SATURATION" | "SCREEN" | "SOFT_LIGHT" | "VIVID_LIGHT" | "NORMAL"

The blending mode to use for rendering the layer instead of its default blending mode.

Optionalbounds?: Bounds

The area to include. This can be used to either crop or expand (add empty space to) the default layer area.

OptionalcancelToken?: null | CancelToken

A cancellation token which aborts the asynchronous operation. When the token is cancelled, the promise is rejected and side effects are not reverted (e.g. the created image file is not deleted when cancelled during actual rendering). A cancellation token can be created via createCancelToken.

Optionalclip?: boolean

Whether to apply clipping by a mask layer if any such mask is set for the layer (see isMasked). Clipping is disabled by default. Setting this flag for layers which do not have a mask layer set has no effect on the results.

OptionalincludeComponentBackground?: boolean

Whether to render the component background from the main/master component. By default, the configuration from the main/master component is used. Note that this configuration has no effect when the artboard background is not included via explicit includeComponentBackground=true nor the main/master component configuration as there is nothing with which to blend the layer.

OptionalincludeEffects?: boolean

Whether to apply layer effects of the layer. Rendering of effects of nested layers is not affected. By defaults, effects of the layer are applied.

Optionalopacity?: number

The opacity to use for the layer instead of its default opacity.

Optionalscale?: number

The scale (zoom) factor to use for rendering instead of the default 1x factor.

returns Promise<void>

SVG export Methods

exportToSvgCode
exportToSvgCode(options?: { blendingMode?: "BLEND_DIVIDE" | "BLEND_SUBTRACTION" | "COLOR" | "COLOR_BURN" | "COLOR_DODGE" | "DARKEN" | "DARKER_COLOR" | "DIFFERENCE" | "DISSOLVE" | "EXCLUSION" | "HARD_LIGHT" | "HARD_MIX" | "HUE" | "LIGHTEN" | "LIGHTER_COLOR" | "LIGHTEN_BURN" | "LIGHTEN_DODGE" | "LIGHTEN_LIGHT" | "LUMINOSITY" | "MULTIPLY" | "OVERLAY" | "PASS_THROUGH" | "PIN_LIGHT" | "SATURATION" | "SCREEN" | "SOFT_LIGHT" | "VIVID_LIGHT" | "NORMAL"; cancelToken?: null | CancelToken; clip?: boolean; includeEffects?: boolean; opacity?: number; scale?: number }): Promise<string>

Returns an SVG document string of the layer.

In case the layer is a group layer, all visible nested layers are also included.

Bitmap assets are serialized as base64 data URIs.

Uncached items (bitmap assets of rendered layers) are downloaded and cached.

The SVG exporter has to be configured when using this methods. The local cache has to also be configured when working with layers with bitmap assets.

Example:

With default options (1x)

const svg = await layer.exportToSvgCode()

With custom scale and opacity

const svg = await layer.exportToSvgCode({
  opacity: 0.6,
  scale: 2,
})

Parameters:

options: default: {}

Export options

OptionalblendingMode?: "BLEND_DIVIDE" | "BLEND_SUBTRACTION" | "COLOR" | "COLOR_BURN" | "COLOR_DODGE" | "DARKEN" | "DARKER_COLOR" | "DIFFERENCE" | "DISSOLVE" | "EXCLUSION" | "HARD_LIGHT" | "HARD_MIX" | "HUE" | "LIGHTEN" | "LIGHTER_COLOR" | "LIGHTEN_BURN" | "LIGHTEN_DODGE" | "LIGHTEN_LIGHT" | "LUMINOSITY" | "MULTIPLY" | "OVERLAY" | "PASS_THROUGH" | "PIN_LIGHT" | "SATURATION" | "SCREEN" | "SOFT_LIGHT" | "VIVID_LIGHT" | "NORMAL"

The blending mode to use for rendering the layer instead of its default blending mode.

OptionalcancelToken?: null | CancelToken

A cancellation token which aborts the asynchronous operation. When the token is cancelled, the promise is rejected and side effects are not reverted (e.g. the created image file is not deleted when cancelled during actual rendering). A cancellation token can be created via createCancelToken.

Optionalclip?: boolean

Whether to apply clipping by a mask layer if any such mask is set for the layer (see isMasked). Clipping is disabled by default. Setting this flag for layers which do not have a mask layer set has no effect on the results.

OptionalincludeEffects?: boolean

Whether to apply layer effects of the layer. Rendering of effects of nested layers is not affected. By defaults, effects of the layer are applied.

Optionalopacity?: number

The opacity to use for the layer instead of its default opacity.

Optionalscale?: number

The scale (zoom) factor to use for rendering instead of the default 1x factor.

returns Promise<string>

An SVG document string.

exportToSvgFile
exportToSvgFile(filePath: string, options?: { blendingMode?: "BLEND_DIVIDE" | "BLEND_SUBTRACTION" | "COLOR" | "COLOR_BURN" | "COLOR_DODGE" | "DARKEN" | "DARKER_COLOR" | "DIFFERENCE" | "DISSOLVE" | "EXCLUSION" | "HARD_LIGHT" | "HARD_MIX" | "HUE" | "LIGHTEN" | "LIGHTER_COLOR" | "LIGHTEN_BURN" | "LIGHTEN_DODGE" | "LIGHTEN_LIGHT" | "LUMINOSITY" | "MULTIPLY" | "OVERLAY" | "PASS_THROUGH" | "PIN_LIGHT" | "SATURATION" | "SCREEN" | "SOFT_LIGHT" | "VIVID_LIGHT" | "NORMAL"; cancelToken?: null | CancelToken; clip?: boolean; includeEffects?: boolean; opacity?: number; scale?: number }): Promise<void>

Export the layer as an SVG file.

In case the layer is a group layer, all visible nested layers are also included.

Bitmap assets are serialized as base64 data URIs.

Uncached items (bitmap assets of rendered layers) are downloaded and cached.

The SVG exporter has to be configured when using this methods. The local cache has to also be configured when working with layers with bitmap assets.

Example:

With default options (1x)

await layer.exportToSvgFile('./layer.svg')

With custom scale and opacity

await layer.exportToSvgFile('./layer.svg', {
  opacity: 0.6,
  scale: 2,
})

Parameters:

filePath: string

The target location of the produced SVG file.

options: default: {}

Export options

OptionalblendingMode?: "BLEND_DIVIDE" | "BLEND_SUBTRACTION" | "COLOR" | "COLOR_BURN" | "COLOR_DODGE" | "DARKEN" | "DARKER_COLOR" | "DIFFERENCE" | "DISSOLVE" | "EXCLUSION" | "HARD_LIGHT" | "HARD_MIX" | "HUE" | "LIGHTEN" | "LIGHTER_COLOR" | "LIGHTEN_BURN" | "LIGHTEN_DODGE" | "LIGHTEN_LIGHT" | "LUMINOSITY" | "MULTIPLY" | "OVERLAY" | "PASS_THROUGH" | "PIN_LIGHT" | "SATURATION" | "SCREEN" | "SOFT_LIGHT" | "VIVID_LIGHT" | "NORMAL"

The blending mode to use for rendering the layer instead of its default blending mode.

OptionalcancelToken?: null | CancelToken

A cancellation token which aborts the asynchronous operation. When the token is cancelled, the promise is rejected and side effects are not reverted (e.g. the created image file is not deleted when cancelled during actual rendering). A cancellation token can be created via createCancelToken.

Optionalclip?: boolean

Whether to apply clipping by a mask layer if any such mask is set for the layer (see isMasked). Clipping is disabled by default. Setting this flag for layers which do not have a mask layer set has no effect on the results.

OptionalincludeEffects?: boolean

Whether to apply layer effects of the layer. Rendering of effects of nested layers is not affected. By defaults, effects of the layer are applied.

Optionalopacity?: number

The opacity to use for the layer instead of its default opacity.

Optionalscale?: number

The scale (zoom) factor to use for rendering instead of the default 1x factor.

returns Promise<void>