Overview

SVG Game Engine

The SVG Game Engine is a revolutionary 2D game development framework that compiles Python game code into standalone SVG files. Unlike traditional game engines that require runtime environments or plugins, games built with SVG Engine run entirely within modern web browsers using native SVG capabilities.

Lightweight

Entire games compile to single SVG files that are typically under 100KB

Python API

Write games in Python with a simple, intuitive API that compiles to SVG

Web Native

Runs anywhere SVG is supported - no plugins or downloads required

How It Works

The SVG Engine transforms Python game code into optimized SVG markup with embedded JavaScript. The compilation process includes:

Conversion of Python game logic to JavaScript
Optimization of graphics into SVG paths and shapes
Embedding of assets as data URIs
Generation of efficient animation timelines
Compression of the final SVG output

game_compiler.py

                        # Python game code

                        import svg_engine as game

                        def setup():

                            game.create_window(800, 600)

                            player = game.Sprite("player.svg")

                        def update():

                            if game.key_pressed("right"):

                                player.x += 5

Getting Started

Installation

The SVG Engine requires Python 3.8 or higher. Install it via pip:

pip install svg-engine

Creating Your First Game

Create a new Python file (e.g., my_game.py)
Import the SVG Engine module
Define your game's setup and update functions
Compile to SVG using the command line tool

Basic Game Template

                            import svg_engine as game

                            # Called once at startup

                            def setup():

                                game.create_window(800, 600)

                                game.set_title("My SVG Game")

                            # Called every frame

                            def update():

                                pass

Compiling to SVG

                            # Compile your game to an SVG file

                            svg-compile my_game.py -o game.svg

                            # Additional options:

                            --optimize # Enable compression

                            --minify # Minify JavaScript

                            --embed # Embed all assets

                            --fps 60 # Target framerate

Pro Tip

Use the --debug flag during development to include error messages and performance stats in your compiled SVG.

Python API Reference

Core Functions

Function	Description	Example
create_window(width, height)	Initialize game window	create_window(800, 600)
set_title(title)	Set window title	set_title("My Game")
load_image(path)	Load image asset	img = load_image("char.png")
key_pressed(key)	Check if key is pressed	if key_pressed("space"):
mouse_position()	Get current mouse position	x, y = mouse_position()

Sprite Class

                    # Create a sprite

                    player = Sprite("player.png")

                    player.x = 100  # Set position

                    player.y = 200

                    player.scale = 0.5  # Scale to 50%

                    player.rotation = 45  # Rotate 45 degrees

                    player.opacity = 0.8  # 80% opacity

                    # In update():

                    player.move(2, 0)  # Move right

Drawing API

                        # Basic shapes

                        draw_rect(x, y, w, h, color)

                        draw_circle(x, y, r, color)

                        draw_line(x1, y1, x2, y2, color)

                        draw_text(text, x, y, color, size)

                        # Example:

                        draw_rect(50, 50, 100, 60, "#ff0000")

                        # Advanced drawing

                        begin_shape()

                        vertex(x, y)

                        vertex(x, y)

                        end_shape(fill, stroke)

                        # Example polygon:

                        begin_shape()

                        vertex(100, 100)

                        vertex(150, 150)

                        vertex(100, 200)

                        end_shape("blue", "white")

Sprites

Sprites are the fundamental building blocks of games in SVG Engine. They represent visual elements that can be moved, rotated, scaled, and animated. Under the hood, sprites compile to SVG <image> or <g> elements with transform attributes.

Creating Sprites

                        # From image file

                        player = Sprite("assets/player.png")

                        # With initial position

                        enemy = Sprite("enemy.svg", x=200, y=150)

                        # From scratch (empty sprite)

                        custom = Sprite(width=64, height=64)

                        # Adding shapes to a sprite

                        with custom.group():

                            custom.rect(0, 0, 64, 64, fill="red")

                            custom.circle(32, 32, 20, fill="yellow")

                        # Adding to display list

                        add_sprite(custom)

Sprite Properties

Property	Type	Description
x, y	number	Position coordinates
scale_x, scale_y	number	Horizontal/vertical scale
rotation	degrees	Rotation angle
opacity	0.0-1.0	Transparency level
visible	boolean	Visibility flag

Animation

SVG Engine provides powerful animation capabilities that compile to efficient SVG SMIL animations and CSS transitions. Animations can be defined declaratively or controlled programmatically.

Frame Animation

                        # Sprite sheet animation

                        frames = load_spritesheet(

                            "hero.png",

                            frame_width=64,

                            frame_height=64

                        )

                        hero = AnimatedSprite(frames)

                        hero.play(10)  # 10 FPS

                        # Controlling animation

                        hero.pause()

                        hero.resume()

                        hero.stop()

                        hero.goto_frame(3)

                        # Animation events

                        def on_animation_end():

                            hero.play(5, loop=False)

Tween Animations

                    # Simple tween

                    tween(hero, {"x": 300}, duration=1.5)

                    # With easing

                    tween(hero, {

                        "y": 200,

                        "rotation": 360

                    }, duration=2, ease="bounceOut")

                    # Easing types:

                    "linear", "quadInOut", "elasticOut", "backIn", etc.

Motion Paths

                    # Define path as list of points

                    path = [

                        (100, 100),

                        (200, 150),

                        (300, 50)

                    ]

                    # Animate along path

                    follow_path(hero, path, duration=3)

                    # Continuous path following

                    def update():

                        hero.follow_path(path, speed=100)

Compilation to SVG

The compilation process transforms your Python game into a standalone SVG file containing all game logic, assets, and animations. This section covers advanced compilation options and optimization techniques.

Compilation Process

Code Analysis: Parse Python source and detect game structure
Asset Processing: Convert images to embedded data URIs
Translation: Convert Python to optimized JavaScript
SVG Generation: Create SVG markup with embedded scripts
Optimization: Apply size reduction techniques

Compilation Output

game.svg

                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">

                                <script type="application/ecmascript">

                                  // Compiled JavaScript...

                                </script>

                                <image href="data:image/png;base64,..."/>

                                <g transform="translate(100,200)">

                                  <!-- Game elements -->

                                </g>

                                </svg>

Advanced Compilation Options

Option	Description	Example
--optimize	Enable size optimization	svg-compile --optimize
--minify	Minify JavaScript code	svg-compile --minify
--external-assets	Keep assets as external files	svg-compile --external-assets
--fps	Set target framerate	svg-compile --fps 30
--size	Override window size	svg-compile --size 1024x768

Performance Optimization

Code Optimization

Use sprite batching when possible
Minimize dynamic property changes
Prefer static elements where possible
Use simple shapes instead of complex paths

Asset Optimization

Optimize images before importing
Use SVG assets when possible
Reduce color depth for simpler assets
Share textures between sprites

Examples

Simple Game Example

                    import svg_engine as game

                    class Player:

                        def __init__(self):

                            self.sprite = game.Sprite("player.png")

                            self.speed = 5

                        def update(self):

                            if game.key_pressed("left"):

                                self.sprite.x -= self.speed

                            if game.key_pressed("right"):

                                self.sprite.x += self.speed

                    player = Player()

                    def setup():

                        game.create_window(800, 600)

                    def update():

                        player.update()

Interactive Demo

This demo shows a simple player character that can be moved with arrow keys. The actual compiled SVG would include interactive JavaScript.

Sample Games

Space Shooter

Classic arcade shooter

Puzzle Game

Tile matching game

Platformer

Jump and run adventure

Frequently Asked Questions

Is SVG Engine suitable for complex games?

SVG Engine is optimized for lightweight 2D games. While it can handle moderately complex games, it's best suited for casual games, interactive art, and educational projects. For very complex games with thousands of objects, a traditional game engine might be more appropriate.

What browsers support SVG games?

SVG games work in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Mobile browsers on both iOS and Android are also supported. Internet Explorer has limited support (IE11 works but with some feature restrictions).

How is performance compared to Canvas/WebGL?

SVG rendering is generally slower than Canvas or WebGL for complex scenes, but offers excellent performance for typical 2D games with dozens to hundreds of elements. The advantage is that SVG provides resolution-independent graphics and easy DOM manipulation.

Can I monetize games made with SVG Engine?

Yes! SVG Engine is MIT licensed, which means you can create commercial games with it. The compiled SVG files are yours to distribute however you like - on your website, app stores (wrapped in a web view), or as standalone files.

How do I handle game saves and persistence?

SVG games can use the browser's localStorage API to save game state. The engine provides helper functions like save_data(key, value) and load_data(key) to simplify this process.

Need More Help?

Join our community forum to ask questions and share your SVG game projects!

Visit Community

SVG Engine

Resources