Skip to content
Molkit

SVG Export

SVG is the format to use when you want vector output that stays sharp at any size and keeps atom labels as real, selectable text. Molkit builds the export by cloning the live canvas, so the saved file carries the same element IDs and rendering as what you see on screen. Open the dialog from File > Export SVG.... The dialog has an inline preview and several option groups, then writes a .svg file named after your molecule (or the current document name).

Opening the dialog

Choose File > Export SVG... from the menu bar. There is no default keyboard shortcut for SVG export.

The dialog opens with a filename field pre-filled from the selected molecule’s metadata. Change it before exporting if you want a different output name; the typed name is also written back to the molecule’s metadata so it sticks for next time.

Scope and dimensions

You can export the whole drawing or just part of it.

  • Scope: All Content exports everything on the canvas. Selection Only exports just the selected atoms and bonds. The selection option is disabled when nothing is selected.
  • Scale: a multiplier (1x through 10x) applied to the output dimensions. The live pixel size shows under the dropdown. SVG stays vector regardless, but scale sets the intrinsic width and height attributes.
  • Padding: whitespace in pixels added around the content bounds. Default is 20.

Background

Include background adds a solid fill behind the drawing. When it is on, pick the color with the swatch or by typing a hex value into the field next to it. Turn it off for a transparent SVG.

Options

The Options section holds the rest of the controls:

  • Responsive (remove width/height): strips the intrinsic width/height attributes so the container’s CSS controls display size. When this is on, the Scale dropdown is grayed out because it no longer affects the output.
  • Theme-aware (light/dark): writes CSS so the SVG follows light or dark rendering depending on where it is displayed. See /settings/theme/ for how themes work in the editor.
  • Embed fonts for offline use: appears only when the document uses non-system fonts, and auto-checks when a local font is in use. Embeds the font so the SVG renders correctly without network access. See /export/fonts/.
  • Mobile-safe rendering: embeds a subsetted metric-compatible fallback (Liberation Sans) so labels render the same on devices that lack Arial. A warning triangle appears when this is off and the document uses a system font that may not be present on phones and tablets. See /export/mobile-safe/.
  • Embed chemistry metadata: writes per-atom and per-bond data (such as formula and structure details) into data-mk-* attributes, and attempts to enrich with PubChem data when reachable. See /export/metadata/.
  • Omit per-atom implicit H counts (metadata): stamps each atom’s embedded implicit-hydrogen count as 0. The formula, molecular weight, and atom count always include implicit hydrogens. This control is only active when the current scope actually contains implicit hydrogens.

An Edit metadata... link at the top of the section opens the metadata editor before you export.

The chemistry, text, font, and theme options only appear when the export actually contains drawn chemistry. Exporting something with no atoms, such as a captured 3D view on its own, hides them. The dialog also remembers Lewis-structure exports and non-Lewis exports separately, so changing options on one kind does not disturb your settings for the other.

If path-based text output is enabled in your build, two extra options appear: Convert labels to paths (outlines text so no font is needed, but text is no longer selectable) and PowerPoint-compatible (outlines labels, drops theme-aware CSS and font embedding so the SVG renders correctly in PowerPoint, Word, and Keynote). Turning on PowerPoint-compatible forces convert-to-paths on and theme-aware and font embedding off; you can still override each afterward.

Preview and output

The dialog shows an inline preview of the SVG, rendered with the same uniquified IDs the export uses so it matches the saved file. Click Export SVG to download.

The saved SVG is vector geometry with a viewBox set to the content bounds, an inline stylesheet for rendering, and atom labels kept as real text elements (so they stay selectable and searchable unless you converted them to paths). Element IDs from the canvas are preserved.

Using exports on a website

Theme-aware and metadata-enabled exports are programmable: a host page can restyle them with CSS, read the embedded chemistry from JavaScript, and wire them to site theme toggles. The Developer Guide covers embedding, theming, and metadata access with code examples.

See also