Skia: Essence, Architecture and Role in the Flutter Graphics Engine

What is Skia?

Skia is a cross-platform 2D graphics library developed by Google and available under the BSD license. It provides a unified API for drawing geometric shapes, text, images and shadows, abstracting away the underlying graphics backend. Skia is written in C++ and optimized to work on a wide range of devices — from mobile phones to servers.

The history of Skia began in 2005 as a proprietary library from Skia Inc. In 2007, it was acquired by Google, which open-sourced it and began using it in its products. Today, Skia is the primary graphics engine for Google Chrome (including Chrome OS), Android (starting from version 4.0) and, of course, Flutter. The library is maintained by the Google team and is constantly improved: new backends, performance optimizations and support for modern graphics APIs are added.

The key feature of Skia is that it is not just a set of functions for drawing primitives. It is a full graphics pipeline that includes curve rasterization (paths), anti-aliasing, mask overlays, transparency handling and color correction. Skia supports image formats PNG, JPEG, WebP and GIF, and can render text through the HarfBuzz engine for glyph shaping.

Skia vs Other Graphics Libraries

Unlike Cairo (used in GTK) or Quartz 2D (used in macOS), Skia was originally designed to work on multiple platforms with different graphics APIs. This gives it an advantage in cross-platform frameworks like Flutter. Cairo is oriented toward software rendering, while Skia has supported GPU acceleration from the very beginning, which is critical for UI animations.

Skia Architecture

Skia architecture is built as a multi-layer pipeline, where each layer is responsible for a specific stage of converting graphics commands into pixels. This structure allows reusing upper layers independently of the underlying graphics API.

The top layer — Canvas API — provides the developer with an abstraction for drawing. Methods drawRect, drawCircle, drawPath, drawText take geometric parameters and styles (color, transparency, transformations). Canvas converts these commands into a sequence of operations that are passed to the Skia Pipeline — an internal command graph that is optimized before execution.

The middle layer — Surface and Device — manages the target buffer into which rendering occurs. Surface is created with the specified size, color space and backend type. Device implements a specific rendering backend: CPU rasterizer (Raster), OpenGL (GL), Vulkan (Vk) or Metal (Mt). Device contains optimized implementations of each drawing operation for a specific backend.

The bottom layer — Ganesha (GPU backend) — implements hardware-accelerated rendering. Ganesha uses the GPU for path rasterization, gradient fills and effect overlays. It collects commands into batches and minimizes GPU state switching. Each graphics API has its own Ganesha implementation: Skia GL for OpenGL, Skia Vulkan for Vulkan, Skia Metal for Metal.

Intermediate Representation — SkSL

Skia uses its own shader language SkSL (Skia Shading Language) to describe effects. SkSL code is compiled into SPIR-V (intermediate representation), which is then translated into a backend-specific shader format (GLSL, HLSL, MSL). This provides a unified way to describe graphics effects regardless of the platform.

How Skia Works in Flutter

Flutter uses Skia as the primary rendering engine on all platforms: Android, iOS, Web, Windows, macOS and Linux. When a Flutter application renders a frame, widgets are converted into a RenderObject tree, which is then passed to the Engine layer (in C++), and the Engine uses Skia for final rendering.

The frame rendering process includes several stages. First, the Flutter Engine builds a Display List — a sequence of Canvas API calls describing what and how to draw. This list is then passed to Skia, which splits operations into partitions (screen areas), sorts them by depth and passes them to the corresponding rendering backend. GPU acceleration is enabled automatically if Skia detects an available graphics API.

One of the key advantages of Skia in Flutter is the Flutter Impeller Preview — the ability to preview shaders ahead of time. Skia compiles shaders at the moment of first use, which can cause delays (shader jank). To solve this problem, Flutter is transitioning to Impeller — a new rendering engine, but Skia remains the primary choice for stable Flutter versions.

Layer Tree and Paint

Flutter uses the concept of a Layer Tree — a tree of layers, each representing a part of the UI. Skia receives drawing commands for each layer and determines whether multiple layers can be combined into a single rendering pass. Layer compositing is a complex task because for each pixel, transparency and blend modes must be taken into account, which Skia implements through GPU shaders.

Text Rendering via Skia

Skia renders text through integration with the HarfBuzz (shaping) and ICU (unicode) libraries. In Flutter, each text widget creates a Paragraph object that converts text into a series of Skia commands for drawing glyphs. Skia supports subpixel anti-aliasing, font hinting and working with emoji through the SkUnicode library.

Skia Performance

Skia performance is the result of many years of optimization and a combination of several techniques: command batching, texture caching and minimizing GPU context switching. This is critically important for Flutter, as each frame must be rendered in 16 ms (60 FPS) or 8 ms (120 FPS).

According to Flutter Team benchmarks, using Skia with GPU acceleration on mid-range devices (Qualcomm Snapdragon 700 series) delivers a stable 60 FPS when rendering complex interfaces with 30+ widgets on screen. With software rendering (CPU), performance drops by 40–60%, but remains acceptable for simple screens.

Shader Jank — Skia's Main Problem

The main performance problem of Skia in Flutter is shader jank. When a new visual element with a previously unknown combination of effects appears on screen, Skia compiles a new shader on the fly. Compilation can take 50–200 ms, during which the application drops frames. This is especially noticeable when scrolling long lists with custom decorations. Google is solving this problem with Impeller, a new rendering engine that compiles shaders ahead of time.

Skia Across Platforms

Skia supports a wide range of platforms, each using its own rendering backend. The backend choice is determined during the Flutter Engine build based on the target platform and available graphics APIs.

Android

On Android, Skia works via OpenGL ES (on all devices) and Vulkan (on Android 7.0+ devices with Vulkan support). The backend is selected automatically: Vulkan is preferred as it provides lower driver latency. Android also uses Skia for system UI rendering through HWUI (Hardware Accelerated UI), making Skia a part of the operating system, not just Flutter.

iOS

On iOS, Skia uses Metal — Apple's proprietary graphics API. Metal provides low-level access to the GPU with minimal overhead. Before Metal's introduction (2014), Skia on iOS used OpenGL ES, but in current Flutter versions Metal is the only GPU backend for iOS, providing up to 30% performance improvement compared to OpenGL.

Desktop (Windows, macOS, Linux)

On desktop, Skia uses OpenGL (macOS, Linux) and Direct3D 12 (Windows). Direct3D 12 support was added in Flutter 3.13 for Windows and provides a significant performance improvement over OpenGL on Windows. Skia also supports software rendering through ANGLE (OpenGL over Direct3D) on Windows for backward compatibility with older graphics drivers.

Web

In Flutter for Web, Skia is compiled to WebAssembly (via Emscripten) and renders through WebGL. In this mode, Skia works entirely in the browser without using native code. The performance of the WebGL version of Skia is lower than native backends, but for most web applications 60 FPS is achieved on modern browsers with WebGL hardware acceleration.