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

Example

The corresponding example is available in our Code Central database at How to register and use SVG shapes.