SVG & Plotly Imports

Molkit can place external graphics on the canvas as annotations. SVG files stay vector, so they scale cleanly at any zoom and export sharply. Plotly charts come in through a paste-JSON dialog that renders the chart and converts it to the same vector SVG annotation type.

SVG annotations

There are three ways to get an SVG onto the canvas:

Insert menu: choose Insert > Image… and pick one or more files. SVG files are detected by MIME type or .svg extension and routed to the vector pipeline; other image formats are inserted as raster images.
Drag and drop: drop an SVG file anywhere on the canvas.
Paste: copy raw SVG markup to the clipboard and press Ctrl+V.

The file is parsed and sanitized before insertion. Scripts, event handlers, javascript: links, and embedded foreign content are stripped, and malformed SVG is rejected. The cleaned markup is stored in the document, so saved files carry the full vector data.

Sizing and aspect ratio

Natural dimensions come from the SVG’s viewBox (or its width and height attributes). On insert, the graphic is scaled down if needed so its longest side is 300 px; you can resize it afterward without quality loss.

The aspect ratio is locked by default. While locked, corner and edge handles both resize proportionally, and typing a new width in the properties panel recomputes the height (and vice versa). Click the lock button in the panel to allow free, non-proportional resizing.

Properties panel

Selecting an SVG annotation opens a panel titled “SVG” with:

Width and height fields
Opacity slider (0 to 100 percent)
Border toggle with width and color controls; the border draws as a rectangle just outside the graphic

Cropping is available for raster images only, not SVG annotations.

Raster images

Non-SVG images (PNG, JPEG, and other bitmap formats) insert as raster annotations through the same three routes: Insert > Image…, paste, or drag-and-drop. See Copy & Paste for paste and drop details. Their properties panel offers the same opacity and border controls, plus Replace… to swap in a different file and Original Size to restore the image’s natural dimensions.

Cropping raster images

Double-click a selected raster image, or click Crop in its properties panel, to enter crop mode. Eight handles appear around the visible area; drag any of them to crop, and the image updates live as you drag. Holding Shift on a corner handle locks the aspect ratio. Handles also snap to the detected edges of the image content, so a single drag can trim away surrounding whitespace; holding Shift disables that snap. Press Enter or Escape, or click outside the image, to finish, and use Reset Crop in the panel to restore the full image.

Plotly chart import

Choose Insert > Plotly Chart… to open the import dialog. Paste a Plotly figure as JSON into the text area; it must contain a data array and may include a layout object. A live preview renders about half a second after you stop typing, with JSON and render errors shown in place of the chart.

Press the Insert button or Ctrl+Enter to place the chart; Escape closes the dialog, and Tab indents inside the text area.

What you get

The chart renders once at the dimensions given by layout.width and layout.height (defaults: 700 by 450), then its layered SVG output is merged into a single SVG annotation. The result behaves exactly like an imported SVG: vector scaling, opacity, border, and aspect-ratio lock all apply. It is a static snapshot, not a live chart; there is no hover, zoom, or pan on the canvas.

The original JSON is stored with the annotation. Double-click the chart (or use the Edit Chart button in its properties panel) to reopen the dialog pre-filled with your spec, change it, and press Update to regenerate the graphic in place.

Limitations

Plotly.js loads on demand from a CDN, so the first import in a session needs an internet connection.
Only Plotly’s SVG output is captured. Trace types that Plotly draws with WebGL render to a canvas element and will not appear in the imported graphic.
Charts are recreated from JSON on each edit; interactions configured in the spec (buttons, sliders) have no effect in the static snapshot.