This page covers the graphics integration subsystems within LibWeb that operate alongside the core CSS/layout pipeline:
SVGPaintable class hierarchy, how SVG filter primitive elements are resolved to Skia-executable filter objects, and the SVG attribute/tag name constant registriesCanvasRenderingContext2D, HTMLCanvasElement, CanvasPaintable, OffscreenCanvas, and the mixin architecture for canvas operationsParsedFontFace and FontSourceStyleValue as the internal representation of CSS font source descriptorsGfx::PaintingSurface and Gfx::SkiaBackendContext as the platform-neutral interfaces backing GPU-accelerated renderingFor the painting pipeline and display list architecture (recording and playback), see Painting and Display Lists. For CSS filter value parsing (filter: property), see CSS Style Computation and Animations. For WebGL, see WebGL Rendering Context.
SVG content in LibWeb is rendered through a dedicated subtree of layout and paintable classes that mirror the HTML layout hierarchy. Each layout node type (Layout::SVGSVGBox, Layout::SVGGeometryBox, etc.) produces a corresponding paintable node that performs pixel output.
All SVG paintables ultimately inherit from PaintableBox. The hierarchy is:
SVGPaintable class hierarchy
Sources: Libraries/LibWeb/CMakeLists.txt856-863 Libraries/LibWeb/Painting/StackingContext.cpp98-124
SVGMaskable (Painting/SVGMaskable.cpp) is a shared mixin that applies mask and clip-path effects to SVG graphics elements. It is not a base class in the GC sense but provides utility methods consumed by SVGGraphicsPaintable and SVGSVGPaintable.
| Layout Class | Paintable Class | Element Type |
|---|---|---|
Layout::SVGSVGBox | SVGSVGPaintable | <svg> root |
Layout::SVGGeometryBox | SVGPathPaintable | <path>, <rect>, <circle>, etc. |
Layout::SVGGraphicsBox | SVGGraphicsPaintable | <g>, <use>, graphical containers |
Layout::SVGForeignObjectBox | SVGForeignObjectPaintable | <foreignObject> |
Layout::SVGClipBox | SVGClipPaintable | <clipPath> |
Layout::SVGMaskBox | SVGMaskPaintable | <mask> |
Layout::SVGTextBox | (text paintable) | <text>, <tspan> |
Layout::SVGImageBox | (image paintable) | <image> |
Sources: Libraries/LibWeb/CMakeLists.txt770-789 Libraries/LibWeb/CMakeLists.txt856-867
StackingContext (Libraries/LibWeb/Painting/StackingContext.cpp) has a dedicated path for SVG painting. When it encounters a paintable where is_svg_svg_paintable() returns true, it calls paint_svg() Libraries/LibWeb/Painting/StackingContext.cpp116-124 instead of the normal stacking-context paint path.
paint_svg() calls SVGSVGPaintable::paint_svg_box(), which paints the background and border first using the standard paint_node() path, then hands off SVG subtree painting with its own coordinate system.
paint_descendants() Libraries/LibWeb/Painting/StackingContext.cpp126 also has a special case: when iterating children, is_svg_svg_paintable() children skip the normal phase logic and are dispatched to paint_svg() instead.
SVG filters are declared with <filter> elements containing filter primitive children. LibWeb resolves these into structures the Skia backend can execute via SkImageFilters.
SVGFilterElement (Libraries/LibWeb/SVG/SVGFilterElement.cpp) is the <filter> container. Its children implement the SVGFilterPrimitiveStandardAttributes mixin (Libraries/LibWeb/SVG/SVGFilterPrimitiveStandardAttributes.cpp), which provides the common x, y, width, height, and result attributes.
| DOM Class | Element | Operation |
|---|---|---|
SVGFEGaussianBlurElement | <feGaussianBlur> | Gaussian blur |
SVGFEBlendElement | <feBlend> | Alpha blending of two inputs |
SVGFEColorMatrixElement | <feColorMatrix> | Color matrix transform |
SVGFEComponentTransferElement | <feComponentTransfer> | Per-channel transfer functions |
SVGFECompositeElement | <feComposite> | Porter-Duff compositing |
SVGFEDropShadowElement | <feDropShadow> | Drop shadow shorthand |
SVGFEFloodElement | <feFlood> | Solid flood fill |
SVGFEImageElement | <feImage> | External image reference |
SVGFEMergeElement / SVGFEMergeNodeElement | <feMerge> | Layer merging |
SVGFEMorphologyElement | <feMorphology> | Erode / dilate |
SVGFEOffsetElement | <feOffset> | Translate input |
SVGFETurbulenceElement | <feTurbulence> | Noise generation |
Sources: Libraries/LibWeb/CMakeLists.txt966-983
Component transfer sub-functions (<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>) are implemented by SVGFEFuncAElement through SVGFEFuncRElement, which are children of <feComponentTransfer>.
Painting::ResolvedCSSFilter (Libraries/LibWeb/Painting/ResolvedCSSFilter.cpp) bridges the DOM filter element tree to the Skia execution layer. PaintableBox includes SVGFilterElement.h directly Libraries/LibWeb/Painting/PaintableBox.cpp29 to resolve filter references at paint time.
SVG filter processing pipeline
Sources: Libraries/LibWeb/Painting/PaintableBox.cpp29 Libraries/LibWeb/CMakeLists.txt851 Libraries/LibWeb/Painting/DisplayListRecorder.h1
LibWeb centralizes SVG name constants in two registry files to avoid string duplication and enable FlyString-based O(1) identity comparison:
Libraries/LibWeb/SVG/AttributeNames.cpp — recognized SVG attribute name constants (e.g., viewBox, gradientTransform, stdDeviation, filterUnits, patternUnits)Libraries/LibWeb/SVG/TagNames.cpp — SVG element tag name constants (e.g., svg, path, filter, feGaussianBlur, linearGradient)These follow the same pattern as HTML/AttributeNames.cpp and HTML/TagNames.cpp. All constants are FlyString values registered at startup and compared by pointer equality throughout the SVG parser and DOM code.
Sources: Libraries/LibWeb/CMakeLists.txt944-945 Libraries/LibWeb/CMakeLists.txt1021
The Canvas API is implemented using a set of mixin classes composed into CanvasRenderingContext2D and OffscreenCanvasRenderingContext2D. The element itself, HTMLCanvasElement, manages context creation and exposes the canvas to the painting system via CanvasPaintable.
Canvas API class composition
Sources: Libraries/LibWeb/CMakeLists.txt459-470 Libraries/LibWeb/CMakeLists.txt620-621 Libraries/LibWeb/CMakeLists.txt630 Libraries/LibWeb/CMakeLists.txt832 Libraries/LibWeb/idl_files.cmake165-167 Libraries/LibWeb/idl_files.cmake280-282
| File | Mixin | Key IDL operations |
|---|---|---|
HTML/Canvas/CanvasState.cpp | CanvasState | save(), restore(), transform state |
HTML/Canvas/CanvasPath.cpp | CanvasPath | moveTo(), lineTo(), arc(), bezierCurveTo() |
HTML/Canvas/CanvasDrawImage.cpp | CanvasDrawImage | drawImage() with images, videos, canvases |
HTML/Canvas/CanvasFillStrokeStyles.cpp | CanvasFillStrokeStyles | fillStyle, strokeStyle, gradient/pattern creation |
HTML/Canvas/CanvasTextDrawingStyles.cpp | CanvasTextDrawingStyles | font, textAlign, textBaseline |
HTML/Canvas/CanvasSettings.cpp | CanvasSettings | imageSmoothingEnabled, imageSmoothingQuality |
HTML/Canvas/SerializeBitmap.cpp | (internal) | toDataURL() / toBlob() pixel encoding |
Sources: Libraries/LibWeb/CMakeLists.txt459-470
HTML::OffscreenCanvas (Libraries/LibWeb/HTML/OffscreenCanvas.cpp) provides a canvas surface that operates outside the document rendering pipeline. It implements OffscreenCanvasRenderingContext2D (Libraries/LibWeb/HTML/OffscreenCanvasRenderingContext2D.cpp), which composes the same mixin classes as CanvasRenderingContext2D. OffscreenCanvas objects can be transferred to and from Web Workers via structured serialization.
The @font-face rule is parsed into internal data structures used by the font loading and matching subsystem.
CSS::ParsedFontFace (Libraries/LibWeb/CSS/ParsedFontFace.cpp) is the intermediate representation of a parsed @font-face block. It stores:
font-family nameSource entries (URL references with optional format hints, or local() names)font-weight, font-style, font-stretch, font-display, unicode-rangeParsedFontFace is consumed by the font loading infrastructure — CSS::FontFace and CSS::FontFaceSet — to schedule network fetches and register loaded typefaces with the font cache.
CSS::FontSourceStyleValue (Libraries/LibWeb/CSS/StyleValues/FontSourceStyleValue.cpp) is a StyleValue subclass representing a single entry in the src: descriptor of an @font-face rule. It encodes either:
format() hint (e.g., url("font.woff2") format("woff2"))local()Multiple FontSourceStyleValue instances are collected into a StyleValueList to represent the complete src: descriptor.
@font-face data flow
Sources: Libraries/LibWeb/CMakeLists.txt192 Libraries/LibWeb/CMakeLists.txt261 Libraries/LibWeb/CMakeLists.txt173-175 Libraries/LibWeb/CSS/ParsedFontFace.cpp1
LibWeb's rendering pipeline uses two abstraction layers to stay portable across GPU backends and CPU-only rendering.
Gfx::PaintingSurface is the abstract rendering target accepted by DisplayListPlayer::execute() Libraries/LibWeb/Painting/DisplayList.cpp42-57 Its interface includes:
lock_context() — acquire the GPU context for this surface before drawingunlock_context() — release after drawingflush() — submit pending GPU commandsThis object is allocated per-frame by the backing store manager and passed to the display list player for each rendering pass.
Gfx::SkiaBackendContext wraps a platform GPU context. It is created once per process in get_skia_backend_context() Libraries/LibWeb/HTML/Navigable.cpp149-167 and cached in a static RefPtr. Three back ends are available:
| Backend | Platform Condition | Factory |
|---|---|---|
| Metal | AK_OS_MACOS | Gfx::SkiaBackendContext::create_metal_context() |
| Vulkan | USE_VULKAN (Linux / Windows) | Gfx::SkiaBackendContext::create_vulkan_context() |
| CPU fallback | All (when no GPU available) | (null context; no SkiaBackendContext created) |
Painting::DisplayListPlayerSkia (Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp) is the concrete DisplayListPlayer that translates display list commands into Skia API calls. It is instantiated in the Navigable constructor Libraries/LibWeb/HTML/Navigable.cpp186-193 and handed to the RenderingThread.
Gfx::SkiaBackendContext, it uses GrDirectContext (GPU-accelerated Ganesh/Graphite backend).Backend selection and rendering pipeline
Sources: Libraries/LibWeb/HTML/Navigable.cpp147-196 Libraries/LibWeb/Painting/DisplayList.cpp42-57 Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp38-48
Painting::SVGGradientPaintStyle (forward-declared in Libraries/LibWeb/Forward.h) is the paint style type used for SVG gradient fills. It is the concrete type behind the PaintStyle typedef:
PaintStyleOrColor appears throughout the DisplayListRecorder API Libraries/LibWeb/Painting/DisplayListRecorder.h41-62 — in fill_path() and stroke_path() parameters — allowing SVG gradient paint servers and flat colors to be dispatched through the same code path to DisplayListPlayerSkia.
Sources: Libraries/LibWeb/Forward.h49-52 Libraries/LibWeb/Painting/DisplayListRecorder.h41-62
| Class / File | Path | Role |
|---|---|---|
SVGPaintable | Painting/SVGPaintable.cpp | Base paintable for SVG elements |
SVGSVGPaintable | Painting/SVGSVGPaintable.cpp | <svg> root painting, paint_svg_box() |
SVGPathPaintable | Painting/SVGPathPaintable.cpp | Shape element painting |
SVGMaskable | Painting/SVGMaskable.cpp | Mask/clip mixin |
SVGFilterElement | SVG/SVGFilterElement.cpp | <filter> DOM element |
SVGFilterPrimitiveStandardAttributes | SVG/SVGFilterPrimitiveStandardAttributes.cpp | Common FE* attributes mixin |
ResolvedCSSFilter | Painting/ResolvedCSSFilter.cpp | Filter resolved for Skia |
SVGGradientPaintStyle | Painting/ | SVG gradient fill type |
CanvasRenderingContext2D | HTML/CanvasRenderingContext2D.cpp | 2D canvas context |
HTMLCanvasElement | HTML/HTMLCanvasElement.cpp | <canvas> DOM element |
CanvasPaintable | Painting/CanvasPaintable.cpp | Canvas → paint bridge |
OffscreenCanvas | HTML/OffscreenCanvas.cpp | Off-document canvas |
ParsedFontFace | CSS/ParsedFontFace.cpp | @font-face internal representation |
FontSourceStyleValue | CSS/StyleValues/FontSourceStyleValue.cpp | src: descriptor entry |
Gfx::SkiaBackendContext | Libraries/LibGfx/ | GPU context (Metal / Vulkan) |
Gfx::PaintingSurface | Libraries/LibGfx/ | Abstract rendering target |
DisplayListPlayerSkia | Painting/DisplayListPlayerSkia.cpp | Display list → Skia API |
Sources: Libraries/LibWeb/CMakeLists.txt1-1150 Libraries/LibWeb/Forward.h41-55
Refresh this wiki