Xceed Logo
Shop
Xceed Chart for WinForms v4.4 Documentation
Welcome to Xceed Chart for WinForms v4.4 / User Guide / Image Export / SVG Export Settings

In This Topic
    SVG Export Settings
    In This Topic

    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