Class SVGUtils

Utility class for SVG operations

Constructors

constructor

Methods

addA11y addArrowMarker addStyles addTooltipSupport calculateViewBox createSVG estimateTextWidth generateId generatePanZoomScript generateZoomControlsScript getOrCreateDefs roundedRectPath sanitizeSVG sanitizeText seededRandom wrapText wrapWithScrollContainer

Constructors

constructor

Methods

Static addA11y

Static addArrowMarker

  • addArrowMarker(svg, id, color?): string

  • Adds an arrowhead marker definition to SVG

    Parameters

    • svg: SVGElement

      SVG element

    • id: string

      Marker ID

    • color: string = '#000'

      Arrow color

    Returns string

    Marker ID for use in marker-end attribute

Static addStyles

Static addTooltipSupport

  • addTooltipSupport(svg, doc): void

  • Generates interactive tooltip script for SVG elements Elements must have data-tooltip attribute

    Parameters

    • svg: SVGElement

      SVG element to add tooltip to

    • doc: Document

      Document to create elements in

    Returns void

    Script tag with tooltip implementation

Static calculateViewBox

  • calculateViewBox(viewBox): {
        contentHeight: number;
        contentWidth: number;
        height: number;
        width: number;
        x: number;
        y: number;
    }

  • Calculates viewBox with padding applied

    Parameters

    • viewBox: ViewBox

      ViewBox configuration

    Returns {
        contentHeight: number;
        contentWidth: number;
        height: number;
        width: number;
        x: number;
        y: number;
    }

    Padding-adjusted dimensions and offsets

    • contentHeight: number
    • contentWidth: number
    • height: number
    • width: number
    • x: number
    • y: number

Static createSVG

  • createSVG(width, height, idPrefix?): Document

  • Creates a base SVG element with proper namespace and dimensions

    Parameters

    • width: number

      SVG width in pixels

    • height: number

      SVG height in pixels

    • Optional idPrefix: string

      Optional ID prefix for the root SVG element

    Returns Document

    JSDOM Document containing the SVG

Static estimateTextWidth

  • estimateTextWidth(text, fontSize?): number

  • Calculates text width (approximate based on character count and font size) More accurate measurement would require actual rendering

    Parameters

    • text: string

      Text content

    • fontSize: number = 14

      Font size in pixels

    Returns number

    Estimated width in pixels

Static generateId

Static generatePanZoomScript

  • generatePanZoomScript(containerId?, minScale?, maxScale?, showControls?): string

  • Generates self-contained pan/zoom script for SVG No external dependencies - fully embedded JavaScript

    Parameters

    • containerId: string = 'pan-zoom-container'

      ID of the SVG group to apply transform to

    • minScale: number = 0.5

      Minimum zoom level (default: 0.5)

    • maxScale: number = 3

      Maximum zoom level (default: 3)

    • showControls: boolean = false

      Show zoom in/out/reset buttons (default: false)

    Returns string

    Script tag with pan/zoom implementation

Private Static generateZoomControlsScript

Static getOrCreateDefs

Static roundedRectPath

  • roundedRectPath(x, y, width, height, radius): string

  • Creates a rounded rectangle path

    Parameters

    • x: number

      X coordinate

    • y: number

      Y coordinate

    • width: number

      Width

    • height: number

      Height

    • radius: number

      Corner radius

    Returns string

    SVG path data string

Static sanitizeSVG

  • sanitizeSVG(svgString): string

  • Sanitizes SVG string to remove potentially malicious content

    • Removes event handlers (on*)
    • Removes external image references
    • Removes external use references
    • Restricts href to # and mailto: only

    Parameters

    • svgString: string

      Raw SVG XML string

    Returns string

    Sanitized SVG string

Static sanitizeText

Static seededRandom

  • seededRandom(seed): (() => number)

  • Creates a seeded pseudo-random number generator Uses simple Linear Congruential Generator for deterministic output

    Parameters

    • seed: number

      Random seed

    Returns (() => number)

    Function that returns random numbers between 0 and 1

      • (): number

      • Returns number

Static wrapText

Static wrapWithScrollContainer

  • wrapWithScrollContainer(svgString, maxWidth?, maxHeight?, showBorder?, borderColor?): string

  • Wraps SVG string in a scrollable HTML container Useful for large visualizations that exceed viewport size

    Parameters

    • svgString: string

      The SVG XML string to wrap

    • maxWidth: number = 1200

      Maximum container width in pixels (default: 1200)

    • maxHeight: number = 800

      Maximum container height in pixels (default: 800)

    • showBorder: boolean = true

      Whether to show container border (default: true)

    • borderColor: string = '#ddd'

      Border color (default: #ddd)

    Returns string

    HTML string with SVG wrapped in scrollable div

Settings

Member Visibility

Theme

On This Page

constructoraddA11yaddArrowMarkeraddStylesaddTooltipSupportcalculateViewBoxcreateSVGestimateTextWidthgenerateIdgeneratePanZoomScriptgenerateZoomControlsScriptgetOrCreateDefsroundedRectPathsanitizeSVGsanitizeTextseededRandomwrapTextwrapWithScrollContainer