SVG Shapes
- 2 minutes to read
Adding SVG Images to a Diagram
The DevExpress Diagram Control allows you to use SVG images as shapes. Use the ShapeDescription.CreateSvgShape method to create a shape from a stream that contains the SVG image. This method has two optional parameters: backgroundColorCode and strokeColorCode. These parameters allow you to specify the codes of colors to be swapped with the selected theme‘s background and foreground color.
The following snippet illustrates how to create an SVG shape with a connection point in the center and add it to the toolbox.
var stencil = new DevExpress.Diagram.Core.DiagramStencil("SVGStencil", "SVG Shapes");
using (System.IO.FileStream stream = System.IO.File.Open("..\\..\\Shape.svg", System.IO.FileMode.Open)) {
var shapeDescription = DevExpress.Diagram.Core.ShapeDescription.CreateSvgShape("Armchair", "Armchair", stream, false,
(s) => new[] { new System.Windows.Point(s.Width / 2, s.Height / 2) }, "#FF0000", "#000000");
stencil.RegisterShape(shapeDescription);
}
DevExpress.Diagram.Core.DiagramToolboxRegistrator.RegisterStencil(stencil);
Supported SVG elements
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
- Use <use>
- Group <g>
- CSS
- The ‘transform’ attribute
- The ‘stroke-linecap’ attribute
- The ‘style’ attribute
- The ‘opacity’ attribute
- Group transform
- Group attribute inheritance
Supported stroke and fill properties:
- stroke
- stroke-width
- fill
The stroke and stroke-width properties can be applied to any kind of lines and outlines of elements.
Limitations
The following SVG elements are currently not supported.
- The ‘linearGradient’ and ‘radialGradient’
- The ‘text’ element
See Also