Generated SVG tries to be as clean and standard-compliant as possible, without relying on proprietary XML namespaces.

To support complex effects, animations, and state machines within a single file, the exported SVG follows a specific structural pattern.

Document tree

The final exported SVG follows this exact top-to-bottom hierarchy:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <!-- 1. Metadata -->
  <metadata>...</metadata>
  
  <!-- 2. Definitions (Gradients, Masks, Filters. Shapes are NOT stored here) -->
  <defs>...</defs>
  
  <!-- 3. Artboard Backgrounds -->
  <rect fill="..." />
  
  <!-- 4. Artboard Content Wrapper -->
  <g clip-path="url(#clip-artboard-id)">
      <!-- Rendered Shapes (Drawn directly in the DOM) -->
      <g id="a" transform="translate(...)">
         <path d="..." fill="..." />
      </g>
  </g>

  <!-- 5. Animation Payload (Interactive/Animated exports only) -->
  <script type="application/json" id="ag-data">...</script>
  
  <!-- 6. Animation Runtime (Interactive/Animated exports only) -->
  <script type="text/javascript">...</script>
</svg>

IDs and Minification

During export, exporter runs an ID Minifier to reduce file size.
Internal application IDs like shape-rect123-g-fill are minified into short base52 strings like a, b, c.

Shape rendering rules

To maximize compatibility across browsers and vector tools, exporter applies the following rules when generating geometry:

1. Flattened geometry: basic shapes (Rectangles, Ellipses, Stars, Text) are exported as standard <path d="..."> elements, not <rect>, <polygon>, <ellipse>, or <text>. Because each shape is generated procedurally, they pass through nodes (like noise, booleans, point resampling, bend, light, blend, mask, etc). Basic SVG tags cannot physically represent these complex mathematical changes. Baking to paths guarantees complex geometry (like corner radii) renders 1:1 in any browser exactly as it does on the canvas without standard SVG quirks. Furthermore, converting text to paths ensures exact kerning, fonts, and layouts everywhere, even if the end-user doesn't have the font installed.
2. Layer separation: if a shape has both a Fill and a Stroke, and it doesn't require complex blending, they are combined into a single <path>. However, if the shape uses inner shadows, progressive blurs, or outside-aligned strokes, the engine splits the shape into multiple stacked <path> elements.
3. Isolation groups: shapes that use Gooey effects (Threshold filters) are wrapped in a <g style="isolation: isolate"> tag.
4. Direct rendering: exporter does not use <use> tags to instance shapes. All visual shapes are drawn directly in the document body as full <path> nodes inside their respective Artboard wrappers. <defs> is strictly reserved for gradients, clipping paths, filters, etc.

Animation & State machine payload

If the file was exported as an Animated SVG or Interactive SVG, all animation data is completely decoupled from the SVG DOM.

You will not find standard SMIL tags (<animate>, <animateTransform>) or CSS @keyframes in the file.

An embedded SVG runtime engine is used because SMIL has several technical limitations:

• SMIL path morphing completely breaks if the start and end shapes have a different point count.
• SMIL cannot animate changing text strings.
• SMIL cannot calculate smooth crossfades if a user interrupts an interaction.
• SMIL cannot control an entire graph - the custom runtime allows triggering and syncing 50 different shapes from a single interaction.

Instead, the data is bundled into a compressed, baked JSON payload.

#ag-data block

At the bottom of the file, <script type="application/json" id="ag-data"> tag is located.
Inside is a Base64-encoded, Deflate-compressed JSON string.

By decompressing this payload, you will find:

• fps: target framerate.
• clips: a dictionary of animation clips. Each clip contains Run-Length Encoded (RLE) arrays of attribute values (e.g., ["#ff0000", 10, "#00ff00", 5] meaning 10 frames of red, 5 frames of green).
• sm: the State Machine graph (nodes, edges, and variables).
• reverseIdMap: a dictionary mapping the minified DOM IDs (e.g., a) back to their original node IDs.

Runtime script

Directly below data payload is a standard JavaScript block. When SVG is opened in a browser, this script:

1. Decompresses JSON payload using browser's native DecompressionStream API.
2. Starts a requestAnimationFrame loop.
3. Calculates current state, crossfades, and frame indices.
4. Directly mutates DOM using element.setAttribute(...).

Web integration

While static SVGs can be embedded using a standard <img> tag, Interactive and Animated SVGs require script execution to run the payload mentioned above.

Because browsers block JavaScript execution inside <img> tags for security reasons, you must embed the exported SVG using an <object> or <iframe> tag to ensure the animation plays correctly.

<!-- recommended -->
<object type="image/svg+xml" data="file.svg" width="100%" height="100%"></object>

<iframe src="file.svg" width="100%" height="100%" style="border: none;"></iframe>