|
Donner 0.5.0
Embeddable browser-grade SVG2 engine
|
|
|
Donner 0.5.0
Embeddable browser-grade SVG2 engine
|
| Donner API | |
| Donner Build Report | |
| CSS | |
| donner-svg CLI Tool | |
| Elements: Basic Shapes | |
| "<circle>" | Creates a circle centered on cx, cy, with radius r |
| "<ellipse>" | Creates an ellipse centered on cx, cy, with radius rx and ry |
| "<line>" | Creates a line between two points, using the x1, y1, x2, and y2 attributes |
| "<path>" | Defines a shape using a path, which can include straight lines, curves, and sub-paths |
| "<polygon>" | Creates a closed polygon with straight lines between the points, using the points attribute |
| "<polyline>" | Creates a set of connected straight line segments, using the points attribute |
| "<rect>" | Creates a rectangle with the top-left corner at (x, y) and the specified width and height, optionally with rounded corners |
| Elements: Filters | |
| "<filter>" | Defines filter effects which can be applied to graphical elements |
| "<feGaussianBlur>" | Defines a filter primitive that performs a gaussian blur on the input image |
| "<feDropShadow>" | Defines a filter primitive that creates a drop shadow effect |
| "<feOffset>" | Defines a filter primitive that offsets the input image by (dx, dy) |
| "<feMorphology>" | Defines a filter primitive that erodes or dilates the input image |
| "<feDisplacementMap>" | Uses the pixel values from a second input to spatially displace the first input image |
| "<feTile>" | Defines a filter primitive that tiles the input image across the output region |
| "<feColorMatrix>" | Defines a filter primitive that applies a matrix transformation on color values |
| "<feComponentTransfer>" | Defines a filter primitive that applies per-channel transfer functions (lookup tables) to modify the RGBA components of the input image |
| "<feFuncR>" | A child element of "<feComponentTransfer>" defining the transfer function for the red channel |
| "<feFuncG>" | A child element of "<feComponentTransfer>" defining the transfer function for the green channel |
| "<feFuncB>" | A child element of "<feComponentTransfer>" defining the transfer function for the blue channel |
| "<feFuncA>" | A child element of "<feComponentTransfer>" defining the transfer function for the alpha channel |
| "<feBlend>" | <feBlend> combines two inputs using a blend mode, similar to the layer blend modes in Photoshop, GIMP, or Figma |
| "<feComposite>" | <feComposite> merges two inputs (in and in2) into a single output using a Porter-Duff compositing operator |
| "<feMerge>" | <feMerge> stacks multiple filter results on top of each other like layers in an image editor, producing a final composite |
| "<feMergeNode>" | <feMergeNode> is a child of "<feMerge>" that names one layer to stack |
| "<feFlood>" | |
| "<feImage>" | <feImage> imports an external image — or a fragment of the current document — into the filter graph as an additional input |
| "<feTurbulence>" | <feTurbulence> generates a procedural noise pattern using the Perlin turbulence algorithm |
| "<feConvolveMatrix>" | <feConvolveMatrix> applies a convolution kernel to the input image |
| "<feDiffuseLighting>" | <feDiffuseLighting> uses the input image's alpha channel as a height map — the more opaque a pixel, the taller the imaginary "surface" at that spot — and then computes how a light bouncing off that surface would look using the Lambertian (diffuse) reflection model |
| "<feSpecularLighting>" | <feSpecularLighting> is the shiny-highlight companion of "<feDiffuseLighting>" |
| "<feDistantLight>" | <feDistantLight> is a parallel light source — think of the sun |
| "<fePointLight>" | <fePointLight> is a positional light source — think of a bare light bulb floating in space |
| "<feSpotLight>" | <feSpotLight> is a directional, cone-shaped light — think of a flashlight or a theatre spotlight |
| Elements: Masking and Clipping | |
| "<mask>" | Defines a mask, which is used to apply image-based visibility to graphical elements |
| "<clipPath>" | Defines a clipping path, which is used to clip the rendering of other elements using paths and shapes |
| Elements: Painting | |
| "<linearGradient>" | Defines the paint server for a linear gradients |
| "<radialGradient>" | Defines the paint server for a radial gradients |
| "<pattern>" | Defines a paint server containing a repeated pattern, which is tiled to fill the area |
| "<stop>" | Defines a color stop for a gradient |
| "<marker>" | Creates a marker element that can be used to define graphical objects that can be used repeatedly in a drawing, such as arrowheads or other markers on paths |
| Elements: Structural | |
| "<svg>" | The root element of an SVG document |
| "<g>" | Creates a group of elements which can be transformed as a single object |
| "<defs>" | Container for definitions of reusable graphics elements |
| "<use>" | <use> instantiates another element at a specified position, cloning its rendered output |
| "<symbol>" | Defines a symbol element that can be used to define graphical templates which are not rendered directly but can be instantiated by a "<use>" element |
| `<symbol>` Usage: Coordinate System and Sizing Behavior | |
| Elements: Text | |
| "<text>" | Defines a graphics element consisting of text |
| "<tspan>" | The <tspan> element defines a sub-string or sub-group of text that can be independently positioned or styled inside an SVG text flow |
| "<textPath>" | The <textPath> element renders text along an arbitrary path referenced by the href attribute |
| Unsupported SVG 1.1 Features | |
| "<image>" | Embeds an image into the SVG document |
| "<style>" | Defines a CSS stylesheet for the document |
| Todo List |
1.15.0