Exported SVG Structure | AnimGraphLab Documentation

Export ›SVG Structure

This page is for developers writing custom parsers, game engine importers, or web integrations.

Generated SVG tries to be as clean and standard-compliant as possible, without relying on proprietary XML namespaces or heavy use of nested <use> tags.

However, 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. Embedded Fonts -->
  <style>@font-face { ... }</style>
  
  <!-- 3. Definitions (Gradients, Masks, Filters. Shapes are NOT stored here) -->
  <defs>...</defs>
  
  <!-- 4. Artboard Backgrounds -->
  <rect fill="..." />
  
  <!-- 5. 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>

  <!-- 6. Animation Payload (Interactive/Animated exports only) -->
  <script type="application/json" id="ag-data">...</script>
  
  <!-- 7. 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.

Warning: If you are parsing the SVG with an external script, do not rely on element IDs matching your node names unless you are reading the reverse-map from the animation payload.

Shape rendering rules

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

Flattened geometry: basic shapes (Rectangles, Ellipses, Stars) are exported as standard <path d="..."> elements, not <rect> or <polygon>. This guarantees perfect rendering of corner radii and complex path operations.
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.
Isolation groups: shapes that use Gooey effects (Threshold filters) are wrapped in a <g style="isolation: isolate"> tag.
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. 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:

Decompresses JSON payload using browser’s native DecompressionStream API.
Starts a requestAnimationFrame loop.
Calculates current state, crossfades, and frame indices.
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.

<!-- Using an object tag (Recommended) -->
<object type="image/svg+xml" data="file.svg" width="100%" height="100%"></object>

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

Overview

All Nodes