8000 SVG Support · thorvg/thorvg Wiki · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

SVG Support

Jump to bottom
Hermet Park edited this page Apr 23, 2025 · 1 revision

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.
<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.
<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.
<use> Reuses an element previously defined with <symbol> or <defs>.

Supported Attributes

Attribute Description
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.
d Describes a path using a series of commands and coordinates.
display Controls the visibility of the element (e.g., none, inline).
edgeMode Defines how edges are handled in filter effects like feGaussianBlur.
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.
mask References a mask element to apply transparency.
mask-type Specifies how the mask content is interpreted: alpha or luminance.
maskContentUnits Defines the coordinate system for content inside the mask.
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.
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.
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.
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.
transform Applies transformations (e.g., translate, rotate, scale) to elements.
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.
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.

CSS Support

ThorVG supports CSS in SVG since v0.8. There are three general ways to use CSS styling in an SVG file:

  • Inline styling - supported in TVG since v0.8
  • Internal CSS style sheets - currently under development
  • External CSS style sheets - not supported yet

Inline styling

It's a method with the highest precedence - it overwrites the values set using the attributes and all other methods of CSS styling.

Example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 20 20">
    <rect width="10" height="10" style="fill:blue; stroke: #3399ff" fill="red" stroke-width="3"/>
</svg>

The result should look as follows:

inline_style

It's worth to notice, that the fill="red" attribute, as it has the lowest precedence, does not overwrite the one set in the style attribute.

Internal CSS style sheets

We are currently gradually introducing this method into TVG.

In the table below you can find the supported features, the ones that we plan to support and some that we can consider, especially on demand.

Within the internal CSS styling different selectors have different precedence - the more specific the selector is, the higher its precedence. For the selectors currently introduced into the TVG, starting with the one with the highest precedence:

  • Type and class selector
  • Class selector
  • Type selector

Example

In the svg file below you can see the example usage of each of mentioned selectors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
 <defs>
  <style>
    rect.mineStyle1 {
        fill: blue; stroke: #3399ff;
    }
    .mineStyle2 {
        fill: red; stroke: pink;
    }
    rect {
        fill: #00cc00; stroke: #99ff33; stroke-width: 5;
    }
  </style>
 </defs>
 
 <!-- type selector: a green rect -->
 <rect x="5"  y="5"  width="50" height="50" />
 
 <!-- type and class selector: a blue rect -->
 <rect x="45" y="25" width="50" height="50" class="mineStyle1" />
 
 <!-- class selector: a red shape -->
 <rect x="85" y="45" width="50" height="50" class="mineStyle2" />
 <circle cx="110" cy="70" r="15" class="mineStyle2" stroke-width="5"/>
 
 <!-- selector with the highest precedence overwrites the other ones: a blue rect -->
 <rect x="5" y="75" width="20" height="20" class="mineStyle1" class="mineStyle2" />
</svg>

The result should look as follows:

internal_style_prec

Progress

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
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
!important property Not Supported
apply style to defs children nodes? Not Supported

External CSS style sheets

Not supported now.

Clone this wiki locally
0