ContextQMD
Back to Devexpress

SVG Shapes

windowsforms-117671-controls-and-libraries-diagrams-diagram-items-create-custom-diagram-items-svg-shapes.md

latest9.9 KB
Original Source

SVG Shapes

  • Feb 02, 2024
  • 5 minutes to read

The DiagramControl allows you to use SVG images as shapes. In this case, an SVG image describes shape geometry, but does not affect shape content and connection points.

Create Shapes Based on SVG Images

Use the ShapeDescription.CreateSvgShape method to create a shape from a stream that contains an SVG image:

xml
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <circle cx="50" cy="50" r="40" stroke-width="4" stroke="blue" fill="green"/>
</svg>
csharp
void RegisterStencil() {
    var stencil = new DiagramStencil("CustomStencil", "SVG Shapes");

    System.IO.FileStream stream = System.IO.File.Open("..\\..\\greencircle.svg", System.IO.FileMode.Open);

    var shapeDescription = DevExpress.Diagram.Core.ShapeDescription.CreateSvgShape(
        shapeId: "SVGCircle",
        name: "SVG Circle",
        svgStream: stream,
        getConnectionPoints: (s) => new[] { new System.Windows.Point(s.Width / 2, s.Height / 2) }
    );

    stencil.RegisterShape(shapeDescription);
    DiagramToolboxRegistrator.RegisterStencil(stencil);
}
vb
Private Sub RegisterStencil()
    Dim stencil = New DiagramStencil("CustomStencil", "SVG Shapes")

    Dim stream As System.IO.FileStream = System.IO.File.Open("..\..\greencircle.svg", System.IO.FileMode.Open)

    Dim shapeDescription = DevExpress.Diagram.Core.ShapeDescription.CreateSvgShape(
        shapeId:="SVGCircle", 
        name:="SVG Circle", 
        svgStream:=stream, 
        getConnectionPoints:=Function(s) {New System.Windows.Point(s.Width / 2, s.Height / 2)}
    )

    stencil.RegisterShape(shapeDescription)
    DiagramToolboxRegistrator.RegisterStencil(stencil)
End Sub

View Example: Register and Use SVG Shapes

Colorize SVG Shapes Based on Applied Styles and Themes

The DiagramControl does not automatically recognize SVG image elements as background or stroke lines. As a result, it does not colorize SVG shapes when a user changes diagram themes, styles, or the DiagramItem.Appearance property.

The ShapeDescription.CreateSvgShape method has two optional parameters: backgroundColorCode and strokeColorCode. These parameters accept color codes from an SVG image’s markup and allow the DiagramControl to replace them once a user applies a theme/style.

The following SVG image has green background and blue stroke:

xml
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <circle cx="50" cy="50" r="40" stroke-width="4" stroke="blue" fill="green"/>
</svg>

Pass image color codes to backgroundColorCode and strokeColorCode parameters:

csharp
var shapeDescription = DevExpress.Diagram.Core.ShapeDescription.CreateSvgShape(
    shapeId: "SVGCircle",
    name: "SVG Circle",
    svgStream: stream,
    getConnectionPoints: (s) => new[] { new System.Windows.Point(s.Width / 2, s.Height / 2) },
    backgroundColorCode: "green",
    strokeColorCode: "blue"
);
vb
Dim shapeDescription = DevExpress.Diagram.Core.ShapeDescription.CreateSvgShape(
    shapeId:="SVGCircle", 
    name:="SVG Circle", 
    svgStream:=stream, 
    getConnectionPoints:=Function(s) {New System.Windows.Point(s.Width / 2, s.Height / 2)}, 
    backgroundColorCode:="green", 
    strokeColorCode:="blue"
)

The DiagramControl can use only one color code to identify background and stroke colors. Multiple color codes are not supported.

Create SVG Shapes with Predefined Settings

When you create diagram shapes from SVG images, you cannot control the initial shape size and other settings. To pre-define those attributes, create and register a FactoryItemTool. For basic information about that class, review the first example in the overview topic: Create Custom Diagram Items.

Note that you must register both the shape class and the tool within the diagram. That means you will have two separate items in the Shapes Panel. If users do not need to access the original shape item without pre-defined settings, register that shape in an invisible stencil. The example below shows how to do this.

csharp
void CreateToolboxItems() {
    System.IO.FileStream stream = System.IO.File.Open("..\\..\\greencircle.svg", System.IO.FileMode.Open);

    // Visible stencil:
    var stencil = new DevExpress.Diagram.Core.DiagramStencil("svgStencil", "SVG Shapes");

    // Invisible stencil:
    var stencilContainer = new DevExpress.Diagram.Core.DiagramStencil("container", "container", false);

    // Create an SVG Shape and register it in the invisible stencil:
    stencilContainer.RegisterShape(ShapeDescription.CreateSvgShape("SVGCircle", "SVG Circle", stream));

    // Create a FactoryItemTool that specifies SVG shape properties:
    var tool = new FactoryItemTool(
        "svgTool",
        () => "SVG Circle",
        diagram => {
            stream.Position = 0;
            var svgShape = new DiagramShape() {
                Shape = stencilContainer.GetShape("SVGCircle")
            };
            return svgShape;
        },
        new System.Windows.Size(50, 50),
        true
    );

    // Register this tool in the visible stencil:
    stencil.RegisterTool(tool);
    // Register invisible and visible stencils:
    DevExpress.Diagram.Core.DiagramToolboxRegistrator.RegisterStencil(stencilContainer);
    DevExpress.Diagram.Core.DiagramToolboxRegistrator.RegisterStencil(stencil);
    diagramControl1.SelectedStencils.Add("svgStencil");
}
vb
Private Sub CreateToolboxItems()
    Dim stream As System.IO.FileStream = System.IO.File.Open("..\..\greencircle.svg", System.IO.FileMode.Open)

    ' Visible stencil:
    Dim stencil = New DevExpress.Diagram.Core.DiagramStencil("svgStencil", "SVG Shapes")

    ' Invisible stencil:
    Dim stencilContainer = New DevExpress.Diagram.Core.DiagramStencil("container", "container", False)

    ' Create an SVG Shape and register it in the invisible stencil:
    stencilContainer.RegisterShape(ShapeDescription.CreateSvgShape("SVGCircle", "SVG Circle", stream))

    ' Create a FactoryItemTool that specifies SVG shape properties:
    Dim tool = New FactoryItemTool(
        "svgTool", 
        Function() "SVG Circle", 
        Function(diagram)
            stream.Position = 0
            Dim svgShape = New DiagramShape() With {
                .Shape = stencilContainer.GetShape("SVGCircle")
            }
            Return svgShape
        End Function, 
        New System.Windows.Size(50, 50), 
        True
    )

    ' Register this tool in the visible stencil:
    stencil.RegisterTool(tool)

    'Register invisible and visible stencils:
    DevExpress.Diagram.Core.DiagramToolboxRegistrator.RegisterStencil(stencilContainer)
    DevExpress.Diagram.Core.DiagramToolboxRegistrator.RegisterStencil(stencil)
    diagramControl1.SelectedStencils.Add("svgStencil")
End Sub

Supported SVG Elements and Attributes

  • Path – <path>
  • Group – <g>
  • Use – <use>
  • Rectangle – <rect>
  • Circle – <circle>
  • Ellipse – <ellipse>
  • Line – <line>
  • Polyline – <polyline>
  • Polygon – <polygon>
  • Embedded Image – <image>
  • Text – <text>
  • Use – <use>
  • Linear Gradients – <linearGradient>
  • Radial Gradients – <radialGradient>
  • CSS styles
  • 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

Limitations

SVG shapes support only base SVG elements and features. The list of unsupported elements includes (but is not limited to) the following items:

  • Animations and mouse events
  • External .CSS styles
  • Masks
  • Relative values (percentages) in all elements except for brushes
  • Custom fonts
  • Text paths
  • Complex opacity settings with the enable-background parameter
  • The pattern element
  • The display attribute
  • The href attribute in gradients
  • Multiple CSS classes of an element
  • Styles based on class and id attributes
  • The clipPath element can cause clipping in DirectX mode.

Examples