SVG Shapes
- 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:
<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>
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);
}
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 DiagramItem.Background and DiagramItem.Stroke properties.
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:
<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:
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"
);
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.
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");
}
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
transformattribute - The
stroke-linecapattribute - The
styleattribute - The
opacityattribute - Group transform
- Group attribute inheritance
Supported stroke and fill properties:
strokestroke-widthfill
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-backgroundparameter - The
patternelement - The
displayattribute - The
hrefattribute in gradients - Multiple CSS classes of an element
- Styles based on
classandidattributes