Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Collapse]Diagrams
    Getting Started
   [Expand]Diagram Designer
    Diagram Control
   [Expand]End-User Interaction
   [Collapse]Diagram Items
     Shapes
     Default Shapes
     Connectors
     Images
     SVG Shapes
     Containers
   [Expand]Automatic Layout
   [Expand]Data Binding Functionality
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
   [Expand]Examples
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

SVG Shapes

Expanded 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.

The following snippet illustrates how to create an SVG shape with a connection point in the center and add it to the toolbox.

Expanded Supported SVG elements

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>
  • The ‘transform’ attribute

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.

Expanded Limitations

The following SVG elements are currently not supported.

  • CSS
  • The 'style' attribute
  • The 'opacity' attribute
  • Group transform
  • Group attribute inheritance
  • Size in millimeters and other units except pixels
  • The 'text' element
  • The 'stroke-linecap' attribute

To resolve the issue with opacity, edit the fill color alpha channel in the SVG file.

How would you rate this topic?​​​​​​​