DOCSEARCHbyAlgolia
Submit Docs

ThorVG Vector Graphics Engine

repository·main·Indexed 23 days ago

https://github.com/thorvg/thorvg

A lightweight, high-performance vector graphics engine designed for CPU rasterization and broad portability across embedded systems, mobile, web, and desktop. ThorVG supports lines, shapes, gradients, Unicode text, and image formats including SVG, PNG, JPEG, and WebP. It features a retained-mode scene graph, smart partial rendering, and Lottie animation playback. Available render backends include CPU/SIMD, OpenGL/ES, WebGL, and WebGPU.

Tokens
3.2K
Snippets
5
Records
18
Agent score
33%

What's inside ThorVG

  1. Overview of ThorVG capabilities

    main

    ThorVG is a production-ready vector graphics engine designed for high performance and lightweight efficiency. It is suitable for interactive apps, creative tools, embedded systems, and IoT devices.

    Supported Primitives and Features:

    • Lines & Shapes: Rectangles, circles, paths, and arbitrary vector geometry.
    • Filling: Solid colors, linear gradients, and radial gradients.
    • Stroking: Stroke width, joins, caps, dash patterns, and trimming.
    • Scene Management: Retained-mode scene graph with hierarchical transformations.
    • Composition: W3C compositing and blending modes, masking, clipping, and nested scenes.
    • Text: Unicode, scalable TTF/OTF fonts, and multi-line text layout.
    • Images: SVG, PNG, JPEG, WebP, and raw bitmaps.
    • Effects: Blur, drop shadow, tint, tritone, color replacement, and fill effects.
    • Animations: Lottie (JSON) playback and rendering.

  2. How ThorVG's lightweight design works

    main

    ThorVG uses a modular, building-block architecture. It is distributed as a single binary with selectively buildable components, allowing developers to include only what they need to minimize the footprint.

    Key Benefits:

    • Small Binary Size: The core library is approximately 170KB.
    • Memory Efficiency: Low runtime memory usage makes it stable on low-spec systems.
    • Fast Boot: Quick initialization improves application startup speed.
    • Low Size Deployment: Ideal for embedded systems, IoT, and network-constrained environments.

  3. How smart partial rendering works

    main

    ThorVG supports smart partial rendering, which optimizes performance by updating only the portions of a vector scene that have changed. The engine internally tracks modified regions and selectively redraws only the modified area between frames.

    When to use it:

    • Recommended for: UI rendering, design tools, or applications where large parts of the scene remain static (e.g., mobile and embedded systems).
    • Avoid for: Highly dynamic content like fast-paced games or full-screen animations where nearly all objects change every frame. In these cases, full-scene rendering is more efficient and avoids the overhead of tracking changes.

  4. How ThorVG's threading and task scheduler works

    main

    ThorVG includes an optional threading mechanism to prevent delays when retrieving upcoming scenes. It uses a task scheduler based on thread pools to handle tasks such as:

    • Encoding
    • Decoding
    • Updating
    • Rendering

    This architecture allows for efficient use of multi-core processors. Because the scheduler is optional, you can choose whether to adopt it based on your application's complexity and needs.

  5. Generate Visual Studio or Xcode project files

    main

    If you prefer using an IDE instead of raw build commands, you can use Meson to generate project files for Visual Studio or Xcode.

    • For Visual Studio, use the --backend=vs flag. The resulting thorvg.sln will be in the builddir.
    • For Xcode, use the --backend=xcode flag. The resulting thorvg.xcodeproj will be in the builddir.

  7. Access ThorVG API documentation

    main

    ThorVG provides documentation for both C++ and C APIs. You can access the official web-based documentation or view the header files directly in the repository to understand the available symbols.

    • Web Documentation: thorvg.org/apis
    • C++ API: Found in inc/thorvg.h
    • C API: Found in src/bindings/capi/thorvg_capi.h
    • DeepWiki: For in-depth architecture and feature guidance, visit DeepWiki.

  8. Quick start: Basic vector drawing API

    main

    To use ThorVG for manual vector drawing, follow this lifecycle:

    1. Initialize: Call tvg::Initializer::init(threads).
    2. Prepare Canvas: Generate a canvas using tvg::SwCanvas::gen() and point it to a memory buffer using .target().
    3. Add Shapes: Create shapes with tvg::Shape::gen(), define their geometry (rectangles, circles, paths), set fills/strokes, and add them to the canvas via canvas->add().
    4. Render: Call canvas->draw() followed by canvas->sync() to commit the drawing to the buffer.
    5. Terminate: Call tvg::Initializer::term() when finished.
    // 1. Initialize
tvg::Initializer::init(4);

// 2. Prepare Canvas
static uint32_t buffer[WIDTH * HEIGHT];
auto canvas = tvg::SwCanvas::gen();
canvas->target(buffer, WIDTH, WIDTH, HEIGHT, tvg::ColorSpace::ARGB8888);

// 3. Draw Shapes
auto rect = tvg::Shape::gen();
rect->appendRect(50, 50, 200, 200, 20, 20);
rect->fill(100, 100, 100);
canvas->add(rect);

auto circle = tvg::Shape::gen();
circle->appendCircle(400, 400, 100, 100);

auto fill = tvg::RadialGradient::gen();
fill->radial(400, 400, 150, 400, 400, 0);
tvg::Fill::ColorStop colorStops[2];
colorStops[0] = {0.0, 255, 255, 255, 255};
colorStops[1] = {1.0, 0, 0, 0, 255};
fill->colorStops(colorStops, 2);
circle->fill(fill);
canvas->add(circle);

// 4. Render
canvas->draw();
canvas->sync();

// 5. Terminate
tvg::Initializer::term();

  9. Build and install ThorVG using Meson

    main

    ThorVG uses the meson build system. To build and install, you need meson and ninja installed on your system. All build artifacts (symbols, executables) are generated in the builddir folder within the ThorVG root directory.

    Note: Some systems may already include ThorVG as a default component; check your package manager before manual installation.

  10. Preview SVG and Lottie with VS Code LiveView

    main

    You can preview Lottie animations and SVG files directly inside Visual Studio Code using the ThorVG LiveView extension. This integrates the ThorVG View engine into your editor workflow.

    https://marketplace.visualstudio.com/items?itemName=thorvg.thorvg-liveview

  11. Play Lottie animations

    main

    To play a Lottie animation, you must manage both a tvg::Animation object (to control timing/frames) and a tvg::Picture object (which holds the loaded JSON data).

    1. Generate an Animation and a Picture.
    2. Load the .json Lottie file into the Picture.
    3. Add the Picture to the canvas.
    4. In your animation loop, calculate the desired frame using animation->totalFrame() * progress (where progress is 0.0 to 1.0).
    5. Update the animation frame and call canvas->update() to redraw the picture.