SVGEdit Documentation

SVG-edit uses JavaScript files located in the src/editor/locale/ directory to manage UI string translations. Each file corresponds to a specific language and contains the mapping for the editor's interface strings.

Currently, the following languages have received human-verified translations:

• lang.cs.js (Czech)
• lang.de.js (German)
• lang.en.js (English)
• lang.es.js (Spanish)
• lang.fr.js (French)
• lang.ja.js (Japanese)
• lang.nl.js (Dutch)
• lang.pl.js (Polish)
• lang.ro.js (Romanian)
• lang.sk.js (Slovak)
• lang.tr.js (Turkish)

To edit specific elements inside a group:

1. Double-click the group to enter the group editing context.
2. While in this context, only the group elements are editable.
3. Press Escape to exit the group context and return to the main image editing.

When updating dependencies, you should run scripts to copy necessary files and update license information. It is recommended to use npm-check-updates for managing updates.

npm run copy
npm run license-badges

# To build specific license badges:
npm run license-badge
npm run license-badge-dev

When embedding SVG-Edit in a different domain (cross-origin), be aware of the following:

• Storage Limitations: Due to browser security restrictions, localStorage is not accessible across origins. To handle clipboard and saving, you should configure a listener in the parent frame via the embedded API so the parent can get and set its own storage in response to SVG-Edit events.
• Allowed Origins: You can use the allowedOrigins configuration to specify permitted origins (e.g., * or specific domains).
• XDomain Files: For easier cross-origin setup, use the provided xdomain-svg-editor-es.html or xdomain-svg-editor.html files, which include default configurations for cross-origin use and use a distinct storage namespace to prevent data corruption.

In version 4.0.0, several core methods transitioned from callback-based patterns to returning Promise objects. When upgrading, ensure you use await or .then() instead of passing callback functions.

Key changes include:

• loadSvgString now returns a Promise instead of accepting a callback.
• editor.ready callbacks are treated as Promises and resolve only after all have resolved.
• editor.runCallbacks now returns a Promise that resolves once all callbacks have resolved.

To copy the Fill or Stroke style of an object to multiple other objects:

1. Select the source object. Its Fill and Stroke attributes will appear in the bottom toolbar.
2. Hold Shift and select the target object(s).
3. Click the color block in the bottom toolbar (the Fill block for fill or the Stroke block for stroke) to open the colorpicker.
4. Click Ok in the colorpicker. The selected target objects will now match the source object's style.

SVGEdit uses submodules to manage old versions alongside the master version. For development or publishing, you may need to initialize or update these submodules using the following non-recursive commands to avoid triggering sub-releases within the submodules themselves.

npm run submodules
# Or specifically:
npm run submodules-init
npm run submodules-update

SVG-Edit extensions are standalone JavaScript files that must export a default object. The object requires a name (a unique ID) and an init function. The init function is called with an object containing svgCanvas methods and variables, and its this context is bound to the svgEditor instance.

To ensure setup tasks like loading icons or language data are complete before your extension logic runs, you can return a callback function in the object returned by init.

You can load extensions using three primary methods:

1. HTML inclusion: Include the extension script directly in your HTML file.
2. setConfig: Load extensions via the configuration API.
3. URL parameters: Indicate extensions through the URL (e.g., ?extensions=ext-name.js).

For advanced configuration that affects how extensions are loaded, you can use svgedit-config-iife.js (generated via npm run build-by-config) to execute commands before extensions are initialized.