This class sets up an IRenderContext object for exporting the contents of a CanvasComponent (see createRenderContext).
Remarks
- It is possible to export only a part of the contents, see worldBounds and worldPoints.
- The size of the resulting image is controlled by the scale property. For a given target width or height, the appropriate scale can be calculated using calculateScaleForWidth and calculateScaleForHeight.
Type Details
- yFiles module
- view
Constructors
Creates a new SvgExport instance for the given world bounds and scale.
Parameters
A map of options to pass to the method.
- worldBounds - Rect
- the bounds of the content to export, see worldBounds
- scale - number
- the scale, see scale
- worldPoints - IEnumerable<Point>
- The points in world coordinates that are enclosed in the exported area. This option sets the worldPoints property on the created object.
- zoom - number
- projection - Matrix
- The projection to apply to the exported image. This option sets the projection property on the created object.
- margins - Insets
- The margins for the exported image. This option sets the margins property on the created object.
- copyDefsElements - boolean
- A value indicating whether children of the CanvasComponent's defs section that aren't known to the SvgDefsManager should be copied to the exported SVG. This option sets the copyDefsElements property on the created object.
- encodeImagesBase64 - boolean
- A value indicating whether all external images should be inlined and encoded as Base64 data URIs in exportSvgAsync. This option sets the encodeImagesBase64 property on the created object.
- inlineSvgImages - boolean
- A value indicating whether all SVG images should be inlined in the SVG element in exportSvgAsync. This option sets the inlineSvgImages property on the created object.
- rasterizeHtmlVisuals - boolean
- A value indicating whether HtmlVisuals should be converted to bitmap images in the resulting SVG. This option sets the rasterizeHtmlVisuals property on the created object.
- ensureUniqueIds - boolean
- A value indicating whether the IDs of an inline SVG image should be scoped to ensure that they are unique for the given image. This option sets the ensureUniqueIds property on the created object.
- strictMode - boolean
- A value indicating whether the export should fail when images could not be inlined or encoded to Base64 or if it should continue and replace those elements with a fallback image. This option sets the strictMode property on the created object.
- cssStyleSheet - string
- The CSS style sheet for the exported SVG. This option sets the cssStyleSheet property on the created object.
- background - Fill
- The background color for the exported SVG. This option sets the background property on the created object.
Examples
const exporter = new SvgExport(graphComponent.contentBounds)
// configure the export instance
exporter.encodeImagesBase64 = true
exporter.inlineSvgImages = true
// create the <svg> element
const element = exporter.exportSvg(graphComponent)worldBounds are of little use. Instead, after creating the SvgExport a set of worldPoints should be set. The view coordinate bounds around those points then define the rectangular export area. Note that the projection property must also be set correctly for a projection to apply to the exported content.Properties
Gets or sets the background color for the exported SVG.
Remarks
For a value of null or TRANSPARENT, the exported SVG will have no background element. For all other values, the exported SVG will have a background element with corresponding fill.
The default value is null.
Gets or sets a value indicating whether children of the CanvasComponent's defs section that aren't known to the SvgDefsManager should be copied to the exported SVG.
Remarks
false.Gets or sets the CSS style sheet for the exported SVG.
Remarks
If set to a non-empty string, this string will be added to the created SVG enclosed by a <style> element. If set to an empty string, no <style> element will be added to the created SVG. If set to null, the SvgExport will automatically extract all style sheets available to the document through the CSSStyleSheet API and filters all rules that don't match any elements in the created SVG.
Note that setting this property to null might affect the runtime performance of the export significantly. Copying and filtering the style rules has a runtime complexity of roughly the number of elements in the SVG times the number of CSS rules.
Note also, that all style sheets that cannot be accessed because of CORS policies are ignored.
The default value is "".
Gets or sets a value indicating whether all external images should be inlined and encoded as Base64 data URIs in exportSvgAsync.
Remarks
Override shouldEncodeImageBase64 to control the encoding and embedding for each image element separately.
Note that images with blob URLs are invalid outside the current document and should be Base64-encoded when using the exported SVG in a different context.
The default value is false.
See Also
Gets or sets a value indicating whether the IDs of an inline SVG image should be scoped to ensure that they are unique for the given image.
Remarks
See Also
Gets or sets a value indicating whether all SVG images should be inlined in the SVG element in exportSvgAsync.
Remarks
Override shouldInlineSvgImage to control the inlining for each image separately.
The default value is false.
See Also
Gets or sets the margins for the exported image.
Gets or sets the projection to apply to the exported image.
Remarks
Gets or sets a value indicating whether HtmlVisuals should be converted to bitmap images in the resulting SVG.
Remarks
In the SVG document returned by exportSvg, HTML visuals will be included as nested <foreignObject> elements. For better portability of the exported SVG document, HTML visuals can be rendered as bitmaps, instead. This is achieved by rendering the individual <foreignObject>s as SVG images to a <canvas> and replacing the <foreignObject>s with an SVG image with the exported data url.
The default value is false
<foreignObject> children. This only affects rendering but the SVG document is still correct.Gets the resulting height of the target image with respect to export area, scale and margins.
Gets the resulting width of the target image with respect to export area, scale, and margins.
Gets or sets the bounds of the content to export in world coordinates.
Remarks
Gets or sets the points in world coordinates that are enclosed in the exported area.
Remarks
Gets or sets the zoom property to use during the creation of the visualization.
Remarks
In contrast to the scale property, which works on the output graphics, this property determines what zoom value is to be assumed on the canvas when creating the visual. This can affect the rendering of zoom-dependent visuals, especially level-of-detail rendering.
This value has to be strictly greater than 0. Its default value is 1.0
Methods
Calculates the value to set the scale to in order to achieve the given target height (without margins).
Remarks
Parameters
A map of options to pass to the method.
- height - number
- the height of the target image
Returns
- ↪number
- the scale value to use
Calculates the value to set the scale to in order to achieve the given target width (without margins).
Remarks
Parameters
A map of options to pass to the method.
- width - number
- the width of the target image
Returns
- ↪number
- the scale value to use
Returns an initialized IRenderContext and changes the given transform and the clip bounds such that a part of the given CanvasComponent instance can be exported to an image.
Parameters
A map of options to pass to the method.
- canvasComponent - CanvasComponent
- The CanvasComponent instance to export.
Returns
- ↪IRenderContext
- An IRenderContext to use.
Exports the contents of the CanvasComponent to a single, standalone SVG element.
Remarks
Parameters
A map of options to pass to the method.
- canvas - CanvasComponent
- The canvas to be exported.
Returns
- ↪SVGSVGElement
- An SVG element with the canvas contents.
exportSvgAsync
(canvas: CanvasComponent, renderCompletionCallback?: function():Promise<any>) : Promise<SVGSVGElement>Exports the contents of the CanvasComponent to a single, standalone SVG element.
Remarks
In addition, images are inlined into the SVG using base64 encoding if encodeImagesBase64 is set to true. Image inlining can be controlled for each image individually by overwriting the predicate method shouldEncodeImageBase64. Note that images with blob URLs are invalid outside the current document and should be Base64-encoded when using the exported SVG in a different context.
SVG image elements are replaced with a copy of the referenced SVG element if inlineSvgImages is set to true. Image encoding can be controlled for each image individually by overwriting the predicate method shouldInlineSvgImage.
When rasterizeHtmlVisuals is enabled, HTML Visuals will be exported as bitmap images rather than wrapped in <foreignObject> elements.
The renderCompletionCallback parameter can be used to await any asynchronous rendering tasks to be finished before the optional post-processing steps are applied. This can be useful in case you are using styles that rely on frameworks like Angular or React, which render asynchronously by default, so you might need to wait for the framework to generate the final DOM structure.
Parameters
A map of options to pass to the method.
- canvas - CanvasComponent
- The canvas to be exported.
- renderCompletionCallback - function():Promise<any>
- An optional callback that will be called after the initial SVG is generated. The returned promise is awaited before any optional post-processing steps are applied.
Returns
- ↪Promise<SVGSVGElement>
- A
Promisethat will resolve to an SVG element with the canvas contents.
fixViewBoxAttribute
(importedSvg: Element, originalImage: SVGImageElement | HTMLImageElement) : Promise<void>Fixes the viewBox attribute on SVG images that have been inlined for export.
Remarks
image tag should be inlined, but doesn't have a viewBox attribute, the resulting element might be rendered with wrong dimensions. This specific implementation sets the viewBox attribute to the natural dimensions of the original image.Parameters
A map of options to pass to the method.
- importedSvg - Element
- The root element of the SVG file that's referenced by the original image element.
- originalImage - SVGImageElement | HTMLImageElement
- The original image element that has been inlined.
Returns
- ↪Promise<void>
- A Promise that will be fulfilled once the
viewBoxattribute has been set.
See Also
prepareInlinedImage
(importedSvg: Element, originalImage: SVGImageElement | HTMLImageElement) : ElementPrepares the imported SVG element before it is placed in the DOM as a replacement for the original image.
Remarks
<image> element, this implementation copies the values of the x, y, width, height and preserveAspectRatio attributes from the original image element to the imported SVG element, and wraps the SVG element in a g element to support the transform of the original image. For HTML <img> elements, the style and class attributes are copied to a wrapping <div> element. If the original image element has an id attribute, it is also copied to the new container element.Parameters
A map of options to pass to the method.
- importedSvg - Element
- The root element of the SVG file that's referenced by the original image element.
- originalImage - SVGImageElement | HTMLImageElement
- The original image element that will be replaced.
Returns
- ↪Element
- The element that's actually placed in the DOM as a replacement of the
originalImage.
See Also
Specifies whether or not a given external image should be encoded and inlined as a Base64 data-url in the resulting SVG document.
Remarks
image.Parameters
A map of options to pass to the method.
- image - SVGImageElement
- The image element that refers to the image to be encoded.
Returns
- ↪boolean
- Whether the given image should be encoded.
Specifies whether or not an SVG image should be inlined.
Remarks
image.Parameters
A map of options to pass to the method.
- image - SVGImageElement
- The image to be inlined.
Returns
- ↪boolean
- Whether the given image should be inlined.
Static Methods
Encodes the given SVG document as Data URI.
Remarks
Parameters
A map of options to pass to the method.
- svgXml - string
- A string containing the SVG document.
Returns
- ↪string
- A data URI of the SVG document.
Serializes the given SVG element to a string.
Remarks
href with xlink:href.Parameters
A map of options to pass to the method.
- svg - Element
- The SVG element to export.
Returns
- ↪string
- A string representation of the SVG.