Skip to content

Gtk.Svg

class — extends GObject.Object, Gdk.Paintable, SymbolicPaintable

A paintable implementation that renders SVG, with animations.

GtkSvg objects are created by parsing a subset of SVG, including SVG animations.

GtkSvg fills or strokes paths with symbolic or fixed colors. It can have multiple states, and paths can be included in a subset of the states. States can have animations, and the transition between different states can also be animated.

To show a static SVG image, it is enough to load the the SVG and use it like any other paintable.

To play an SVG animation, use Svg.set_frame_clock to connect the paintable to a frame clock, and call Svg.play after loading the SVG. The animation can be paused using Svg.pause.

To set the current state, use Svg.set_state.

Error handling

Loading an SVG into GtkSvg will always produce a (possibly empty) paintable. GTK will drop things that it can't handle and try to make sense of the rest.

To track errors during parsing or rendering, connect to the Svg.error signal.

For parsing errors in the GTK_SVG_ERROR domain, the functions SvgError.get_start, SvgError.get_end, SvgError.get_element and SvgError.get_attribute can be used to obtain information about where the error occurred.

The supported subset of SVG

The paintable supports much of SVG 2, with some exceptions.

Among the graphical elements, <textPath> and <foreignObject> are not supported.

Among the structural elements, <a> and <view> are not supported.

In the <filter> element, the following primitives are not supported: feConvolveMatrix, feDiffuseLighting, feMorphology, feSpecularLighting and feTurbulence.

Support for the mask attribute is limited to just a url referring to the <mask> element by ID.

In animation elements, the parsing of begin and end attributes is limited, and the min and max attributes are not supported.

Lastly, there is only minimal CSS support (the style attribute, but not <style>), and no interactivity.

SVG Extensions

The paintable supports a number of custom attributes that offer a convenient way to define states, transitions and animations. For example,

&lt;circle cx='5' cy='5' r='5'
        gpa:states='0 1'
        gpa:animation-type='automatic'
        gpa:animation-direction='segment'
        gpa:animation-duration='600ms'/>

defines the circle to be shown in states 0 and 1, and animates a segment of the circle.

<image src="svg-renderer1.svg">

Note that the generated animations are implemented using standard SVG attributes (visibility, stroke-dasharray,stroke-dashoffset,pathLengthandfilter`). Setting these attributes in your SVG is therefore going to interfere with generated animations.

To connect general SVG animations to the states of the paintable, use the custom gpa:states(...) condition in the begin and end attributes of SVG animation elements. For example,

&lt;animate href='path1'
         attributeName='fill'
         begin='gpa:states(0).begin'
         dur='300ms'
         fill='freeze'
         from='black'
         to='magenta'/>

will make the fill color of path1 transition from black to magenta when the renderer enters state 0.

<image src="svg-renderer2.svg">

The gpa:states(...) condition triggers for upcoming state changes as well, to support fade-out transitions. For example,

&lt;animate href='path1'
         attributeName='opacity'
         begin='gpa:states(0).end -300ms'
         dur='300ms'
         fill='freeze'
         from='1'
         to='0'/>

will start a fade-out of path1 300ms before state 0 ends.

A variant of the gpa:states(...) condition allows specifying both before and after states:

&lt;animate href='path1'
         attributeName='opacity'
         begin='gpa:states(0, 1 2)'
         dur='300ms'
         fill='freeze'
         from='1'
         to='0'/>

will start the animation when the state changes from 0 to 1 or from 0 to 2, but not when it changes from 0 to 3.

In addition to the gpa:fill and gpa:stroke attributes, symbolic colors can also be specified as a custom paint server reference, like this: url(#gpa:warning). This works in fill and stroke attributes, but also when specifying colors in SVG animation attributes like to or values.

Note that the SVG syntax allows for a fallback RGB color to be specified after the url, for compatibility with other SVG consumers:

fill='url(#gpa:warning) orange'

In contrast to SVG 1.1 and 2.0, we allow the transform attribute to be animated with <animate>.

Constructors

new

@classmethod
def new(cls) -> Svg

Creates a new, empty SVG paintable.

new_from_bytes

@classmethod
def new_from_bytes(cls, bytes: bytes) -> Svg

Parses the SVG data in bytes and creates a paintable.

Parameters:

  • bytes — the data

new_from_resource

@classmethod
def new_from_resource(cls, path: str) -> Svg

Parses the SVG data in the resource and creates a paintable.

Parameters:

  • path — the resource path

Methods

get_features

def get_features(self) -> SvgFeatures

Returns the currently enabled features.

get_state

def get_state(self) -> int

Gets the current state of the paintable.

get_state_names

def get_state_names(self) -> tuple[list[str] | None, int]

Returns a NULL-terminated array of state names, if available.

Note that the returned array and the strings contained in it will only be valid until the GtkSvg is cleared or reloaded, so if you want to keep it around, you should make a copy.

get_weight

def get_weight(self) -> float

Gets the value of the weight property.

load_from_bytes

def load_from_bytes(self, bytes: bytes) -> None

Loads SVG content into an existing SVG paintable.

To track errors while loading SVG content, connect to the Svg.error signal.

This clears any previously loaded content.

Parameters:

  • bytes — the data to load

load_from_resource

def load_from_resource(self, path: str) -> None

Loads SVG content into an existing SVG paintable.

To track errors while loading SVG content, connect to the Svg.error signal.

This clears any previously loaded content.

Parameters:

  • path — the resource path

pause

def pause(self) -> None

Stop any playing animations and state transitions.

Animations can be paused and started repeatedly.

play

def play(self) -> None

Start playing animations and state transitions.

Animations can be paused and started repeatedly.

serialize

def serialize(self) -> bytes

Serializes the content of the renderer as SVG.

The SVG will be similar to the orignally loaded one, but is not guaranteed to be 100% identical.

This function serializes the DOM, i.e. the results of parsing the SVG. It does not reflect the effect of applying animations.

set_features

def set_features(self, features: SvgFeatures | int) -> None

Enables or disables features of the SVG paintable.

By default, all features are enabled.

Note that this call only has an effect before the SVG is loaded.

Parameters:

  • features — features to enable

set_frame_clock

def set_frame_clock(self, clock: Gdk.FrameClock) -> None

Sets a frame clock.

Without a frame clock, GtkSvg will not advance animations.

Parameters:

  • clock — the frame clock

set_state

def set_state(self, state: int) -> None

Sets the state of the paintable.

If the paintable is currently playing, the state change will apply transitions that are defined in the SVG. If the paintable is not playing, the state change will take effect instantaneously.

Parameters:

  • state — the state to set, as a value between 0 and 63

set_weight

def set_weight(self, weight: float) -> None

Sets the weight that is used when rendering.

The weight affects the effective linewidth when stroking paths.

The default value of -1 means to use the font weight from CSS.

Parameters:

  • weight — the font weight, as a value between -1 and 1000

write_to_file

def write_to_file(self, filename: str) -> bool

Serializes the paintable, and saves the result to a file.

Parameters:

  • filename — the file to save to

Properties

features

features: SvgFeatures | int  # read/write

Enabled features for this paintable.

Note that features have to be set before loading SVG data to take effect.

playing

playing: bool  # read/write

Whether the paintable is currently animating its content.

To set this property, use the Svg.play and Svg.pause functions.

resource

resource: str  # read/write

Resource to load SVG data from.

This property is meant to create a paintable from a resource in ui files.

state

state: int  # read/write

The current state of the renderer.

This can be a number between 0 and 63.

weight

weight: float  # read/write

If not set to -1, this value overrides the weight used when rendering the paintable.

Signals

error

def on_error(self, error: GLib.Error) -> None: ...

Signals that an error occurred.

Errors can occur both during parsing and during rendering.

The expected error values are in the SvgError enumeration, context information about the location of parsing errors can be obtained with the various gtk_svg_error functions.

Parsing errors are never fatal, so the parsing will resume after the error. Errors may however cause parts of the given data or even all of it to not be parsed at all. So it is a useful idea to check that the parsing succeeds by connecting to this signal.

::: note This signal is emitted in the middle of parsing or rendering, and if you handle it, you must be careful. Logging the errors you receive is fine, but modifying the widget hierarchy or changing the paintable state definitively isn't.

If in doubt, defer to an idle.