Elemental SVG Editor — User Guide

1. Getting Started

Elemental SVG Editor is a single HTML file that lets you load, edit, and export SVG icons. There is nothing to install — just open the file and start working.

• In a browser — Open the HTML file directly, or visit elemental-svg.com to use the hosted version online.
• In FileMaker — Load the HTML file into a Web Viewer on your layout. The editor automatically detects it is running inside FileMaker and adjusts its behavior accordingly.

No server, no build step, no dependencies. The editor works fully offline once the page has loaded.

2. Loading SVGs

There are several ways to get SVGs into the editor:

• loadSVG(base64String) — Load a single SVG from a Base64-encoded string.
• loadSVGFromString(svgString, 'filename.svg') — Load from a raw SVG markup string.
• loadSVGItems(jsonArray) — Load multiple SVGs from a JSON array of {filename, svg} objects, where svg is Base64-encoded.

When multiple SVGs are loaded, they appear in a tile grid so you can view and edit them all at once.

3. Previewing & Navigating

Once SVGs are loaded, they appear in the main preview area. A single SVG is shown centered; multiple SVGs appear in a tile grid.

4. Editing SVGs

All editing controls apply to every loaded SVG at once. Changes are previewed in real time.

5. Overlay Mode

Overlay mode lets you combine multiple SVGs into a single layered composition. This is useful for building composite icons — for example, placing a small badge or symbol on top of a larger base icon.

Entering Overlay Mode

1. Load two or more SVGs into the editor.
2. Select the SVGs you want to combine. Use Shift+click or Cmd/Ctrl+click to select multiple tiles, or use the Select All option.
3. Click the Overlay button in the toolbar. The editor switches to a dedicated overlay workspace.

The Overlay Workspace

The workspace shows all your selected SVGs as layers on a shared canvas. A labeled "SVG Viewport" boundary indicates the final output area — this is the bounding box of the merged SVG that will be produced when you click Done.

Layers can be positioned anywhere in the workspace, including outside the viewport boundary. Only the parts within the viewport will appear in the final SVG.

Selecting Layers

Click on any layer in the workspace to select it. The selected layer is highlighted with a dashed border and its name is shown in the overlay panel. You can click anywhere within a layer's bounding box to select it — you do not need to click directly on a filled or stroked area of the SVG.

Positioning Layers

Click and drag a layer to move it around the workspace. The drag interaction works across the entire bounding box of the layer, making it easy to reposition even sparse or outline-style icons.

Scaling Layers

With a layer selected, use the Scale slider in the overlay panel to resize it. The range goes from 10% to 300% of the layer's original size. This is useful for making one icon smaller (like a badge) while keeping the base icon at full size.

Rotating Layers

Use the rotation buttons to rotate the selected layer. You can choose the rotation increment — 15, 30, 45, or 90 degrees — using the dropdown next to the rotation controls.

Per-Layer Background

Each layer can have its own background fill, independent of the main editor's background shape feature. This is useful for adding a colored circle or square behind a specific layer in the composition.

1. Select a layer in the workspace.
2. Toggle the Background checkbox in the overlay panel.
3. Choose a shape: circle, square, or rounded square.
4. Pick a background color using the color picker.
5. Adjust the padding to control how much space surrounds the icon within the background shape.

Reordering Layers

Layers are drawn in order — the last layer in the stack appears on top. Use the layer ordering controls to change which layers appear in front of or behind others:

• Bring to Front — Move the selected layer to the very top of the stack.
• Move Forward — Move the selected layer one position up.
• Move Backward — Move the selected layer one position down.
• Send to Back — Move the selected layer to the very bottom of the stack.

Removing a Layer

Click the trash icon next to the layer name to remove the selected layer from the composition. If you remove the last remaining layer, overlay mode is cancelled automatically and you are returned to the main editor.

Resetting a Layer

Click Reset Layer Position to return the selected layer to its default centered position, with scale reset to 100% and rotation reset to 0 degrees. This does not affect the layer's background settings.

Undo and Redo

Overlay mode has its own undo/redo history, separate from the main editor. Every action you take — moving, scaling, rotating, reordering, adding backgrounds — is recorded. Use Cmd/Ctrl+Z to undo and Cmd/Ctrl+Shift+Z to redo, just like in the main editor.

Finishing the Composition

When you are happy with the arrangement, click Done. The editor merges all layers into a single SVG and adds it to your editor session. The original source SVGs that were used in the composition are removed from the editor, leaving only the merged result.

The merged SVG can then be edited further using all the normal editor tools — fill color, stroke, rotation, background shape, and so on — or exported directly.

Cancelling

Click Cancel to exit overlay mode without saving. All source SVGs remain in the editor exactly as they were before you entered overlay mode.

6. Stroke to Fill Conversion

This is one of the editor's most important features for FileMaker developers.

Many popular icon sets (like Lucide, Feather, and Tabler) use strokes to draw their outlines. Unfortunately, FileMaker does not render stroke-based SVGs correctly when they are used as button icons — strokes often appear too thin, too thick, or disappear entirely.

The editor solves this by converting stroke outlines into filled vector paths:

• When you load SVGs that use strokes, the editor automatically detects this and shows a "Convert strokes to fills" option.
• Enabling this runs the SVG through a bitmap tracing process (using Potrace) that traces the visual outline and replaces strokes with solid filled paths.
• The result looks the same visually but works properly inside FileMaker button icons.

7. Exporting / Saving

Output Format

Choose between SVG (vector) or PNG (raster). When PNG is selected, you can pick a size: 32, 64, 128, 256, 512, or 1024 pixels.

Browser Mode

• Save — Downloads the file(s) to your computer. When saving multiple files, they are automatically bundled into a ZIP archive.
• Copy — Copies the SVG source code to your clipboard.
• Code — Opens a viewer showing the raw SVG source so you can inspect or copy it.

FileMaker Mode

• Save — Sends the SVG data back to FileMaker via a script call. The data is passed as a Base64-encoded JSON string to a FileMaker script called Save Icons.
• Your FileMaker solution needs a script by that name to receive and process the data.

Multiple SVGs

When more than one SVG is loaded, you can choose to save all of them or select specific ones to include in the export.

Auto-Convert

Enable the Auto Convert toggle to automatically save or export as soon as SVGs are loaded. This is useful for batch workflows where you want to skip the manual Save step.

8. FileMaker Integration Guide

This section is for developers who want to embed the editor in their own FileMaker solutions.

Setting Up the Web Viewer

1. Add a Web Viewer to your layout.
2. Set the web address to the HTML file — either stored in a container field or referenced as a file path.
3. The editor auto-detects it is running in FileMaker when FileMaker.PerformScript is available.

Initializing the Editor

After the page loads, call initEditor() via Perform JavaScript in Web Viewer to configure the editor. Every property is optional — omit any property to keep the default value.

initEditor({
    output_mode: 'fm',        // 'fm' or 'browser'
    style: 'dark',            // 'dark' or 'light'
    style_colour: 'orange',   // accent color
    output_format: 'svg',     // 'svg' or 'png'
    output_size: 512          // PNG size in pixels (32–1024)
});

Editor Presets

You can also pass editor presets to initEditor() to pre-configure the editing controls. This is useful for standardizing icon appearance across a team, or setting up the editor for a specific workflow. Preset values override saved user preferences.

Colors & Stroke

Transforms

Background Shape

FileMaker Options

Conversion & Display

Full Example

Here is an example that initializes the editor with white icons on a blue circle background:

initEditor({
    output_mode: 'fm',
    style: 'dark',
    style_colour: 'blue',
    output_format: 'svg',
    fill_color: '#ffffff',
    bg_enabled: true,
    bg_color: '#3498db',
    bg_edges: 0,
    icon_padding: 15,
    fm_compatible: true,
    fm_dynamic_fill: false
});

Loading SVGs into the Editor

• Use Perform JavaScript in Web Viewer to call loadSVG(base64data) for a single icon.
• For multiple SVGs, call loadSVGItems(jsonArrayString) where the JSON is an array of {"filename": "name.svg", "svg": "base64data"} objects.

Getting SVGs Back

• When the user clicks Save, the editor calls FileMaker.PerformScript('Save Icons', parameter).
• The parameter is a Base64-encoded JSON string containing the processed SVG data.
• Your Save Icons script should decode this and store the SVGs as needed.

FM-Specific Options

Version Updates in FileMaker

The editor checks for updates automatically. In FileMaker mode, when a new version is available, it shows a "Click to update" link. Clicking it calls FileMaker.PerformScript('Update Version', payload) where the payload contains the download URL for the new HTML file.

Your solution needs an Update Version script that downloads the new file and replaces the old one.

9. Settings & Preferences

The following preferences are saved automatically between sessions using browser localStorage:

• Theme (dark or light) and accent color
• FM Compatibility settings
• Preview background preference
• Auto-convert toggle

These settings persist as long as the browser storage is not cleared. In FileMaker, localStorage is tied to the web viewer's data storage.

10. Keyboard Shortcuts

11. Troubleshooting & Tips