SVGcinema

(Formerly Keyline.)

A browser-based SVG animation editor. You draw or import artwork, animate it on a keyframe timeline, and export one self-contained animated SVG (or any frame of it as a picture: see Export › Image). The SVG plays with a small JavaScript player (built in, or one shared player for pages with many animations: see The external player) or with pure CSS.

Getting started

npm install
npm run dev        # http://localhost:5173 with hot reload
npm test           # unit tests (Vitest)
npm run typecheck  # TypeScript, no emit
npm run build      # type-check + production build into dist/
npm run preview    # serve dist/ locally
tests/browser/run.sh  # browser tests (Playwright for Python), see tests/browser/README.md

Requires Node 18 or newer (developed on Node 22).

Project layout

index.html               App shell: panels, dialogs, menus (static markup)
src/
  main.ts                Entry point: loads CSS, then runs every module's init() in order
  styles/app.css         All styles and theme tokens (light and dark)

  runtime/engine.ts      The player that ships inside every exported SVG (typed, dependency-free)
  runtime/boot.ts        Starts an SVG exported with the external player (JSON + trigger)
  runtime/scrub.ts       Linked to scroll: the animation follows the page's scroll (self-contained)
  runtime/player.ts      The external player file (svgcinema-player on npm)

  core/
    constants.ts         Helpers ($, byId, rounding, escaping), property tables, icons, tool list
    state.ts             Editor state: the open document, selection, assets, id counters
    dom.ts               References to the main DOM elements
    history.ts           Undo/redo snapshots, setProp/toggleKey, selection, tool switching
    keyframes.ts         Keyframe clipboard, reverse, distribute, nudge, context menu
    layer-ops.ts         Convert to path (text to shapes), morph into another shape
    select-same.ts       Edit › Select same (fill, stroke, stroke width, font, kind)
    presets.ts           Animation presets and how they slot into existing keyframes
    symbols.ts           Symbols: instances sharing their contents, kept in step after each edit
    playback.ts          Editor preview playback loop

  model/
    tree.ts              Layer hierarchy (groups, bones), parent matrices
    filters.ts           Layer filters (blur, drop shadow) with animatable parameters
    pins.ts              Pin property keys and labels (Pin tool)
    mesh.ts              The triangle mesh pins bend images, text and groups through
    draw-order.ts        A rig's own draw order (artwork drawn apart from its bones)
    sample.ts            The sample scene

  geometry/
    nodes.ts             Path nodes, shape builders, splitting/equalizing for morphs
    parse-path.ts        SVG path-data parser (all commands including arcs)

  render/
    markup.ts            Layer → SVG markup (shared by the editor canvas and the exporter)
    text-layout.ts       Text line breaking ("Keep width" wrapping), measuring, direction, case, RTL order
    stage.ts             Canvas render, fit, per-frame update
    overlay.ts           Selection box, handles, motion paths, nodes, pen preview
    mesh.ts              Builds and refreshes meshes from the canvas, measures meshed layers

  tools/
    stage-input.ts       Canvas pointer handling
    bones.ts             Bone tool, forward kinematics, inverse kinematics (CCD)
    pins.ts              Pin tool and Edit pins tool
    edit-tools.ts        Move/scale/rotate/origin drags, text creation, node editing
    pen.ts               Pen, add/remove node, pencil; path hit-testing
    shapes.ts            Ellipse, rectangle, polygon, star, line
    hand.ts              Pan and zoom (hand tool, Space, wheel)

  ui/                    Panels and controls
    layers-panel.ts  timeline.ts  inspector.ts  easing.ts
    tools-rail.ts (tool groups and flyouts)  theme.ts (light/dark)  topbar.ts  file-menu.ts  keyboard.ts
    props-panel.ts (inspector sections)  align.ts (align bar, Set motion path)  font-picker.ts (the font list)  multi.ts (editing several layers)
    presets-panel.ts (the Presets window)  onion.ts (onion skin)  graph.ts (graph editor)
    symbols-ui.ts (editing a symbol, Assets ▸ Symbols, the Instance section)

  io/                    Files
    assets.ts            Image import (incl. TIFF/HEIC conversion), IndexedDB, asset panel
    svg-import.ts        Open an SVG as a project / add one to the project
    svg-convert.ts       SVG elements → editable layers (hierarchy, names, paint, text, masks)
    svg-paint.ts         Style cascade, colours, transforms, gradients for the importer
    embed.ts             The editable project inside an exported SVG (read back)
    svgator.ts           SVGator animations → keyframes (player data, settings)
    css-anim.ts          CSS keyframe animations (SVGator CSS exports and others) → the same
    zip.ts               Minimal zip writer/reader and the .SVGcinema builder
    save.ts  open.ts  guard.ts  file-state.ts   Save/Save as, open, unsaved-changes prompt
    recent.ts            Open recent (file handles, or stored copies)

  export/
    build.ts             Builds the exported SVG (JS player or CSS keyframes)
    dialog.ts            Export dialog controls
    sections.ts          Export dialog sections: collapse, remembered, summaries
    snippets.ts          Embed code for HTML, React, Next.js, Vue, Angular, Svelte
    size.ts              Output size (responsive/fixed, W/H/%)
    images.ts            Image optimization (resize for output size, format, quality)
    kind.ts              The Export window's picker: Animated SVG, Image…
    frames.ts            Still frames of the animation (from the JS export, out of sight)
    still.ts             Export › Image: one frame as PNG, JPEG, WebP, AVIF, JPEG XL or SVG
    video.ts             Export › Video: MP4, WebM or PNG frames (WebCodecs), progress and Cancel
    mux.ts               The MP4 and WebM files (and av1C from an AV1 stream), written by hand
    anim.ts              Export › GIF & Animated WebP: settings, the comparison, the set
    scrub-preview.ts     The Linked to scroll preview: a test page that scrolls
    anim.worker.ts       Makes the GIFs and Animated WebPs off the main thread
    gif.ts               The GIF encoder: palette, dithering, lossy LZW, changed pixels only
    webp-anim.ts         The Animated WebP file from still WebP frames
    encoder.worker.ts    WebP, AVIF and JPEG XL encoders (WebAssembly, in a worker)

  app/boot.ts            Startup: restore the last project, assets and file handle

tests/                   Vitest: runtime player and easing, zip container, path geometry, export output
site/                    The website (home, features, design agent, import, export, downloads, licence), see site/README.md

How the pieces fit

The runtime is embedded by serialising a function. export/build.ts writes CinEngine.toString() into each exported SVG.

• Keep it self-contained. src/runtime/engine.ts must not import anything or touch module scope.
• The test guards this. tests/engine.test.ts rebuilds the function from its source text and runs it.
• The build target protects it. Vite builds for ES2019, so the bundler never injects helper functions into it.

Modules have no side effects on import. Each module only defines functions and constants. Event listeners and other setup live in an exported init(), and src/main.ts calls the init() functions in a fixed order. This keeps the circular imports between UI modules safe.

Shared mutable state uses setters. ES module imports are read-only bindings, so replacing the open document goes through setDoc() and the canvas engine through setEng(). Other examples are setIdc(), nextAid() and setLastExport(). Reading doc anywhere always gives the current document.

The editor canvas renders the exact SVG that gets exported. render/markup.ts produces markup for both, and the canvas is animated by the same runtime that ships in the file. What you see while editing is what you get.

The sample scene

The editor opens with a sample scene (also under File → New → Open sample scene). It doubles as a tour of what SVGcinema can animate; select a layer to see how it's done:

• Sky: an animated linear gradient, night to dawn. Night sky: star shapes with an animated corner radius, a blink made of hold keyframes and an elastic pulse; Sparkle is a symbol with two instances sharing a pulsing dot, the second starting 0.15 s later; the group fades out.
• Sunrise: a group rising as one. Glow has a radial gradient, an animated blur filter and screen blending; Rays spin and scale; the Sun changes colour.
• Blob morphs between shapes with a custom easing curve. Comet follows a curved motion path and turns along it; Comet trail shows travelling dashes (an animated dash offset) that stretch and shrink (an animated dash pattern).
• Hills is a clipping group: the drifting Mist, which grows as it goes (an animated size) along an arc at an even speed, only shows inside the hill silhouette (the Clip path folder).
• Sprout is a bone rig: three bones carry the stalk, leaves and flower, and sway with follow-through; the top bone squashes and stretches as it swings. The Leaf is pinned: one pin holds its base while the other flutters its tip. The Tendril beside the stalk is bent by the rig: its pins follow the three bones. The rig has its own draw order: the Leaf hangs on the second bone but is drawn behind the Stalk.
• Flag: the Pole is a line whose end grows; the Pennant is a polygon with a gradient, a skew wave and an animated corner radius. The whole flag bends in the wind with pins, through a triangle mesh.
• Landscape: Horizon draws on with Trim path; Signature is a mask group (masking by brightness) whose gradient wipe reveals a line that links to this editor.
• Title slides and fades in with an animated drop shadow.

tests/sample.test.ts checks the scene keeps showing all of these.

Tools

Tool	Key	Notes
Select	V	Move, scale, rotate; Ctrl+click picks inside groups
Edit nodes	A	Drag nodes and handles; double-click toggles smooth/corner
Pen group		Hold or right-click the button for the flyout
Pen	P	Click = corner, drag = curve. While dragging: Alt breaks the handle, Shift snaps to 45°, Space moves the point. Click the first point to close; click the last point to drop its handle. Enter / Esc / Ctrl+click ends, Backspace removes the last point. On the selected path: hover a segment to add a node, a node to delete it, Alt+node to convert it, an open end to continue the path
Add node	+	Click a segment of the selected path (rectangles and ellipses convert to paths)
Remove node	−	Click a node of the selected path
Convert point	⇧C	Click a point: corner. Drag a point: smooth handles (Shift 45°). Drag a handle: moves it alone (cusp). Drag a segment: reshapes the curve. With the Pen, Alt does the same on points and handles
Pencil	N	Freehand; simplified and smoothed. End near the start to close
Shapes group
Ellipse	O	Shift = circle, Alt = from the centre
Rectangle	M	Shift = square, Alt = from the centre
Polygon		Drag from the centre; ↑/↓ while dragging changes the sides; Shift keeps it upright
Star		As polygon; ↑/↓ changes the points
Line	L	Shift = 45° steps, Alt = from the centre
Text	T
Bone group		Hold or right-click the button for the flyout
Bone tool	B	Drag to draw a bone; start on a bone tip to chain a child bone. New bones get a Rotate keyframe at 0 s holding the rest pose, so dragging a bone (or its tip, for IK) animates it. A bone's Scale works in the bone's own direction: W stretches along the bone, H across it
Edit bone	E	Edits the rest pose; keyframes stay as they are, and the bones show their rest pose while the tool is on (a chip says so). Drag a tip to change the bone's length and angle: bones chained on that tip follow it while their own tips stay put, and attached artwork doesn't move. Drag a joint to move it (a joint on its parent's tip moves that tip; Alt pulls the joint off it). Drag the bone to move it. Ctrl while dragging a tip turns the attached artwork with the bone. Shift snaps the angle to 15°; a tip snaps onto other bones' joints and tips

Drawing tools stay active after each shape, as in Adobe apps. Press V or Esc to go back to Select.

Main menu (☰, left of the logo): New project, Open, Open recent ▸ · Edit ▸ (undo, redo, cut, copy, paste, paste in place, duplicate, delete, select all, deselect all; keyframes when keyframes are selected; Select same ▸ fill, stroke, stroke width, font or kind of layer: every visible, unlocked layer sharing that value with the selected one, compared at the playhead, inside groups too) · Element ▸ (the right-click menu's layer commands: group, ungroup, delete, center origin, motion path, hyperlink, convert to path, export selection, booleans, masks, symbols, align, arrange, hide, lock, rotate, flip) · Animate ▸ (Presets…, then the properties the selection can animate, with their ⇧ keys) · Save, Save as, Import files, Export · View ▸ (zoom, rulers, guides, grids, snapping, bones, pins, onion skin, collapse sections, dark theme; ticks show what is on) · Help ▸ (keyboard shortcuts, open the sample scene, spell check (on by default; it uses the browser's own spell check, which the page can't switch on, so turning it on reminds you where the browser's setting is), the website when the editor runs from the site's editor/ folder, and About SVGcinema: the version from package.json, the build's commit and when it was built (date and time, in your time zone), the copyright and licence from LICENSE in short and in full, and the open-source parts). Submenus open on hover or click and follow the selection (one with nothing to do greys out and opens nothing), deeper levels too (Element › Set motion path ›); a submenu stays inside the window, moving up or opening to the left when it must, and scrolls only when it is taller than the window; it is placed against the window, so even then the next level flies out beside it. A submenu stays open until the pointer settles on another item of the same list (a short delay), so crossing the gap, a scrollbar or a corner of a neighbouring item never closes it. The arrow keys, Enter and Esc work throughout. Every item shows its shortcut.

Selecting on the canvas: click a layer (the outermost one; Ctrl+click picks inside a group, Shift+click adds or removes). Drag from an empty spot for a marquee: every top-level layer it touches is selected when you let go (each gets a dashed outline while you drag); Shift adds them to the selection or takes them out, Ctrl picks the shapes inside groups. A click on an empty spot deselects. Alt+drag a layer drags a copy, leaving the original (one undo step). Ctrl+A selects every top-level layer that is shown and unlocked (every keyframe while you work in the timeline); Ctrl+Shift+A deselects.

Keyboard shortcuts (F1, the keyboard button in the top bar, or Help › Keyboard shortcuts) lists every shortcut in five tabs that follow the main menu, each in titled sections: General (File, Edit, Help), Layers (Select, Organise, Transform, Colour), Tools (Tools, Drawing, Bones and pins), Animation (Playback, Keyframes, Easing, Animate a property) and View (Zoom, Pan, Panels, Show and hide). The search box looks across all of them and says where each hit lives; the tool and Animate keys come from the real bindings, and on a Mac Ctrl and Alt show as ⌘ and ⌥. Letter shortcuts go by the physical key, so they work on any keyboard layout (Ctrl+Z is undo with a Hebrew or Russian layout too). Besides the ones below: Ctrl+H hides or shows the selection, Ctrl+↑ / ↓ bring forward / send backward (with Shift: to the front / back), Ctrl+X cuts the selected keyframes, Shift+Space stops and goes back to the start, I / Alt+I pick the fill / stroke colour from the screen (browsers with an eyedropper), / closes or opens every inspector section, Alt+G turns the front grid on or off, Alt+O the onion skin, and Ctrl+scroll over the timeline zooms it around the pointer.

The interface's own text (labels, menus, the layer list) can't be highlighted, so a stray drag or Select all never paints it; fields, text you type and code views can be selected as usual.

Zoom: click the percentage at the bottom of the work area for a menu with a slider (2%–3200%), a typed value, Fit selection (2), Fit (1), Zoom 100% (0), Zoom in (Ctrl +) and Zoom out (Ctrl −). The − / + buttons beside it step the zoom; Ctrl+wheel zooms at the pointer.

Layers panel tree: dotted lines join each group to its children, so nesting is easy to follow. Search (above the tree) shows the layers whose name contains what you type, inside their groups, with the match marked and counted; Enter selects every match, ↓ moves into the list, Esc clears it. Double-click a layer's name to rename it (Enter keeps the new name, Esc cancels); the same works on a layer's name in the timeline. Layers that a mask or clip folder applies to show a small hook before their icon (hover it for which folder), and the folder itself carries a mask badge.

Layers panel actions grey out when they don't apply:

• The top bar, left to right:
  • Move layer up (Ctrl+]) and Move layer down (Ctrl+[).
  • Duplicate (Ctrl+D).
  • Ungroup (Ctrl+Shift+G).
  • Group (Ctrl+G); with nothing selected it adds an empty group.
  • Release mask: on a selected mask or clipping group, puts its layers back.
  • Create mask: with two or more layers selected, the top one masks the others (as in the right-click menu).
  • Delete.
• At the bottom: the layer count ("1 of 9 selected"). Animate (in the timeline header, after the time) opens a menu of the properties the selected layers can animate. Picking one adds a keyframe at the playhead. Shortcuts: Shift+P position, Shift+A origin, Shift+S scale, Shift+R rotate, Shift+X skew, Shift+O opacity, Shift+B stroke color, Shift+W stroke width, Shift+D trim end (draw on), Shift+F dash offset, Shift+M morph. Fill color, fill opacity, stroke opacity, dash pattern, size and corner radius have no shortcut (Shift+C is the Convert Point tool).

Light and dark theme: the editor follows the system setting until you pick one with the half-circle button in the top bar, right of Keyboard shortcuts; the choice is remembered. Numbers use the UI font with tabular digits, so zeros stay open and columns still line up.

Work area: the artboard shows the project name and canvas size above its top-left corner. The ? at the bottom left shows the current tool's tips on hover (or when focused); with rulers on it moves clear of the left ruler. The timeline shows the current time and the total length (0:01.50 / 0:03.00), and the playhead carries a time flag in the ruler.

Inspector (properties of the selected layer):

• Header: the layer's name (click to rename) and type.

• Sections open and close: click a section's heading (or its chevron). Closed sections stay closed for every layer and after a reload.

• Hyperlink (the last section; not on bones): a link address, and once there is one, whether it opens in a new tab or the same tab. Clicking the layer in the exported SVG opens it; web addresses (https:// is added when missing), mailto:, tel: and #anchors only. Clearing the field removes the link. Element › Hyperlink… edits the same link.

• Help as tooltips: a section's explanation sits behind an ⓘ at the end of its title (Pins, Motion path, Morph, Star / Polygon, Line, Group, Instance, Bone, several layers), of a sub-heading (Trim path) or of a label (Mask by, Time offset, Key whole rig, Own draw order, Inherit scale, a bone's Scale); hover it, or focus it with Tab. An imported element that SVGcinema kept as it is shows a warning saying what it is and what can still change.

• Order: a symbol instance's Instance section first, then the layer's own section (its shape: Rectangle, Ellipse, Path, Polygon / Star, Line; or Text, Image, Group, Imported element, Bone), then Transforms, Pins, Motion path, Text appearance, Fill & stroke, Appearance and Filters, with Morph and Rig last. Sections a layer doesn't have are left out.

• Keyframe toggles: every animatable property has its own row and its own ◆, so colour and opacity, for example, animate separately. The ◆ shows three states, explained in the Transforms heading: a grey outline when the property isn't animated, amber with an amber label when it is, and filled amber when there is a keyframe at the playhead. Click it to add or remove the keyframe at the playhead. New keyframes ease Linear (change it in the Keyframe panel).

• Align bar at the top: align left / centre / right / top / middle / bottom, distribute horizontally / vertically. One layer aligns to the canvas, several align to each other; distributing needs three or more. Below it, the boolean operations (union, subtract, intersect, exclude) for two or more shapes or paths (with fewer selected they grey out, and their tooltip says what they need), then, after a hairline, flip horizontal / vertical and rotate 90° right / left (as in the right-click menu).

Typing text: double-click a text on the canvas (or click it with the Text tool) to type in place. The real text stays visible with all its styles while you type; the panel's text box updates the canvas live too. While typing, the box has a handle on each side: drag one to set the width (Keep width turns on and lines wrap). When the text is only selected, its handles scale it like any layer. Space types a space while you edit. Esc, Ctrl+Enter or clicking away finishes. With the Text tool, click for text that grows as you type, or drag to draw a box of fixed width whose lines wrap.

Right-click menu (on the canvas or in the Layers panel):

• Copy / Paste: Cut, Copy, Paste, Paste in place, Duplicate.
• Layer commands: Group, Ungroup, Delete, Center origin, Animate, Set motion path, Hyperlink, Convert to path (Convert to shapes for text), Export selection.
• Masks: Create clipping path, Create mask, Release mask.
• Placement: Align, Arrange, Lock, Rotate 90°, Flip horizontal / vertical.

Shortcuts: Ctrl X / C / V, Ctrl ⇧ V (paste in place), Ctrl ⇧ O (center origin), Ctrl ⇧ P (convert to path), Ctrl ⇧ E (export selection), Ctrl L (lock), Ctrl ⇧ ] / [ (bring to front / send to back). Ctrl C / V copy keyframes when keyframes are selected, and layers otherwise.

Editing several layers: on the canvas, one transform box around the whole selection (each layer's own box dashed inside it): its side and corner handles scale every layer from the opposite side (Shift keeps proportions, Alt scales from the centre), and its rotate handle turns them all around the box's centre (Shift: 15° steps). Dragging any of the selected layers, or anywhere inside the box (even over another layer), moves them all together, snapping the whole box (Shift: one direction, Ctrl: no snapping, Alt: drag copies); a click without dragging on another layer inside the box selects that layer. Each is one undo step; layers that are animated get a keyframe at the playhead. In the Inspector, the selection's section starts with the box around the selection: Position (X / Y) moves every layer with it, and Size (W / H, keeping proportions unless the link is off) scales them all from the box's top-left corner (their origins move and their Scale grows); layers that are animated get a keyframe at the playhead. Below it, with more than one layer selected, the inspector shows only the properties all of them have (transform, opacity, fill & stroke and stroke style when they are all shapes, compositing). A value they share is shown; one that differs reads Mixed, and a colour swatch shows •••. Typing a value, dragging a field's label, picking a colour, a toggle or the ◆ applies to every selected layer, as one undo step; for X / Y pairs each layer keeps its other value.

Animation presets (Animate ▸ Presets… in the timeline header or the main menu): ready-made animations for the selected layers, starting at the playhead. Groups: Entrances (fade in, slide up / down / left / right, pop in, zoom in, drop in, rotate in, flip in, elastic in, spiral in, skew in, unfold), Exits (the same, out; fold for unfold), Emphasis (pulse, pop, wiggle, shake, spin, swing, blink, heartbeat, bounce, rubber band, jello, tada, float, flicker, head shake, breathe, wobble, squash, glitch), Strokes (draw on, erase, travel, draw from middle, stroke pulse, undraw: shapes and paths), Colour (flash, dim, stroke flash, colour pulse) and Filters (blur in, blur out, glow pulse, shadow lift, soft focus; they add the blur or shadow they need, and play in JS exports only: a CSS export keeps filters still, so they carry a JS badge). Only the presets that fit the selection are listed. Each tile plays its preset on a small shape and names the tracks it animates (e.g. Position · Opacity). A preset writes keyframes only for the properties it animates and only inside its span, replacing any keyframes of those properties already there: entrances end on the value the layer already has, exits start from it, emphasis starts and ends on it, so presets slot into an existing animation. Hovering a tile previews it on the timeline (its span shaded on each layer, the keyframes it would replace outlined in red); the line beside Apply says the same in words (how many keyframes it replaces, in red). Length (each preset has its own default), Stagger (several layers start one after another) and Strength (how far it moves, grows or turns) adjust it. Double-click a tile, or Apply, to use it: one undo step, and the toast says how many keyframes it replaced, with an Undo button. A preset that runs past the end lengthens the animation.

Graph editor (the timeline bar's Graph button): one track opens into a value graph across time, under the playhead and keyframes like the rest of the timeline. It shows the selected keyframe's track, else the selected layer's first number track; click another property's name to graph that one. Number properties only (opacity, rotation, stroke width, trim, filter amounts…, and points such as position, scale or size, drawn as X and Y curves in two colours); colours, gradients, dash patterns and morphs have no graph, and their names say so. Drag a key to change its value and time (Shift keeps the drag to one direction), with the time and value shown as you drag. The selected segment (after the selected keyframe, or under the playhead) shows its easing handles: dragging one makes a custom cubic-bezier, shared by X and Y. Beside the graph, the property's values at the playhead (they follow it); click a key, then the Easing button, for the easing presets. One undo step per change.

Onion skin (the timeline bar's Onion skin button, View ▸ Onion skin, Alt+O): outlines of the selected layers a few steps before (blue) and after (red) the playhead, fading with distance. The arrow beside the button sets how many frames before and after, the time between them and the strength of the nearest ones (remembered in this browser). The ghosts are drawn only on the canvas, never exported, and hidden while playing.

Symbols: reusable artwork whose instances share their contents. Element ▸ Make symbol turns the selected group (or a new group of the selected layers) into a symbol; Duplicate (Ctrl+D) or Alt+drag an instance for more, or click the symbol in Assets ▸ Symbols (a card per symbol with a live thumbnail and its instance count; double-click the name to rename it, ✎ to edit it, × to delete it, which asks first when it has instances and leaves them as plain groups). Instances are marked in the Layers panel (the symbol icon and ×N) and in the inspector (Symbol · N instances). Each instance has its own transform, opacity and keyframes; shapes, styles and the contents' animation are shared. Editing a symbol: double-click an instance (or Element ▸ Edit symbol, or Edit symbol in the inspector): the rest of the scene dims and can't be picked, the other instances show as dashed outlines, and a chip on the canvas names the symbol with Done (Esc, or a double-click on an empty spot). A change there reaches every instance (one undo step). The inspector's Instance section has a Time offset (this instance's contents start later), Edit symbol and Detach instance (it becomes a plain group). The JS export writes each instance's contents once and the other instances with the same time offset as <use> of them, which the player animates for all; the CSS export, and offset instances, are written out in full.

Masks: select two or more layers, then choose Create mask. The top layer goes into a Masks folder inside a new Mask group, and the other layers show only where the mask is.

• Masks work by opacity, so soft and semi-transparent masks behave as expected. Mask by (in the mask group's Group section) switches to Brightness: the mask shows the layers where it is light, white fully and black not at all, as SVG masks do.
• A clipping path uses only the mask's shape.
• Mask layers stay normal layers: select them in the Layers panel to move, edit or animate them. A drag inside the selection box moves them even though they aren't drawn.

Boolean operations (second row of the align bar, or right-click ▸ Boolean): select two or more shapes or paths.

• Union combines them.
• Subtract cuts the upper ones out of the bottom one.
• Intersect keeps only the overlap.
• Exclude keeps where they don't overlap.

They're combined as they look at the playhead into one new path, which takes the bottom layer's place and style. Undo restores the originals.

Posing a rig: with Key whole rig on (the default; it sits in the Bone section of the rig's top bone), dragging any bone (FK, IK or Scale bone) keys every bone of the rig at the playhead, so each pose is stored whole. The new keys hold the values the bones already had there, and the easing they split is split with them, so nothing else in the animation changes. Turn it off for overlapping action (only the bone you drag is keyed). Turning it on for a rig whose poses have keys on some bones only offers to Add keys: every bone gets a key at each of the rig's key times, again without changing the motion; turning it on and adding the keys is one undo step. In the timeline, the top bone has a Pose row with a diamond at every time any bone of the rig has a key: click one to select all of them, drag to retime the pose, Delete to remove it.

Bending with pins: each pin pulls the path's nodes (and their handles) with it, nearer nodes more than far ones; a pin can also turn, bending the path around it. A pin that doesn't move holds the path in place. The Pins section of the inspector has a button per pin; the rows below it edit the selected pin: Position and Rotation, each with its own ◆, and Reach, how far every pin of the path pulls (100% by default). Remove pin and Remove all pins take them off (the path keeps its rest shape). In the timeline each pin has its own rows (Pin 2, Pin 2 · Rotation). Both exports bend the path: the JS player computes it, and the CSS export animates the path's shape with SMIL, as for morphs.

A rig's own draw order: nesting decides stacking, so a part can't normally sit behind its parent's artwork (a far arm behind the torso while it hangs on the torso's bone). Turn on Own draw order in the Bone section of the rig's top bone: a list of the artwork attached to the rig's bones appears, front at the top, starting in the order nesting draws it. Reorder it with the arrows or by dragging a row; the canvas and both exports draw the artwork in that order, each piece still moving with its bone (the Edit bone tool's rest pose too). Turning it off goes back to nesting. Artwork attached to the rig later goes in front. The order is not animated.

Pins that follow bones (Pin tool › Bind to bones) sit at a bone's joint and move and turn with the bone, so a rig bends a sleeve, a tail or a vine without keyframing the pins: the Pins section names the bone instead of Position and Rotation. Both exports follow the rig: the JS player works out where the bone is each frame, and the CSS export bakes the result like any other bend.

Pins on images, text and groups bend them through a triangle mesh, which the Pin tool draws over the artwork. The mesh is an even lattice of equilateral triangles laid over the content (and everywhere content inside a group moves during the animation, plus room for strokes and filters); triangles with nothing in them are left out, and the mesh is rebuilt by itself when the content changes. Each triangle shows the artwork clipped to it and moves it by the affine map its three corners give, so gradients, filters and text bend too and text stays editable. Mesh in the Pins section sets the density (it shows how many triangles the mesh has): a denser mesh bends more smoothly and costs more. The JS export computes the triangles every frame; the CSS export moves each one with SMIL, which stores every frame, so the Export dialog offers Use JavaScript when that is much smaller (it does the same for morphs). With the hover trigger, CSS mode animates the triangles with CSS, where faint seams can show between them in Chrome, and content inside a pinned group keeps playing when the pointer leaves. A pinned group's layers can't be picked on the canvas (use the Layers panel).

Snapping, grid, rulers and guides (the magnet and grid buttons in the canvas bar):

• Snapping (Alt+S turns it on or off) works while moving and drawing. It can snap to objects (the edges and centres of other layers and of the canvas), to points (path nodes), to guides, to the grid, and to whole pixels. Matches show as magenta lines, and holding Ctrl/Cmd skips snapping.
• Grid: a back grid sits behind the artwork and a front grid over it. The grid size is set in the grid menu.
• Rulers (Alt+R): drag from a ruler to make a guide.
• Show bones (Alt+B) shows or hides bones on the canvas, together with a dotted link from a bone to each bone bound to it with the Bind tool, from the parent bone's joint (its start) to the bound bone's joint. A bone that starts on its parent's tip (a connected chain) needs no link. The links are only a guide on the canvas: they are never exported.
• Show pins (Alt+P, on by default) shows every pinned layer's pins outside the Pin tools: the selected layer's at full size, the others smaller and fainter; pins bound to a bone are red. With the Select tool, the selected layer's pins work as with the Pin tool, everything but adding pins: the mesh and rest marks show, drag a pin to bend (keyed at the playhead), drag the selected pin's ring to turn it, Alt+drag to move it at rest, and Delete right after picking a pin removes it (otherwise Delete is the layer's). Another layer's pin is picked with a click (selecting that layer) or dragged. A bound pin is only picked, since its bone moves it. Adding pins stays with the Pin tool, and Edit nodes shows none (it shows the rest shape). In the Pin tools the other layers' pins show for reference only. Pins are drawn on top of the selection box, so on a small layer they win over its handles. Off: pins show only with the Pin tools, as before.
• Guides (Alt+L shows or hides them): drag a guide to move it, or drop it on a ruler to remove it. Clear guides removes them all.

The guides are saved with the project; the other view settings are remembered in this browser.

Hyperlink: gives a layer a link (web address, mailto:, tel: or #anchor) that opens in a new tab or the same one. Clicking the layer in the exported SVG follows it.

Timeline follows the selection: selecting a layer (on the canvas, in the Layers panel or anywhere else) scrolls the timeline so its row and its property rows are in view; a layer already in view leaves the timeline where it is.

Timeline height: drag the timeline's top edge up or down. At its smallest it shows just the controls and the time ruler; at its largest it leaves a strip of the work area. The height is remembered in this browser; double-click the edge for the default height. With the edge focused, ↑/↓ resize it by 16px (Shift: 64px), Page Up / Page Down go to the largest / smallest, Home to the default. Resizing keeps the canvas zoom percentage and leaves the artwork where it is on screen; only in the fit view (Fit, 1) is the artboard fitted to the new size.

Timeline header: play controls, the time and the length field, then Easing and Animate, and on the right Graph, Onion skin and the zoom. Easing (the curve-with-handles button) is greyed out until keyframes are selected; clicking it opens the Easing panel on the left side of the window, just above the timeline (it covers little of the canvas): the keyframe's time, In / Out / In-Out, the easing presets 3 across (Linear, Ease, Hold, Basic, Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, Bounce, and your own), the curve editor (drag its two handles for a custom curve; its range fits overshooting curves such as Back and Elastic, and handles dragged past 0 or 1), Use on whole animator and Delete key; under the presets, Save as preset for a custom curve (or Remove preset for one of this project's). It follows the keyframe selection while open and closes with the button, Esc or a click elsewhere. Snap keyframes (dragged keyframes snap to the playhead, other keyframes and 0.05 s steps; Shift inverts) is in the canvas's snapping menu, on by default and separate from Enable snapping.

Timeline length: the timeline always fills its panel, past the end of the animation (that part is shaded). The white line marks the end: drag it to change the length (it snaps to 0.05s; Shift for 0.01s) and a tag shows the length while you drag. The length field (the total after the time in the timeline header, / 0:03.00) follows along; click it to type a length, in seconds (4, 2.5) or as a time (0:02.50): Enter applies, Esc puts it back, ↑ / ↓ and dragging work too. With the end line focused, ←/→ change the length by 0.1s (Shift: 1s).

Selecting in the timeline: click a layer's name to select it; Ctrl/Cmd+click adds or removes a layer, Shift+click selects the run of layers up to it. Clicking a track's title (Position, Fill…) selects all its keyframes (with Ctrl or Shift, adds them to the ones selected). With several layers selected, a track's ◆ adds (or removes) the keyframe at the playhead on every selected layer that has the property. Picking a track, a keyframe or a new track from Animate scrolls the Inspector to that property's row (opening its section) and highlights it.

Freezing a track: hover a property row in the timeline and click the snowflake, left of the property name. The track keeps its keyframes but stops using them: the property holds the value it had at the playhead, the row and its keyframes turn grey, no keyframes can be added, and exports leave it out. Editing the property meanwhile changes the held value. Click the snowflake again to unfreeze and go back to the keyframes.

Moving keyframes: with two or more position keyframes selected in the timeline (or one at the playhead), dragging the layer or using the arrow keys on the canvas moves all of them together (select them all to move the whole motion path). A single key selected at another time, such as the one Animate makes and selects, doesn't count: moving the layer keys its position at the playhead. Arrow keys pressed while working in the timeline still move the selected keyframes in time.

Web fonts in exports: Google Fonts are converted to outlines by default (no font download, identical everywhere, also inside <img>). Embed font instead keeps live, selectable text and embeds only the alphabets the text uses, which is smaller for long text. Hebrew is drawn in its right-to-left order; Arabic-script text is always embedded so its letters join. Fonts from this computer are converted or embedded the same way once the browser has shared them (embedding includes the whole font file); otherwise the SVG only names the font.

Design agent

Click Agent in the top bar (Alt A) to open a chat docked on the right. Describe what you want, for example “draw a cartoon rocket and make it launch”, and the agent draws, edits and animates in this project with the editor's own tools: shapes and SVG artwork, layer edits, groups, presets, keyframes, shape morphing (Morph keyframes written as SVG path data; a rectangle, ellipse or star becomes a plain path) and the project settings. Its steps are listed as it works, and each request is one undo step: Undo, or Undo this request under its answer, rolls the whole request back.

• Two ways to connect: the first open asks how: your own API key (the chat in this panel) or your AI assistant (no key). Switch any time under Settings › How you connect.
• Your own key: choosing it asks which service to connect: OpenRouter (recommended: one key for many models), OpenAI, Anthropic, Google Gemini, Groq, or Custom (any OpenAI-compatible address, with a model name; a local server may need no key). Paste your API key in Settings and press Test to check that the service is reachable from the page, knows the model and can use tools. Requests use your own credit with that provider.
• Images and vector: the agent can also make pictures with an image model (Settings › Images: OpenRouter, OpenAI, Gemini or a Custom OpenAI-compatible service; OpenRouter, OpenAI and Gemini use the agent's key when they are also its provider, another service takes its own key) and place them on the canvas. They are ordinary assets, like a dropped-in file. Transparent background asks for one; when a model can't make it, the agent asks for a flat green background and SVGcinema removes it. Prefer vector when parts move has the agent draw artwork whose parts move separately as SVG layers instead. Vector is Drawn by the agent (it writes the SVG) or a vector model (Recraft through OpenRouter, or a Custom service), whose SVG comes in as editable layers. OpenRouter's model list is read live, so new models appear by themselves.
• Vector or image? When a request doesn't say or imply which (no "photo", "PNG", "logo", no parts that must move), Prefer vector on makes it as vector. With it off, the agent asks on a card: Vector | Image with what each gives and costs ("free" when the agent draws the vector), Vector picked first, for that request only (there is no Don't ask again, and it asks even when Ask first is off).
• Make it as an image instead sits under vector the agent made, while that request is the latest and untouched. It opens a card first: the vector's prompt (editable), the image's model and cost, and which animation won't carry over (animation on parts; a picture moves as one piece) and which is kept. Keep vector leaves everything as it was; Generate image undoes the vector request and redoes it as an image without asking again. That is one undo step: Undo brings the vector back.
• Prices in the menus: Settings shows each model's price next to it: chat models per million tokens (input · output), image and vector models about how much one 1024 × 1024 image costs. They come from OpenRouter's public price list (cached for a day); other providers' models are looked up under their names there, and a model the list doesn't have shows no price.

Your AI assistant (no API key)

Use the AI assistant you already pay for, such as Claude in Chrome or any assistant that can run scripts on web pages, to edit the open project with its own subscription. You chat with it in its own window; the Agent panel shows what it does.

• How to connect: the panel lists the steps: open your assistant in the SVGcinema tab, and start with the message it gives (Copy): “Edit my animation in this tab with SVGcinema’s tools: run window.svgcinema.help() and follow it. Then: …”. With Claude, Download the skill once (a svgcinema skill folder to add in Claude's settings) and just ask. The same svgcinema-skill.zip is in the site's downloads/ folder (written by npm run build from src/agent/skill.ts), for the website's Downloads page.
• window.svgcinema is the editing API for assistants: help() (a plain-text guide: how to work, the rules and every tool with its arguments, following your current settings), tools(name?), start({ task, assistant }), await call(tool, args), await batch([{ name, args }, …]) and done(summary). The tools are the design agent's own (shapes, SVG artwork, layers, presets, keyframes, shape morphing, project settings); a refusal comes back as { error } with the reason. Guide for AI assistants (in Settings, and on the connect screen) opens the same guide, for assistants that read it from a page.
• In the panel: the assistant's name and its steps as it works (“Working · 4 steps so far · one undo step”), Stop (what it did is kept; its next call is refused until it starts again) and Undo. Editing is paused while it works, so everything from start() to done() (or Stop, or 90 seconds without a call) is one undo step. Earlier sessions fold to one line. Deleting layers asks you in the panel (Settings › Ask first).
• Images (Settings, or the menu on the connect screen): Your assistant’s own (the default): it makes the picture with its own tools and hands it over as data or a web address (add_image); if it can't hand it over, the panel shows a drop card: save the image from the assistant's chat and drop it in, paste it (Ctrl V) or choose the file, or Draw vector instead; if it can't make pictures it draws vector shapes. Your image key: the image model of the API key settings, with your credit, asking first with the price; it can only be picked once an image model is set up there (until then it is greyed out, with Set one up in API key ›; once set up it shows the service, model and price, with Change ›). Vector shapes only: no pictures.

Opening and importing SVG

Open… (Ctrl O) also opens .svg files: the SVG becomes a new project with its canvas (viewBox), its title as the project name, and its artwork as editable layers. It isn't saved yet (Save makes a .SVGcinema file). Import files…, dropping an SVG on the canvas, pasting SVG markup and placing an SVG from Assets read the file the same way into the current project, inside a group named after the file (the project's canvas and settings stay).

• Layers: groups keep their hierarchy, order and names (SVGator names, Inkscape labels, data-name, meaningful ids; other layers are named by kind, e.g. Rectangle 1).
• Transforms become position, rotate, skew and scale; each layer's origin goes to the middle of what it draws.
• Shapes stay shapes (rectangles keep their corner radius, circles become ellipses, polygons, polylines and lines become paths) with their fill, stroke, opacities, dashes, line ends and joins, all editable. Colours from stylesheets (<style> classes) and inherited from groups are resolved. Linear and radial gradients (user-space or box units, transformed or not) become editable gradients.
• Text stays text: lines (tspans one under another) become one text with its line height; lines placed apart become a group of texts. SVGator's embedded fonts map to the same Google Font (e.g. Roboto).
• Images embedded in the file go to Assets and become image layers (sized as the browser draws them).
• Clip paths and masks become clipping and mask groups (SVG masks mask by brightness).
• Filters: a blur or a drop shadow becomes an editable filter; other filters, patterns, markers and text on a path are kept as they are. Anything that couldn't be made editable is listed in a short report after the import.

Open recent lists the last 8 projects you opened or saved, newest first, with when. In Chrome and Edge an entry opens the file itself (the browser may ask for permission again; a file that was moved or deleted drops off the list). Elsewhere, where the browser can't reopen files, it keeps a copy of the project as it was when last opened or saved (the newest 4 copies), and Save then writes a new file. The list stays in this browser; Clear the list empties it.

File names in any language: the project name (Hebrew, Russian, Japanese…) is used as typed for the .SVGcinema file and the exported .svg; only the characters file systems refuse (\ / : * ? " < > |) are left out. Code identifiers (component names in the embed code) still use a plain Latin form.

The Export window: the options sit in sections that collapse like the inspector's: Format (JavaScript or CSS only, the player, and a folded-away note on what each supports), Playback (trigger, what happens when it ends, repeat, direction, after the end, speed and frame rate, less motion), Size (responsive or fixed, dimensions, scale, largest width), Images and Text (only when the canvas has images or web / local fonts) and Advanced (element IDs, ID prefix, the editable project), which starts closed. A closed section shows a one-line summary of its settings, and the sections you close stay closed (remembered in this browser). Only the options column scrolls: the preview, the file size and the Copy / Download buttons stay in view.

Export › Image: the picker at the top of the Export window (Animated SVG · Image · Video · GIF & Animated WebP) switches what it makes. Image saves one frame of the animation as a picture: the frame under the playhead. The playhead under the preview is the editor's own: drag it, type a time, or step one frame (1/30 s) with the arrows, and the editor's playhead moves with it.

• Formats: PNG (lossless), JPEG, WebP, AVIF, JPEG XL and SVG (the frame as still vector markup, no script). PNG and JPEG come from the browser; WebP, AVIF and JPEG XL from the official libraries (libwebp, libavif, libjxl) compiled to WebAssembly, loaded the first time they're used and run in a worker, so every format works in every browser. JPEG XL carries a note: not every browser shows it yet (Safari does, Chrome from version 155, Firefox not), so the preview shows it as PNG where it can't.
• Quality (JPEG, WebP, AVIF, JPEG XL), Lossless (WebP, AVIF, JPEG XL) and Encoding (AVIF and JPEG XL: Faster, Balanced or Smallest) show only for the formats that have them.
• Size: 1×, 2× (the default) or 3× the canvas, or a size typed in (Custom; proportions kept unless the link is off). The still SVG is Responsive or Fixed instead.
• Background: Transparent, the Document's background, or a Colour. JPEG has no transparency, so Transparent isn't offered.
• The preview is the encoded file itself (Fit or Actual size), with its time, size and format; the footer shows the file's real size, Copy image (as PNG, the format pictures are pasted in; Copy SVG code for SVG) and Download.
• Embed in your site: a plain <img> for PNG, JPEG and SVG; for WebP, AVIF and JPEG XL a <picture> that lists the newer formats first with PNG as the fallback. 2× versions for high-density screens and the fallbacks are ticked by default; Download the set (.zip) makes every file the code names.
• The frames are drawn from the same SVG the JavaScript export writes (text as outlines, images embedded), so they show what the exported animation shows. The settings are kept with the project, and the window opens on the kind used last.

Export › Video makes the animation into a video file, every frame drawn exactly and encoded by the browser's own encoder (WebCodecs), faster than real time; the files are written by SVGcinema itself (no video library).

• File: MP4 (H.264: plays everywhere), WebM (VP9, or AV1 for the smallest files) or PNG frames (one PNG per frame in a .zip, for video editors). Codecs this browser can't encode aren't offered.
• Timing: the whole animation or a part of it (from – to), at 24, 25, 30, 50 or 60 fps.
• Size: the document's size, 720p, 1080p, square, portrait 4:5 or story 9:16 (or a typed size); when the shape differs from the animation's, Fit (bars in the background colour) or Fill (cropped). Transparent background for WebM VP9 (where the browser's encoder keeps alpha) and PNG frames; otherwise a background colour (the document's by default).
• Compression: aim for a Quality (a number, 0–100: the encoder's quantizer where the browser supports it, else a bitrate worked out from it), a File size (MB at most) or a Bitrate (Mbit/s); keyframe spacing; MP4 puts its index first so it starts playing while it downloads. WebM files carry their duration and cues, so they seek properly.
• The preview is the animation in the video's frame, with the shared playhead (drag it, or Play the part) and the output, frame rate, frame count and length. The footer shows an estimate until the file is made, then its real size.
• While it encodes the options are locked, the preview shows each frame as it's encoded, and the footer shows the progress, the size so far, the time left and Cancel.
• Embed in your site: a muted, looping <video> (autoplay muted loop playsinline) with WebM and MP4 sources and a poster image; Export the set (.zip) makes them all.

Export › GIF & Animated WebP makes an animated image for places that don't play SVG or video: email, chat apps, docs. Both encoders run in a worker on frames drawn exactly; the GIF encoder is SVGcinema's own (no library), the WebP frames come from libwebp.

• File: GIF (plays everywhere, at most 256 colours per frame) or Animated WebP (full colour and transparency, much smaller; every current browser, but most email apps don't show it).
• Frames: the whole animation or a part of it (from – to), at 10–50 fps; repeat forever, once, or 2–3 times; frames that don't change are merged (the one before shows longer).
• Size: 50%, 75%, 100% or 2× of the document.
• GIF compression: Colours (any number from 2 to 256); one palette for all frames or one per frame; Pick colours Faster or Best (refined); Keep exact: the document's colours you tick always get a palette slot, so brand colours and text stay exact; Dithering None, Diffusion, Pattern or Noise, with a Strength (the dots stay still where the picture doesn't change, so they don't shimmer); Noise reduction (smooths grain before the colours are picked); Lossy (allows small errors for a smaller file); Store only the pixels that change with a Tolerance; Transparent background with an Edge colour that soft edges are blended with.
• Animated WebP compression: Quality or Lossless, store only the pixels that change, transparent background.
• The preview is made from the real file each time a setting changes: its size and how much smaller it is than a plain GIF of the same frames (256 colours, full dithering, every frame stored whole), and the frame at the playhead next to the original with a divider to drag (Fit, 100% or 200%). The playhead's track has a tick per frame; Play plays the file itself.
• Embed in your site: a GIF as a plain <img>; an Animated WebP in a <picture> with a GIF behind it for email and older apps. Download the set (.zip) makes both.

Linked to scroll (Playback › Starts, JavaScript export): the animation follows the page's scroll instead of playing on its own. Scrolling down plays it and scrolling back plays it backwards; Repeat, Direction, After the end and Speed don't apply and are hidden.

• Plays: while it crosses the window (from its top entering at the bottom to its bottom leaving at the top), while it scrolls in, until centred, while it scrolls out, from the centre, or Custom: which edge of the SVG (top, centre or bottom) starts and ends it, and where in the window (% from the top).
• Smoothing (0–1 s, 0.3 s by default) lets the animation glide after the scroll instead of jumping with each mouse-wheel step.
• The preview is a small test page with the animation in it: scroll it to try it. Dashed lines show where in the window it starts and ends, and a panel beside it shows how much has played.
• Where it works: pasted inline, or in an <object> with a file from the same site (the player measures the <object> in the page around it). Inside a box that scrolls on its own, it follows that box. An <img> shows the first frame only, and CSS-only exports can't link to scroll (they keep On load).
• With the external player it needs player 1.2.0 (data format 2); other exports stay format 1, so older players still start them.

Less motion: the Export dialog's Less motion setting decides what visitors who ask their system for reduced motion see: Play normally (the default, adds nothing), Show the first frame or Show the last frame. The JS player then holds that frame and doesn't start (whatever the trigger); a CSS export pauses every animation on it (a few bytes of CSS). Shape morphs in a CSS export are held with the CSS d property, which Safari ignores, so there they keep playing.

SVGs exported by SVGcinema: tick Include the editable project in the Export dialog's Advanced section (off by default; it shows how much it adds, about a third more for a typical JS export before compression). The project goes into the SVG's metadata, the pictures stay the SVG's own, and opening the SVG in SVGcinema brings back the exact project (layers, keyframes, settings); exporting it again gives the same file. Added to another project, its layers come in a group. Without it, an exported SVG opens as its artwork (the first frame), not animated.

Animated SVGs from SVGator keep their animation as ordinary, editable keyframes (opened as a project, they also bring their length, repeat, direction, fill mode, speed, frame rate and start trigger; added to a project, they lengthen its timeline when they are longer).

• JS player exports (embedded or external player): the keyframes and their easing come across exactly — position along the motion path (SVGator moves along curves at an even speed: Even speed along curves is on), rotate, skew, scale, the anchor point (as Origin), opacity, fill and stroke (colours and gradients; where SVGator switches between two gradients or from no paint, so does the import), fill / stroke opacity, stroke width, dash offset, dash pattern, size (growing from the shape's corner, as in SVGator), corner radius, shape morphs, line ends and blur. The result plays like SVGator's own player: the browser tests compare the positions against it to within a pixel. An anchor point that moves while following a curved path is placed within about a pixel.
• CSS exports: the groups SVGator wraps around an animated element (move / rotate / skew / scale) fold back into the one layer, the motion path comes back from offset-path with its curves, and the CSS keyframes (with their per-keyframe easing) become the same keyframes the JS export gives. SVGator's CSS writes the anchor point's offset twice, which shifts animated elements in browsers (in its own preview too); the import reads it once, so the result matches the JS export. Its CSS blur amounts are converted back as well. (SVGator can't export shape morphs as CSS.)
• Other CSS animations in an SVG (@keyframes on elements) also become keyframes: opacity, fill and stroke, their opacities, stroke width and dashes, sizes, and transforms written as translate · rotate · skew · scale around a transform-origin.

The external player

The Export dialog's Player row (Format section, JavaScript exports only) chooses Embedded, the default (the player inside each SVG: plays anywhere, even offline, about 26 KB), or External. An amber note under it reminds that a script export doesn't play as <img> or as a CSS background (export as CSS only for those); the footer says player inside or external player beside the file size.

SVGs exported with External carry only their artwork and animation, as JSON in <script type="application/json" data-cin>, plus a loader of under 1 KB. Once the page has loaded, the loader uses the page's own player (window.CinPlayer) if it has one; otherwise the first SVG on the page loads it from jsDelivr, https://cdn.jsdelivr.net/npm/svgcinema-player@<version>/cin-player.min.js (the version is fixed in the address, so later player releases never change files already exported). Either way every animation on the page shares one player. A standalone .svg (or one in <object>) loads its own copy from jsDelivr.

Self-hosting: the Embed tab's HTML code (with External) starts with an optional <script src="YOUR-ADDRESS/cin-player.min.js"> line before the SVG pasted inline, and Download the player (version) next to Copy snippet gets that file from the site's downloads/ folder (cin-player.min.js and cin-player-<version>.min.js, with an index page; also on npm).

The player is src/runtime/player.ts; src/runtime/boot.ts reads the JSON and wires the start trigger as the embedded player does. The JSON carries a data format number (f); a player only starts SVGs whose format it knows. npm run build:player (also part of npm run build) makes player/cin-player.min.js, about 26 KB minified.

API: each SVG's player is svg.player (also svg.cinPlayer), and the SVG fires cinready when it's ready. window.CinPlayer has version, f (the data format), boot(svg) (for SVGs added later by script) and scan(root).

Publishing: the package is player/ (svgcinema-player). .github/workflows/player.yml publishes it when player/package.json has a version npm doesn't have yet; it needs the repository secret NPM_TOKEN. To release player changes, raise that version: exports then link to the new one. npm holds a release published from GitHub until the owner approves it (npmjs.com ▸ Staged Packages, with 2FA). The README on npm changes only with a new release.

Batch converter (standalone, not part of the site)

npm run build:converter makes tools/converter/dist/SVGcinema-Converter.html: one HTML file with the converter and the whole editor inside it. It isn't deployed or linked anywhere. Open it from disk (Chrome or Edge to save into a folder) and it turns many SVGs into .SVGcinema projects at once: SVGator exports (JS or CSS), CSS-animated SVGs and plain artwork.

• Adding files: drop files or whole folders (subfolders included, other files left out), or choose them.
• Saving: pick an output folder and each project is written as it's done. If a project already exists there you can skip it, replace it or keep both. Or everything comes as one .zip.
• Project names: from the SVG's title, else the file name.
• Each row shows:
  • the first-frame thumbnail
  • what came in: layers, animated layers, length, repeat, images
  • the result: saved, saved with notes listing what the importer couldn't keep animated, skipped, or failed with the reason and Try again
• Open in editor opens a converted project in a new tab, in the editor the file carries.
• Save a report (.csv) lists every file's result.

The editor converts in a hidden frame inside the file (src/io/batch.ts). Each SVG goes through the same Open and Save as by hand, and nothing is kept in the browser (src/core/batch-mode.ts). Sources: tools/converter/ (page and build) and src/convert/ (its script and styles). Rebuild it after editor changes to pick them up.

The .SVGcinema project format

A .SVGcinema file is a standard zip archive:

Entry	Contents
thumbnail.png	The first frame, 512 px on its long side: the first entry, stored uncompressed, for file managers' thumbnail handlers
manifest.json	format: "svgcinema-project", version, name, save time, canvas size, counts
project.json	The document: layers, keyframes, easing presets, export settings
assets/index.json	One entry per asset: id, name, kind, MIME type, size in pixels and bytes, file path
assets/<id>-<name>.<ext>	Each image as its original file
agent-chat.json	The design agent's chat for this project (text only), when there is one

project.json references assets by id, so images are stored once.

Thumbnails in your file manager: optional add-ons read thumbnail.png so projects show their first frame instead of a plain icon:

• Windows File Explorer: SVGcinema-Thumbnails-Setup.zip, holding SVGcinema-Thumbnails-Setup.exe (zipped because many web hosts refuse to serve .exe files). It installs for you only, with no administrator rights. It's unsigned, so Windows may warn about an unknown publisher: choose More info, then Run anyway.
• Linux: svgcinema-thumbnails.deb, or the .tar.gz with install.sh. Works in GNOME Files, Nemo, Caja and Thunar.

The editor links to them from Help › Thumbnails on your computer… (hidden on a Mac, which isn't supported). It offers the download for the system you're on first, with the Windows warning highlighted. The website has a section with both. The build puts the downloads in the site's downloads/ folder next to the editor (editor/downloads/ in the deploy bundle). The Pages workflow fetches the installers from the thumbnails release first; for a local build, run npm run fetch:downloads (needs gh). The sources and how they work are in thumbnailers/.

Typing

The document model lives in src/model/types.ts: Doc, Layer, Geometry, BaseValues, Tracks, ExportSettings, Asset, plus the transient EditorState (S) and Drag. The runtime's EngineLayer is the exported subset of Layer.

tsconfig.json is strict, including noImplicitAny, with two exceptions:

• strictNullChecks is off;
• useUnknownInCatchVariables is off.

Explicit any remains where the code works with the page directly: $() and byId() lookups, a few panel elements in core/dom.ts, and e.target in delegated event handlers. Typing those is the next step, before strictNullChecks is switched on.

Conventions:

• Drag gestures assign an object to S.drag. Its move(p, e) and up(p, e) get their types from Drag, so don't annotate them.
• Shared tables keyed by strings (ICON, EXT_OF, ...) are typed Record<string, ...>.
• Timers use ReturnType<typeof setTimeout>, so the code compiles with or without Node types.

Tests

• tests/engine.test.ts: easing, interpolation, the player API, and that the player can be embedded.
• tests/zip.test.ts: the .SVGcinema container.
• tests/geometry.test.ts: path parsing and morph helpers.
• tests/output.test.ts: compares the exported SVG (JS and CSS modes, every trigger) and every embed snippet against tests/fixtures/export-sample.json. It also checks that no editor TypeScript syntax leaks into a snippet. After an intended change to the output, regenerate the reference with UPDATE_FIXTURES=1 npx vitest run tests/output.test.ts and review the diff.

Deploying (GitHub Pages)

.github/workflows/pages.yml tests, builds and publishes dist/ on every push to master (or on demand from the Actions tab).

One-time setup: Settings → Pages → Build and deployment → Source: GitHub Actions. Pages on a private repository needs a paid GitHub plan; otherwise make the repository public.

The site is served at https://<user>.github.io/<repo>/. The Vite base: './' setting makes asset paths relative, so no extra configuration is needed.

Website: site/ holds the SVGcinema website that introduces the editor and links into it: a short home page (the live hero, the workflow, the design agent, highlights, export) and a page each for Features, Design agent, Import, Export, Downloads and the Licence, with captures of the real editor in light and dark. node site/build.mjs builds the pages (site/index.html, site/features/index.html, …), which expect the editor in an editor/ folder beside the home page; npm run build:deploy puts them together in deploy/ for any static host, and npm run build:zip makes the whole site (thumbnail installers, player and Claude skill included) as svgcinema-site.zip. The Pages workflow does not publish it yet. See site/README.md.

Toward a desktop app (Tauri)

The code is ready for a Tauri shell without changes. When it gets wrapped:

• Files: replace the browser file APIs in io/save.ts and io/open.ts with Tauri's dialog and fs plugins. This gives true overwrite-on-save, recent files and .SVGcinema file associations.
• Image encoding: add native encoders (mozjpeg, oxipng, ravif) behind the same optimizeAsset interface in export/images.ts.
• Video and GIF export: already work in the browser (WebCodecs, our own GIF encoder); native encoders (ffmpeg, gifski) could make them faster.

Browser support

SVGcinema targets current Chrome, Edge, Firefox and Safari.

• Save overwriting the same file needs the File System Access API (Chrome and Edge). Other browsers download a fresh copy.
• AVIF export appears only where the browser can encode it.
• Shape animation in CSS-only exports (morphs, animated line ends, polygon / star corner radius) is written as SMIL <animate>, because Safari doesn't support the CSS d: path() property. With the hover trigger it stays d: path() (CSS pauses it on mouse out, which SMIL ignores), so in Safari those shapes don't move.

License

SVGcinema is proprietary software: © 2026 asafco83, all rights reserved. You may use the app to make animations, and the files you export are yours to use for anything, including commercial work. The external player file (svgcinema-player) may be loaded from a CDN or hosted unmodified, only to play SVGcinema exports. The source code may not be copied, changed or redistributed without permission. The owner may change or revoke the terms, and change or end access, at any time. See LICENSE for the full terms.