SVG Shapes

• Mar 14, 2021
• 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.

C#

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);

VB.NET

Dim stencil = New DevExpress.Diagram.Core.DiagramStencil("SVGStencil", "SVG Shapes")
            Using stream As System.IO.FileStream = System.IO.File.Open("..\..\Shape.svg", System.IO.FileMode.Open)
                                 Dim shapeDescription = DevExpress.Diagram.Core.ShapeDescription.CreateSvgShape("Armchair", "Armchair", stream, False,
                                     Function(s) { New System.Windows.Point(s.Width \ 2, s.Height \ 2) }, "#FF0000", "#000000")
                                 stencil.RegisterShape(shapeDescription)
            End Using

            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