Elemental SVG Editor — Feature Reference

Click the "Load SVGs" button to open a file dialog. Supports multiple file selection.

Drag SVG files directly onto the editor preview area to load them.

Paste SVG code or files from the clipboard. Useful in FileMaker where Cmd+V is intercepted.

Load SVGs programmatically via loadSVG(), loadSVGFromString(), and loadSVGItems() for FileMaker integration.

Accept Base64-encoded SVG data as input.

Load and manage multiple SVGs simultaneously in a single session.

Multiple SVGs displayed in a responsive tile grid with drag-to-reorder support.

Full-size centered display when only one SVG is loaded.

Zoom in/out buttons, fit-to-view, and mouse wheel zoom with modifier key.

Checkerboard (transparency), white, black, or custom color background behind SVGs.

Toggle between dark and light editor themes.

Six accent color options: orange, red, blue, green, purple, and pink.

Displays SVG dimensions and file size alongside each preview.

Change fill color with a color picker and hex input field.

Change stroke color with a color picker and hex input field.

Adjust stroke width from 0 to 10 in 0.5 increments.

Rotate clockwise or counter-clockwise with configurable increments (15, 30, 45, 90 degrees).

Horizontal and vertical mirroring.

Adjust icon opacity from 0% to 100%.

Resize the icon within its viewBox (50-150%).

Reposition the icon within its viewBox.

Swap black and white colors in the SVG.

Add a background shape (circle, triangle, square, pentagon, hexagon) with configurable corner radius and padding.

Full history system supporting up to 50 states. Cmd/Ctrl+Z to undo, Cmd/Ctrl+Shift+Z to redo.

Combine two or more SVGs into a single layered composition. Select SVGs in the editor, then click the Overlay button to enter a dedicated workspace.

Click to select layers, drag to reposition, and use the scale slider (10–300%) and rotation controls to arrange each layer.

Add a background fill to any individual layer — choose from circle, square, or rounded square shapes with adjustable padding and color.

Control the stacking order of layers with Bring to Front, Move Forward, Move Backward, and Send to Back.

Full undo/redo history within overlay mode, separate from the main editor history.

Finalize the composition into a single merged SVG that can be edited further or exported directly.

Convert stroke-based SVGs to filled paths using Potrace bitmap tracing. Essential for FileMaker, which doesn't render strokes well in button icons.

The editor automatically detects stroke-based SVGs and surfaces the conversion option.

Optionally normalize SVG path commands (off by default).

Export as SVG (default output format).

Export as PNG with selectable size: 32, 64, 128, 256, 512, or 1024 px.

Save files to disk when running in browser mode. Multiple files are automatically bundled into a ZIP.

Copy SVG source code directly to the clipboard.

Export selected icons as a FileMaker button bar XML snippet. Available in both the Icon Library and the Editor. Supports up to 400 icons (50 per bar, multiple bars if needed). Requires the BaseElements Plugin from Goya.

Inspect the formatted SVG source code in a modal window.

Choose which SVGs to include in the export when multiple are loaded.

Send SVG data to FileMaker via PerformScript in FM mode.

Browse over 38,000 icons from eleven open-source libraries: Lucide, Tabler Icons, Heroicons, Phosphor Icons, Bootstrap Icons, Iconoir, Remix Icon, Fluent UI Icons, Material Design Icons, Ionicons, and IconPark.

Instantly search across all icon libraries as you type.

Narrow results to a specific library.

Filter icons by category, with 20 categories including arrows, communication, devices, and more.

Filter icons by style: outline, filled, or solid.

Use arrow keys to browse icons and Enter to select. Streamlines icon discovery without reaching for the mouse.

Select multiple icons with click, Shift+click for range selection, and Cmd/Ctrl+click to toggle individual icons.

Quickly select or deselect all visible icons in the current filtered view.

Preview all selected icons before exporting to verify your choices.

Download selected icons as SVG files.

Export selected icons directly to FileMaker via a script call.

Sidebar displays library counts and category counts that update dynamically as you search and filter.

Remembers your last-used filter settings (library, category, style) between sessions.

The editor detects whether it is running inside a FileMaker web viewer.

UI and behavior adapt depending on the runtime context.

Adds the fm_fill class for FileMaker dynamic color styling.

Remove fills so FileMaker can control icon colors at runtime.

Choose whether FileMaker controls the "icon" or "background" colors.

Exports Base64-encoded SVG data back to FileMaker via a script call.

Export selected icons as a FileMaker button bar XML snippet. Automatic stroke-to-fill conversion for outline icons, path normalization, and evenodd fill-rule conversion ensure FileMaker compatibility. A progress indicator is shown for large selections (10+ icons). Button bars support up to 400 icons across multiple bars (50 per bar). Requires the BaseElements Plugin from Goya.

Checks for the BaseElements Plugin before attempting button bar export, providing a clear message if the plugin is not installed.

External links now open in the default browser instead of inside the FileMaker web viewer.

Version updates trigger a FileMaker script to download and replace the editor file.

Configure the editor via initEditor() with output mode, theme, accent color, format, and size.

Toggle to automatically save or convert files when SVGs are loaded.

Theme, accent color, FM settings, preview background, and auto-convert are saved to localStorage.

Initialize with specific settings via the JavaScript API.

Checks the GitHub releases API on load (after a 2-second delay).

A banner is shown when a newer version is available.

View the full release history in a modal.

In FileMaker mode, one-click update via script.

Anonymous usage stats sent to proxy, rate-limited to once per 30 minutes.

Built-in bug report with full diagnostic data including editor state, SVG data, and browser info.

Shows Elemental product family information.

Cmd/Ctrl+Z undo, Cmd/Ctrl+Shift+Z redo, +/- zoom, Escape close modals.

"Buy me a Coffee" button linking to a donation page.

Adapts to viewport size with iOS safe area support.