Class: SvgCanvas

svgcanvas.SvgCanvas(container, config)

The main SvgCanvas class that manages all SVG-related functions.

Constructor

new SvgCanvas(container, config)

Parameters:
Name Type Description
container HTMLElement

The container HTML element that should hold the SVG root element
config module:SVGeditor.configObj.curConfig

An object that contains configuration data
Source:

Namespaces

textActions

Members

addedNew :boolean

Type:
  • boolean
Source:

getMouseTarget :module:path.EditorContext#getMouseTarget

Type:
Source:

Methods

bind(ev, f) → {module:svgcanvas.EventHandler}

Attaches a callback function to an event.

Parameters:
Name Type Description
ev string

String indicating the name of the event
f module:svgcanvas.EventHandler

The callback function to bind to the event
Source:
Returns:

The previous event

Type
module:svgcanvas.EventHandler

changeSelectedAttribute(attr, val, elems) → {void}

Change the given/selected element and add the original value to the history stack. If you want to change all selectedElements, ignore the elems argument. If you want to change only a subset of selectedElements, then send the subset to this function in the elems argument.

Parameters:
Name Type Description
attr string

String with the attribute name
val string | Float

String or number with the new attribute value
elems Array.<Element>

The DOM elements to apply the change to
Source:
Returns:
Type
void

clear() → {void}

Clears the current document. This is not an undoable action.

Source:
Fires:
  • (module:svgcanvas.SvgCanvas#event:beforeClear|afterClear)
Returns:
Type
void

convertGradients(elem) → {void}

Converts gradients from userSpaceOnUse to objectBoundingBox.

Parameters:
Name Type Description
elem Element
Source:
Returns:
Type
void

convertToPath(elem, getBBox) → {void|DOMRect|false|SVGPathElement|null}

Convert selected element to a path, or get the BBox of an element-as-path.

Parameters:
Name Type Description
elem Element

The DOM element to be converted
getBBox boolean

Boolean on whether or not to only return the path's BBox
Source:
To Do:
  • (codedread): Remove the getBBox argument and split this function into two.
Returns:

If the getBBox flag is true, the resulting path's bounding box object. Otherwise the resulting path element is returned.

Type
void | DOMRect | false | SVGPathElement | null

cutSelectedElements() → {void}

Removes all selected elements from the DOM and adds the change to the history stack. Remembers removed elements on the clipboard.

Source:
Returns:
Type
void

cycleElement(next) → {void}

Select the next/previous element within the current layer.

Parameters:
Name Type Description
next boolean

true = next and false = previous element
Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:selected
Returns:
Type
void

embedImage(src) → {Promise.<(string|false)>}

Converts a given image file to a data URL when possible, then runs a given callback.

Parameters:
Name Type Description
src string

The path/URL of the image
Source:
Returns:

Resolves to a Data URL (string|false)

Type
Promise.<(string|false)>

endChanges(changes) → {void}

Parameters:
Name Type Description
changes PlainObject
Properties
Name Type Description
cmd ChangeElementCommand
elem SVGPathElement
Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:changed
Returns:
Type
void

flashStorage() → {void}

Flash the clipboard data momentarily on localStorage so all tabs can see.

Source:
Returns:
Type
void

getBlur(elem) → {string}

Gets the stdDeviation blur value of the given element.

Parameters:
Name Type Description
elem Element

The element to check the blur value for
Source:
Returns:

stdDeviation blur attribute value

Type
string

getBold() → {boolean}

Check whether selected element is bold or not.

Source:
Returns:

Indicates whether or not element is bold

Type
boolean

getDocumentTitle() → {string|void}

Source:
Returns:

The current document title or an empty string if not found

Type
string | void

getFillOpacity() → {Float}

Source:
Returns:

the current fill opacity

Type
Float

getFontColor() → {string}

Source:
Returns:

The current font color

Type
string

getFontFamily() → {string}

Source:
Returns:

The current font family

Type
string

getFontSize() → {Float}

Source:
Returns:

The current font size

Type
Float

getIntersectionList(rect) → {Array.<Element>|NodeList}

This method sends back an array or a NodeList full of elements that intersect the multi-select rubber-band-box on the currentLayer only.

We brute-force getIntersectionList for browsers that do not support it (Firefox).

Reference: Firefox does not implement getIntersectionList(), see https://bugzilla.mozilla.org/show_bug.cgi?id=501421.

Parameters:
Name Type Description
rect SVGRect
Source:
Returns:

Bbox elements

Type
Array.<Element> | NodeList

getItalic() → {boolean}

Check whether selected element is in italics or not.

Source:
Returns:

Indicates whether or not element is italic

Type
boolean

getPaintOpacity(type) → {Float}

Gets the current fill/stroke opacity.

Parameters:
Name Type Description
type "fill" | "stroke"

String with "fill" or "stroke"
Source:
Returns:

Fill/stroke opacity

Type
Float

getSnapToGrid() → {boolean}

Source:
Returns:

The current snap to grid setting

Type
boolean

getStrokeOpacity() → {string}

Source:
Returns:

the current stroke opacity

Type
string

getStrokeWidth() → {Float|string}

Source:
Returns:

The current stroke-width value

Type
Float | string

getStyle() → {module:svgcanvas.StyleOptions}

Source:
Returns:

current style options

Type
module:svgcanvas.StyleOptions

getSvgString() → {string}

Returns the current drawing as raw SVG XML text.

Source:
Returns:

The current drawing as raw SVG XML text.

Type
string

getText() → {string}

Source:
Returns:

The current text (textContent) of the selected element

Type
string

getVersion() → {string}

Source:
Returns:

A string which describes the revision number of SvgCanvas.

Type
string

getVisibleElementsAndBBoxes(parent) → {Array.<ElementAndBBox>}

Get all elements that have a BBox (excludes <defs>, <title>, etc). Note that 0-opacity, off-screen etc elements are still considered "visible" for this function.

Parameters:
Name Type Description
parent Element

The parent DOM element to search within
Source:
Returns:

An array with objects that include:

Type
Array.<ElementAndBBox>

groupSvgElem(elem) → {void}

Wrap an SVG element into a group element, mark the group as 'gsvg'.

Parameters:
Name Type Description
elem Element

SVG element to wrap
Source:
Returns:
Type
void

importSvgString(xmlString) → {null|Element}

This function imports the input SVG XML as a <symbol> in the <defs>, then adds a <use> to the current layer.

Parameters:
Name Type Description
xmlString string

The SVG as XML text.
Source:
To Do:
  • - properly handle if namespace is introduced by imported content (must add to svgcontent and update all prefixes in the imported node) - properly handle recalculating dimensions, `recalculateDimensions()` doesn't handle arbitrary transform lists, but makes some assumptions about how the transform list was obtained
Fires:
  • module:svgcanvas.SvgCanvas#event:changed
Returns:

This function returns null if the import was unsuccessful, or the element otherwise.

Type
null | Element

Wraps the selected element(s) in an anchor element or converts group to one.

Parameters:
Name Type Description
url string
Source:
Returns:
Type
void

pasteElements(type, x, y) → {void}

Parameters:
Name Type Description
type "in_place" | "point" | void
x Integer | void

Expected if type is "point"
y Integer | void

Expected if type is "point"
Source:
Fires:
Returns:
Type
void

PDF(WindowNameopt, outputTypeopt) → {Promise.<module:svgcanvas.PDFedResults>}

Generates a PDF based on the current image, then calls "edPDF" with an object including the string, the data URL, and any issues found.

Parameters:
Name Type Attributes Default Description
WindowName string <optional>

Will also be used for the download file name here
outputType external:jsPDF.OutputType <optional>
 "dataurlstring"
Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:edPDF
Returns:

Resolves to module:svgcanvas.PDFedResults

Type
Promise.<module:svgcanvas.PDFedResults>

prepareSvg(newDoc) → {void}

Runs the SVG Document through the sanitizer and then updates its paths.

Parameters:
Name Type Description
newDoc XMLDocument

The SVG DOM document
Source:
Returns:
Type
void

randomizeIds(enableRandomizationopt) → {void}

This function determines whether to use a nonce in the prefix, when generating IDs for future documents in SVG-Edit. If you're controlling SVG-Edit externally, and want randomized IDs, call this BEFORE calling svgCanvas.setSvgString.

Parameters:
Name Type Attributes Description
enableRandomization boolean <optional>

If true, adds a nonce to the prefix. Thus svgCanvas.randomizeIds() <==> svgCanvas.randomizeIds(true)
Source:
Returns:
Type
void

raster(imgTypeopt, qualityopt, WindowNameopt, optsopt) → {Promise.<module:svgcanvas.ImageedResults>}

Generates a PNG (or JPG, BMP, WEBP) Data URL based on the current image, then calls "ed" with an object including the string, image information, and any issues found.

Parameters:
Name Type Attributes Default Description
imgType "PNG" | "JPEG" | "BMP" | "WEBP" | "ICO" <optional>
 "PNG"
quality Float <optional>

Between 0 and 1
WindowName string <optional>
opts PlainObject <optional>
Properties
Name Type Attributes Description
avoidEvent boolean <optional>
Source:
To Do:
  • Confirm/fix ICO type
Fires:
  • module:svgcanvas.SvgCanvas#event:ed
Returns:

Resolves to module:svgcanvas.ImageedResults

Type
Promise.<module:svgcanvas.ImageedResults>

recalculateAllSelectedDimensions() → {void}

Runs recalculateDimensions on the selected elements, adding the changes to a single batch command.

Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:changed
Returns:
Type
void

removeFromSelection(elemsToRemove) → {void}

Removes elements from the selection.

Parameters:
Name Type Description
elemsToRemove Array.<Element>

An array of elements to remove from selection
Source:
Returns:
Type
void
Source:
Returns:
Type
void

removeUnusedDefElems() → {Integer}

Looks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.

Source:
Returns:

The number of elements that were removed

Type
Integer

runExtensions(action, varsopt, returnArrayopt) → {GenericArray.<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false}

Parameters:
Name Type Attributes Description
action "mouseDown" | "mouseMove" | "mouseUp" | "zoomChanged" | "IDsUpdated" | "canvasUpdated" | "toolButtonStateUpdate" | "selectedChanged" | "elementTransition" | "elementChanged" | "langReady" | "langChanged" | "addLangData" | "workareaResized"
vars module:svgcanvas.SvgCanvas#event:ext_mouseDown | module:svgcanvas.SvgCanvas#event:ext_mouseMove | module:svgcanvas.SvgCanvas#event:ext_mouseUp | module:svgcanvas.SvgCanvas#event:ext_zoomChanged | module:svgcanvas.SvgCanvas#event:ext_IDsUpdated | module:svgcanvas.SvgCanvas#event:ext_canvasUpdated | module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate | module:svgcanvas.SvgCanvas#event:ext_selectedChanged | module:svgcanvas.SvgCanvas#event:ext_elementTransition | module:svgcanvas.SvgCanvas#event:ext_elementChanged | module:svgcanvas.SvgCanvas#event:ext_langReady | module:svgcanvas.SvgCanvas#event:ext_langChanged | module:svgcanvas.SvgCanvas#event:ext_addLangData | module:svgcanvas.SvgCanvas#event:ext_workareaResized | module:svgcanvas.ExtensionVarBuilder <optional>
returnArray boolean <optional>
Source:
To Do:
  • Consider: Should this return an array by default, so extension results aren't overwritten?
  • Would be easier to document if passing in object with key of action and vars as value; could then define an interface which tied both together
Returns:

See Extension Docs on the ExtensionStatus.

Type
GenericArray.<module:svgcanvas.ExtensionStatus> | module:svgcanvas.ExtensionStatus | false

selectAllInCurrentLayer() → {void}

Clears the selection, then adds all elements in the current layer to the selection.

Source:
Returns:
Type
void

selectOnly(elems, showGrips) → {void}

Selects only the given elements, shortcut for clearSelection(); addToSelection().

Parameters:
Name Type Description
elems Array.<Element>

an array of DOM elements to be selected
showGrips boolean

Indicates whether the resize grips should be shown
Source:
Returns:
Type
void

setBackground(color, url) → {void}

Set the background of the editor (NOT the actual document).

Parameters:
Name Type Description
color string

String with fill color to apply
url string

URL or path to image to use
Source:
Returns:
Type
void

setBlur(val, complete) → {void}

Adds/updates the blur filter to the selected element.

Parameters:
Name Type Description
val Float

Float with the new stdDeviation blur value
complete boolean

Whether or not the action should be completed (to add to the undo manager)
Source:
Returns:
Type
void

setBlurNoUndo(val) → {void}

Sets the stdDeviation blur value on the selected element without being undoable.

Parameters:
Name Type Description
val Float

The new stdDeviation value
Source:
Returns:
Type
void

setBlurOffsets(filterElem, stdDev) → {void}

Sets the x, y, width, height values of the filter element in order to make the blur not be clipped. Removes them if not neeeded.

Parameters:
Name Type Description
filterElem Element

The filter DOM element to update
stdDev Float

The standard deviation value on which to base the offset size
Source:
Returns:
Type
void

setBold(b) → {void}

Make the selected element bold or normal.

Parameters:
Name Type Description
b boolean

Indicates bold (true) or normal (false)
Source:
Returns:
Type
void

setConfig(opts) → {void}

Update configuration options with given values.

Parameters:
Name Type Description
opts module:SVGEditor.Config

Object with options
Source:
Returns:
Type
void

setFillPaint(paint) → {void}

Parameters:
Name Type Description
paint module:jGraduate~Paint
Source:
Returns:
Type
void

setFontColor(val) → {void}

Set the new font color.

Parameters:
Name Type Description
val string

String with the new font color
Source:
Returns:
Type
void

setFontFamily(val) → {void}

Set the new font family.

Parameters:
Name Type Description
val string

String with the new font family
Source:
Returns:
Type
void

setFontSize(val) → {void}

Applies the given font size to the selected element.

Parameters:
Name Type Description
val Float

Float with the new font size
Source:
Returns:
Type
void

setGoodImage(val) → {void}

Sets a given URL to be a "last good image" URL.

Parameters:
Name Type Description
val string
Source:
Returns:
Type
void

setImageURL(val) → {void}

Sets the new image URL for the selected image element. Updates its size if a new URL is given.

Parameters:
Name Type Description
val string

String with the image URL/path
Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:changed
Returns:
Type
void

setItalic(i) → {void}

Make the selected element italic or normal.

Parameters:
Name Type Description
i boolean

Indicates italic (true) or normal (false)
Source:
Returns:
Type
void

setLengthAdjustMethod Set the new length adjust(value) → {void}

Parameters:
Name Type Description
value string

The length adjust value
Source:
Returns:
Type
void

setLetterSpacingMethod Set the new letter spacing(value) → {void}

Parameters:
Name Type Description
value string

The letter spacing value
Source:
Returns:
Type
void

setLinkURL(val) → {void}

Sets the new link URL for the selected anchor element.

Parameters:
Name Type Description
val string

String with the link URL/path
Source:
Returns:
Type
void

setMode(name) → {void}

Sets the editor's mode to the given string.

Parameters:
Name Type Description
name string

String with the new mode to change to
Source:
Returns:
Type
void

setOpacity(val) → {void}

Sets the given opacity on the current selected elements.

Parameters:
Name Type Description
val string
Source:
Returns:
Type
void

setPaintOpacity(type, val, preventUndo) → {void}

Sets the current fill/stroke opacity.

Parameters:
Name Type Description
type string

String with "fill" or "stroke"
val Float

Float with the new opacity value
preventUndo boolean

Indicates whether or not this should be an undoable action
Source:
Returns:
Type
void

setRectRadius(val) → {void}

Sets the rx and ry values to the selected rect element to change its corner radius.

Parameters:
Name Type Description
val string | Float

The new radius
Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:changed
Returns:
Type
void

setRotationAngle(val, preventUndo) → {void}

Removes any old rotations if present, prepends a new rotation at the transformed center.

Parameters:
Name Type Description
val string | Float

The new rotation angle in degrees
preventUndo boolean

Indicates whether the action should be undoable or not
Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:changed
Returns:
Type
void

setSegType(newType) → {void}

Sets the new segment type to the selected segment(s).

Parameters:
Name Type Description
newType Integer

New segment type. See https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list
Source:
Returns:
Type
void

setSvgString(xmlString, preventUndoopt) → {boolean}

This function sets the current drawing as the input SVG XML.

Parameters:
Name Type Attributes Default Description
xmlString string

The SVG as XML text.
preventUndo boolean <optional>
 false

Indicates if we want to do the changes without adding them to the undo stack - e.g. for initializing a drawing on page load.
Source:
Fires:
  • module:svgcanvas.SvgCanvas#event:setnonce
  • module:svgcanvas.SvgCanvas#event:unsetnonce
  • module:svgcanvas.SvgCanvas#event:changed
Returns:

This function returns false if the set was unsuccessful, true otherwise.

Type
boolean

setTextAnchorMethod Set the new text anchor(value) → {void}

Parameters:
Name Type Description
value string

The text anchor value (start, middle or end)
Source:
Returns:
Type
void

setTextContent(val) → {void}

Updates the text element with the given string.

Parameters:
Name Type Description
val string

String with the new text
Source:
Returns:
Type
void

setTextLengthMethod Set the new text length(value) → {void}

Parameters:
Name Type Description
value string

The text length value
Source:
Returns:
Type
void

setUiStrings(strs) → {void}

Update interface strings with given values.

Parameters:
Name Type Description
strs module:path.uiStrings

Object with strings (see the locales API and the tutorial)
Source:
Returns:
Type
void

setUseData(parent) → {void}

Assigns reference data for each use element.

Parameters:
Name Type Description
parent Element
Source:
Returns:
Type
void

setWordSpacingMethod Set the new word spacing(value) → {void}

Parameters:
Name Type Description
value string

The word spacing value
Source:
Returns:
Type
void

svgCanvasToString() → {string}

Main function to set up the SVG content for output.

Source:
Returns:

The SVG image for output

Type
string

svgToString(elem, indent) → {string}

Sub function ran on each SVG element to convert it to a string as desired.

Parameters:
Name Type Description
elem Element

The SVG element to convert
indent Integer

Number of spaces to indent this tag
Source:
Returns:

The given element as an SVG tag

Type
string

uniquifyElems(g) → {void}

Ensure each element has a unique ID.

Parameters:
Name Type Description
g Element

The parent element of the tree to give unique IDs
Source:
Returns:
Type
void

updateCanvas(w, h) → {module:svgcanvas.CanvasInfo}

Updates the editor canvas width/height/position after a zoom has occurred.

Parameters:
Name Type Description
w Float

Float with the new width
h Float

Float with the new height
Source:
Fires:
Returns:
Type
module:svgcanvas.CanvasInfo

zoomChanged(win, bbox, autoCenter) → {void}

Parameters:
Name Type Description
win external:Window
bbox module:svgcanvas.SvgCanvas#event:zoomed
autoCenter boolean
Source:
Listens to Events:
  • module:svgcanvas.SvgCanvas#event:zoomed
Returns:
Type
void

Events

event:ext_canvasUpdated

Invoked upon updates to the canvas.

Type:
Properties:
Name Type Description
new_x Integer
new_y Integer
old_x string

(Of Integer)
old_y string

(Of Integer)
d_x Integer
d_y Integer
Source:

event:ext_IDsUpdated

Triggered when pasteElements is called from a paste action (context menu or key).

Type:
Properties:
Name Type Description
elems Array.<module:svgcanvas.SVGAsJSON>
changes module:svgcanvas.ChangedIDs

Maps past ID (on attribute) to current ID
Source:

event:ext_mouseDown

The main (left) mouse button is held down on the canvas area.

Type:
Properties:
Name Type Description
event MouseEvent

The event object
start_x Float

x coordinate on canvas
start_y Float

y coordinate on canvas
selectedElements Array.<Element>

An array of the selected Elements
Source:

event:ext_mouseMove

The mouse has moved on the canvas area.

Type:
Properties:
Name Type Description
event MouseEvent

The event object
mouse_x Float

x coordinate on canvas
mouse_y Float

y coordinate on canvas
selected Element

Refers to the first selected element
Source:

event:ext_mouseUp

The main (left) mouse button is released (anywhere).

Type:
Properties:
Name Type Description
event MouseEvent

The event object
mouse_x Float

x coordinate on canvas
mouse_y Float

y coordinate on canvas
Source: