SVG Support

ThorVG currently builds to comply with SVG Tiny 1.2, the table below lists the supported elements and attributes.

Supported Elements

Element	Description
<circle>	Draws a circle based on a center point (cx, cy) and a radius (r).
<clipPath>	Defines a clipping path to hide parts of elements outside the path.
<defs>	Container for elements that can be reused but are not rendered directly.
<ellipse>	Draws an ellipse defined by a center point and two radii.
<feGaussianBlur>	Applies a Gaussian blur effect as part of a filter.
<filter>	Defines a filter effect that can be referenced by other elements.
<g>	Groups SVG elements together so they can be transformed or styled as a unit.
<image>	Embeds raster images into an SVG document.
<line>	Draws a straight line between two points.
<linearGradient>	Defines a linear color gradient. Used with fill or stroke.
<mask>	Defines a mask for hiding parts of elements using alpha or luminance.
<path>	Defines a complex shape using a series of commands and coordinates.
<pattern>	Defines a reusable graphical pattern that can be used to fill or stroke SVG shapes.
<polygon>	Draws a closed shape defined by a list of points.
<polyline>	Similar to <polygon>, but the shape is not automatically closed.
<radialGradient>	Defines a circular color gradient.
<rect>	Draws a rectangle, optionally with rounded corners.
<stop>	Defines a color stop in a gradient (linearGradient or radialGradient).
<style>	Allows you to include CSS styling within SVG.
<svg>	The root element of an SVG document or fragment.
<symbol>	Defines reusable graphic elements. Use with the <use> element.
<text>	Renders text in an SVG image.
<tspan>	Defines a span of text inside a <text> element for styling or positioning.
<use>	Reuses an element previously defined with <symbol> or <defs>.

Supported Attributes

Attribute	Description
alignment-baseline	Specifies how <text> and <tspan> content is aligned relative to the text baseline. Supported values: auto, alphabetic, before-edge, text-before-edge, after-edge, text-after-edge, ideographic, central, middle, hanging, and mathematical.
class	Applies CSS class styles to the SVG element.
clip-path	Defines a clipping path to control the visibility of parts of an element.
clipPathUnits	Specifies the coordinate system for the clipPath.
color	Specifies a color used for currentColor or other inherited color settings.
cx	X-axis coordinate of the center of a circle or ellipse.
cy	Y-axis coordinate of the center of a circle or ellipse.
cm	Length in centimeters.
d	Describes a path using a series of commands and coordinates.
display	Controls the visibility of the element (e.g., none, inline).
dx	Specifies a relative horizontal offset for text or individual glyphs.
dy	Specifies a relative vertical offset for text or individual glyphs.
edgeMode	Defines how edges are handled in filter effects like feGaussianBlur.
em	A font-relative length unit equal to the current font size.
ex	A font-relative length unit approximately equal to the height of the lowercas.
fill	Sets the fill color or pattern of a shape.
fill-opacity	Sets the opacity level of the fill.
fill-rule	Determines the algorithm used to determine the “inside” of a shape.
filter	Applies a defined filter effect to an element.
filterUnits	Defines coordinate system for attributes inside a <filter> element.
font-family	Specifies the font family for text rendering.
font-size	Sets the size of the text.
fr	Defines the radius of the focal point for radial gradients.
fx	X-axis coordinate of the focal point in a radial gradient.
fy	Y-axis coordinate of the focal point in a radial gradient.
gradientTransform	Applies a transform to a gradient.
gradientUnits	Defines the coordinate system for the gradient vector.
height	Sets the height of the SVG element or viewport.
href	References external resources like images or symbols.
id	Sets a unique identifier for the element.
in	Length in inches.
mask	References a mask element to apply transparency.
maskContentUnits	Defines the coordinate system for content inside the mask.
mask-type	Specifies how the mask content is interpreted: alpha or luminance.
maskUnits	Defines the coordinate system for the mask region (x, y, width, height).
mix-blend-mode	Sets the blend mode used to composite an element with its backdrop.
mm	Length in millimeters.
offset	Position of a color stop in gradients.
opacity	Sets the overall opacity of an element.
overflow	Controls rendering of content that overflows bounds.
paint-order	Defines the order for painting fill, stroke, and markers.
patternContentUnits	Specifies the coordinate system used for the pattern's content.
patternTransform	Applies a transformation to the pattern before it is rendered.
patternUnits	Specifies the coordinate system used for the pattern's geometry.
pc	Length in picas (12 points).
points	Defines list of points for polygons and polylines.
preserveAspectRatio	Controls how the SVG scales and aligns in its viewport.
primitiveUnits	Defines coordinate system for filter primitives.
pt	Length in points (1/72 inch).
r	Radius for circles or radial gradients.
rx	Horizontal corner radius for rectangles or x-radius for ellipses.
ry	Vertical corner radius for rectangles or y-radius for ellipses.
spreadMethod	Specifies how gradient is spread beyond its bounds.
src	Source URI for image elements and CSS @font-face rules.
stdDeviation	Standard deviation for blur effects in filters.
stop-color	Color value of a gradient stop.
stop-opacity	Opacity value of a gradient stop.
stroke	Sets the color or pattern for the outline (stroke) of shapes.
stroke-dasharray	Defines dash pattern for stroked lines.
stroke-dashoffset	Specifies the distance into the dash pattern to start the stroke.
stroke-linecap	Determines the shape of the ends of lines (butt, round, square).
stroke-linejoin	Determines the shape of corners where lines meet.
stroke-miterlimit	Limits the length of miter joins.
stroke-opacity	Sets the opacity of the stroke.
stroke-width	Sets the width of the stroke.
style	Inline CSS styling applied to the element.
text-anchor	Specifies text alignment.
transform	Applies transformations (e.g., translate, rotate, scale) to elements.
userSpaceOnUse	uses the SVG canvas coordinate system instead of the target object's bounding box.
viewBox	Defines the coordinate system and aspect ratio of the SVG viewport.
width	Sets the width of the SVG element or viewport.
x	X-axis coordinate of elements like <rect>, <text>, <use>.
x1	X-axis coordinate for the start of lines or gradients.
x2	X-axis coordinate for the end of lines or gradients.
xlink:href	(Deprecated) Used to reference external resources. Replaced by href.
xml:space	Controls whitespace handling inside <text>.
y	Y-axis coordinate of elements like <rect>, <text>, <use>.
y1	Y-axis coordinate for the start of lines or gradients.
y2	Y-axis coordinate for the end of lines or gradients.

---

Internal CSS style sheets — Progress (updated)

Feature	Status
type selector tag	Done
class selector .name	Done
type+class selector tag.name	Done
styling inside CDATA block	Done
proper precedence	Done
define style after it is used	Done
!important property	Done
id selector #id	Pending
gradients/stops styling support	Pending
combined selectors tag1 > tag2	Not Supported
style attributes (type, media, id)	Not Supported
geometry attributes (SVG2 only)	Not Supported
apply style to defs children nodes?	Not Supported