Xceed Chart for WinForms v4.4 Documentation
SVG Export Settings

Welcome to Xceed Chart for WinForms v4.4 > User Guide > Image Export > SVG Export Settings

When you export SVG content, you can modify various aspects of the generated SVG by using the properties exposed by the SVGRenderSettings object. This object is passed to the control when exporting SVG both in Windows Forms and ASP.NET (Web Forms) applications. The following code snippets refer to Web Forms, because it's the most likely platform where you'll need SVG export, but the settings work in exactly the same manner in Windows Forms as well.

Generating compressed SVG (SVGZ)

The component can generate GZIP compressed SVG content, which can be useful if you want to optimize the traffic generated by your website. Compressed SVG files have an extension of .svgz. To enable compressing, you need to set the Compress property to true:

VB.NET  
svgResponse.SvgRenderSettings.Compress = True
C#  
svgResponse.SvgRenderSettings.Compress = true;

Embedding images

SVG can contain vector and raster data. Raster data can also be embedded in the SVG content by using base64 encoding. This can be very useful if you do not want to distribute additional images along with generated the SVG or SVGZ file. This feature is controlled by modifying the EmbedImagesInSVG and EmbeddedImageDescription properties of the SVGRenderSettings object:

VB.NET  
svgRenderSettings.EmbedImagesInSVG = True
svgRenderSettings.EmbeddedImageDescription = New JPEGDescription
C#  
svgRenderSettings.EmbedImagesInSVG = true;
svgRenderSettings.EmbeddedImageDescription = new JPEGDescription();

When you set the EmbedImagesInSVG property to true, the component will automatically embed all images contained in FillEffect objects in the SVG content. EmbeddedImageDescription defines how to encode the images. For a small size, it is recommended to use JPEG. Otherwise, PNG is the preferred image format because it uses lossless compression.

SVG and browser redirection

The generated SVG content can redirect the client browser to a specified URL when the user clicks on a particular element. This is achieved by using the SVG anchor element allowing you to have SVG content linking to other HTML pages. This works in much the same way as HTML image maps. In order to generate interactive content you must turn on the EnableInteractivity property of the SVGRenderSettings object attached to the SVGResponse object:

VB.NET  
svgResponse.SvgRenderSettings.EnableInteractivity = True
C#  
svgResponse.SvgRenderSettings.EnableInteractivity = true;

The following code will configure a simple chart that redirects the client browser when the user clicks on a bar chart:

VB.NET  
Dim chart As Chart
Dim bar As BarSeries
Dim random As New Random
 
chart = CType(chartServerControl1.Charts.GetAt(0), Chart)
chart.MarginMode = MarginMode.Fit
chart.Margins = New RectangleF(20, 20, 60, 60)
chart.Depth = 20
 
bar = CType(chart.Series.Add(SeriesType.Bar), BarSeries)
bar.Add(100 + random.Next(100), "Toyota", New FillEffect(Color.Red))
bar.Add(100 + Random.Next(100), "Volkswagen", New FillEffect(Color.Gold))
bar.Add(100 + Random.Next(100), "Ford", New FillEffect(Color.Chocolate))
bar.Add(100 + Random.Next(100), "Mazda", New FillEffect(Color.LimeGreen))
 
' add urls to redirect to
bar.Interactivity.URLMode = SeriesURLMode.DataPoints
bar.Interactivity.URLs.Add("http:""www.toyota.com""")
bar.Interactivity.URLs.Add("http:""www.vw.com""")
bar.Interactivity.URLs.Add("http:""www.ford.com""")
bar.Interactivity.URLs.Add("http:""www.mazda.com""")
bar.Interactivity.OpenInNewWindowMode = SeriesOpenInNewWindowMode.Default
bar.Interactivity.DefaultOpenInNewWindow = OpenLinkInNewWindowCheckBox.Checked
 
' configure tooltips
bar.Interactivity.TooltipMode = SeriesTooltipMode.DataPoints
bar.Interactivity.Tooltips.Add("Click here to jump to Toyota home page")
bar.Interactivity.Tooltips.Add("Click here to jump to VW home page")
bar.Interactivity.Tooltips.Add("Click here to jump to Ford home page")
bar.Interactivity.Tooltips.Add("Click here to jump to Mazda home page")
 
Dim svgResponse As New SVGResponse
svgResponse.SvgRenderSettings.EnableInteractivity = True
 
chartServerControl1.ServerConfiguration.DefaultResponse = svgResponse
C#  
Chart chart;
BarSeries bar;
 
bar = (BarSeries)chart.Series.Add(SeriesType.Bar);
 
Random random = new Random();
 
bar.Add(100 + random.Next(100), "Toyota", new FillEffect(Color.Red));
bar.Add(100 + random.Next(100), "Volkswagen", new FillEffect(Color.Gold));
bar.Add(100 + random.Next(100), "Ford", new FillEffect(Color.Chocolate));
bar.Add(100 + random.Next(100), "Mazda", new FillEffect(Color.LimeGreen));

 
// add urls to redirect to
bar.Interactivity.URLMode = SeriesURLMode.DataPoints;
bar.Interactivity.URLs.Add("http://www.toyota.com");
bar.Interactivity.URLs.Add("http://www.vw.com");
bar.Interactivity.URLs.Add("http://www.ford.com");
bar.Interactivity.URLs.Add("http://www.mazda.com");
bar.Interactivity.OpenInNewWindowMode = SeriesOpenInNewWindowMode.Default;
bar.Interactivity.DefaultOpenInNewWindow = OpenLinkInNewWindowCheckBox.Checked;
 
// configure some tooltips
bar.Interactivity.TooltipMode = SeriesTooltipMode.DataPoints;
bar.Interactivity.Tooltips.Add("Click here to jump to Toyota home page");
bar.Interactivity.Tooltips.Add("Click here to jump to VW home page");
bar.Interactivity.Tooltips.Add("Click here to jump to Ford home page");
bar.Interactivity.Tooltips.Add("Click here to jump to Mazda home page");
 
SVGResponse svgResponse = new SVGResponse();
svgResponse.SvgRenderSettings.EnableInteractivity = true;
 
chartServerControl1.ServerConfiguration.DefaultResponse = svgResponse;

SVG and client side scripting

SVG can contain ECMAScript which is very similar to the Jscript language. To embed script with the SVG content generated by the component, you need to modify the EmbeddedScript property of the SVGRenderSettings object attached to the SVGResponse object. For example:

VB.NET  
Dim svgResponse As New SVGResponse
svgResponse.SvgRenderSettings.EnableInteractivity = True
svgResponse.SvgRenderSettings.EmbeddedScript = “script goes here”
C#  
SVGResponse svgResponse = new SVGResponse();
svgResponse.SvgRenderSettings.EnableInteractivity = true;
svgResponse.SvgRenderSettings.EmbeddedScript = “script goes here”;

Linking this script with the SVG content generated by the component is achieved by using the CustomMapAreaAttributes property of the Interactivity and SeriesInteractivity objects. The following example creates a simple pie chart that shows/hides a company logo in the middle of the chart when the mouse hovers over the pies:

VB.NET  
Private Sub AddWatermark(ByVal sFileName As String)
Dim watermark As New Watermark
watermark.StandardFrame.Border.Width = 0
watermark.FillEffect.SetImage(Me.MapPathSecure(Me.TemplateSourceDirectory + "\\" + sFileName))
watermark.AlwaysOnTop = False
watermark.HorizontalMargin = 50
watermark.VerticalMargin = 55
watermark.HorzAlign = HorzAlign.Center
watermark.VertAlign = VertAlign.Center
watermark.Interactivity.CustomMapAreaAttributes = "style = 'visibility:hidden'"
chartServerControl1.Watermarks.Add(watermark)
End Sub
Public Function GetScript() As String
Dim sScript As New StringBuilder
sScript.Append("SVGDocument = null" + vbNewLine)
sScript.Append("function Initialize(LoadEvent)" + vbNewLine)
sScript.Append("{" + vbNewLine)
sScript.Append("SVGDocument = LoadEvent.getTarget().getOwnerDocument()" + vbNewLine)
sScript.Append("}" + vbNewLine)
sScript.Append(vbNewLine)
sScript.Append("function ShowWatermark(watermarkID)" + vbNewLine)
sScript.Append("{" + vbNewLine)
sScript.Append("SVGDocument.getElementById(""Watermark_0"").setAttribute('style', 'visibility:hidden')" + vbNewLine)
sScript.Append("SVGDocument.getElementById(""Watermark_1"").setAttribute('style', 'visibility:hidden')" + vbNewLine)
sScript.Append("SVGDocument.getElementById(""Watermark_2"").setAttribute('style', 'visibility:hidden')" + vbNewLine)
sScript.Append("SVGDocument.getElementById(""Watermark_3"").setAttribute('style', 'visibility:hidden')" + vbNewLine)
sScript.Append("SVGDocument.getElementById(""Watermark_4"").setAttribute('style', 'visibility:hidden')" + vbNewLine)
sScript.Append("if (SVGDocument.getElementById(watermarkID))" + vbNewLine)
sScript.Append("{" + vbNewLine)
sScript.Append(" SVGDocument.getElementById(watermarkID).setAttribute('style', 'visibility:visible')" + vbNewLine)
sScript.Append("}" + vbNewLine)
sScript.Append("}" + vbNewLine)
Return sScript.ToString()
End Function
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
chartServerControl1.Background.Interactivity.CustomMapAreaAttributes = "onmouseover = 'ShowWatermark(""Watermark_4"")'"
Dim legend As Legend
Dim random As New Random
legend = CType(chartServerControl1.Legends(0), Legend)
Legend.Mode = LegendMode.Disabled
Dim chart As Chart
chart = CType(chartServerControl1.Charts(0), Chart)
Dim pie As PieSeries
pie = CType(chart.Series.Add(SeriesType.Pie), PieSeries)
chart.MarginMode = MarginMode.Fit
chart.Margins = New RectangleF(10, 20, 80, 70)
pie.Appearance.FillMode = AppearanceFillMode.DataPoints
pie.Add(100 + Random.Next(100), "Toyota", New FillEffect(Color.Red))
pie.Add(100 + Random.Next(100), "VW", New FillEffect(Color.Blue))
pie.Add(100 + Random.Next(100), "Ford", New FillEffect(Color.Green))
pie.Add(100 + Random.Next(100), "Mazda", New FillEffect(Color.Yellow))
pie.Interactivity.CustomMapAreaAttributesMode = SeriesCustomMapAreaAttributesMode.DataPoints
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(""Watermark_0"") '")
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(""Watermark_1"") '")
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(""Watermark_2"") '")
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(""Watermark_3"") '")
pie.PieStyle = PieStyle.Torus
pie.LabelMode = PieLabelMode.Center
AddWatermark("ToyotaLogo.png")
AddWatermark("VWLogo.png")
AddWatermark("FordLogo.png")
AddWatermark("MazdaLogo.png")
AddWatermark("QuestionMark.jpg")
' add header
Dim header As Label
header = chartServerControl1.Labels.AddHeader("Car Sales per Company<br/><font size ='10'>Demonstrates client scripting and embedded images</font>")
header.TextProps.Backplane.Visible = False
header.TextProps.TextType = TextType.XMLFormatted
header.TextProps.Shadow.Type = ShadowType.GaussianBlur
header.TextProps.Offset = New PointF(5, 5)
header.TextProps.FillEffect.SetSolidColor(Color.Black)
header.TextProps.HorzAlign = HorzAlign.Left
header.TextProps.VertAlign = VertAlign.Top
header.HorizontalMargin = 2
header.VerticalMargin = 2
' add an image border
chartServerControl1.Background.FrameType = FrameType.Image
Dim imageFrame As ImageFrame
imageFrame = chartServerControl1.Background.ImageFrame
imageFrame.SetPredefinedFrameStyle(PredefinedImageFrame.Rectangular)
imageFrame.FillEffect.SetGradient(GradientStyle.Horizontal, GradientVariant.Variant1, Color.PaleTurquoise, Color.CadetBlue)
imageFrame.Border.Color = Color.AliceBlue
imageFrame.BackgroundColor = Color.White
' configure background
chartServerControl1.Background.FillEffect.SetSolidColor(Color.White)
Dim svgResponse As New SVGResponse
 
Dim svgRenderSettings As SVGRenderSettings
svgRenderSettings = svgResponse.SvgRenderSettings
svgRenderSettings.EnableInteractivity = True
svgRenderSettings.EmbeddedScript = GetScript()
svgRenderSettings.EmbedImagesInSVG = True
svgRenderSettings.EmbeddedImageDescription = New JPEGDescription
Dim attributes As New Hashtable
attributes("preserveAspectRatio") = "yMid slice"
attributes("onload") = "Initialize(evt)"
svgRenderSettings.Attributes = attributes
chartServerControl1.ServerConfiguration.DefaultResponse = svgResponse
End Sub
C#  
private void AddWatermark(String sFileName)
{
Watermark watermark = new Watermark();
watermark.StandardFrame.Border.Width = 0;
watermark.FillEffect.SetImage(this.MapPathSecure(this.TemplateSourceDirectory + "\\" + sFileName));
watermark.AlwaysOnTop = false;
watermark.HorizontalMargin = 50;
watermark.VerticalMargin = 55;
watermark.HorzAlign = HorzAlign.Center;
watermark.VertAlign = VertAlign.Center;
watermark.Interactivity.CustomMapAreaAttributes = "style = 'visibility:hidden'";
 
chartServerControl1.Watermarks.Add(watermark);
}
private String GetScript()
{
StringBuilder sScript = new StringBuilder();
sScript.Append("SVGDocument = null \r\n");
sScript.Append("function Initialize(LoadEvent)\r\n");
sScript.Append("{\r\n");
sScript.Append("SVGDocument = LoadEvent.getTarget().getOwnerDocument()\r\n");
sScript.Append("}\r\n");
sScript.Append("\r\n");
sScript.Append("function ShowWatermark(watermarkID)\r\n");
sScript.Append("{\r\n");
sScript.Append("SVGDocument.getElementById(\"Watermark_0\").setAttribute('style', 'visibility:hidden')\r\n");
sScript.Append("SVGDocument.getElementById(\"Watermark_1\").setAttribute('style', 'visibility:hidden')\r\n");
sScript.Append("SVGDocument.getElementById(\"Watermark_2\").setAttribute('style', 'visibility:hidden')\r\n");
sScript.Append("SVGDocument.getElementById(\"Watermark_3\").setAttribute('style', 'visibility:hidden')\r\n");
sScript.Append("SVGDocument.getElementById(\"Watermark_4\").setAttribute('style', 'visibility:hidden')\r\n");
sScript.Append("if (SVGDocument.getElementById(watermarkID))\r\n");
sScript.Append("{\r\n");
sScript.Append("SVGDocument.getElementById(watermarkID).setAttribute('style', 'visibility:visible')\r\n");
sScript.Append("}\r\n");
sScript.Append("}\r\n");
return sScript.ToString();
}
private void Page_Load(object sender, System.EventArgs e)
{
chartServerControl1.Background.Interactivity.CustomMapAreaAttributes = "onmouseover = 'ShowWatermark(\"Watermark_4\")'";
 
Legend legend = chartServerControl1.Legends[0];
legend.Mode = LegendMode.Disabled;
Chart chart = (Chart)(chartServerControl1.Charts[0]);
PieSeries pie = (PieSeries)(chart.Series.Add(SeriesType.Pie));
Random random = new Random();
 
chart.MarginMode = MarginMode.Fit;
chart.Margins = new RectangleF(10, 20, 80, 70);
pie.Appearance.FillMode = AppearanceFillMode.DataPoints;
pie.Add(100 + random.Next(100), "Toyota", new FillEffect(Color.Red));
pie.Add(100 + random.Next(100), "VW", new FillEffect(Color.Blue));
pie.Add(100 + random.Next(100), "Ford", new FillEffect(Color.Green));
pie.Add(100 + random.Next(100), "Mazda", new FillEffect(Color.Yellow));
pie.Interactivity.CustomMapAreaAttributesMode = SeriesCustomMapAreaAttributesMode.DataPoints;
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(\"Watermark_0\")'");
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(\"Watermark_1\")'");
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(\"Watermark_2\")'");
pie.Interactivity.CustomMapAreaAttributes.Add("onmouseover = 'ShowWatermark(\"Watermark_3\")'");
pie.PieStyle = PieStyle.Torus;
pie.LabelMode = PieLabelMode.Center;
 
AddWatermark("ToyotaLogo.png");
AddWatermark("VWLogo.png");
AddWatermark("FordLogo.png");
AddWatermark("MazdaLogo.png");
AddWatermark("QuestionMark.jpg");
// add header
Label header = chartServerControl1.Labels.AddHeader("Car Sales per Company<br/><font size ='10'>Demonstrates client scripting and embedded images</font>");
header.TextProps.Backplane.Visible = false;
header.TextProps.TextType = TextType.XMLFormatted;
header.TextProps.Shadow.Type = ShadowType.GaussianBlur;
header.TextProps.Offset = new PointF(5, 5);
header.TextProps.FillEffect.SetSolidColor(Color.Black);
header.TextProps.HorzAlign = HorzAlign.Left;
header.TextProps.VertAlign = VertAlign.Top;
header.HorizontalMargin = 2;
header.VerticalMargin = 2;
// add an image border
chartServerControl1.Background.FrameType = FrameType.Image;
ImageFrame imageFrame = chartServerControl1.Background.ImageFrame;
imageFrame.SetPredefinedFrameStyle(PredefinedImageFrame.Rectangular);
imageFrame.FillEffect.SetGradient(GradientStyle.Horizontal, GradientVariant.Variant1, Color.PaleTurquoise, Color.CadetBlue);
imageFrame.Border.Color = Color.AliceBlue;
imageFrame.BackgroundColor = Color.White;
// configure background
chartServerControl1.Background.FillEffect.SetSolidColor(Color.White);
SVGResponse svgResponse = new SVGResponse();
svgResponse.Compress = true;
SVGRenderSettings svgRenderSettings = svgResponse.SvgRenderSettings;
svgRenderSettings.EnableInteractivity = true;
svgRenderSettings.EmbeddedScript = GetScript();
svgRenderSettings.EmbedImagesInSVG = true;
svgRenderSettings.EmbeddedImageDescription = new JPEGDescription();
Hashtable attributes = new Hashtable();
attributes["preserveAspectRatio"] = "yMid slice";
attributes["onload"] = "Initialize(evt)";
svgRenderSettings.Attributes = attributes;
chartServerControl1.ServerConfiguration.DefaultResponse = svgResponse;
}

 

 

Copyright Xceed Software Inc

Send Feedback