Overview

Enterprise Edition Only Feature.

The Scalable Vector Graphics (SVG) file format is a vector graphics file format, and web development language based on XML. SVG enables web developers to create dynamically generated, high-quality graphics with precise structural and visual control. Using Dundas Chart for ASP.NET, you can create SVG charts based on data-driven, interactive, or personalized graphics.

Advantages vs. Disadvantages

Some of the advantages of SVG include:

Small File Size: The SVG data is in the form of an XML file that only defines the vectors and the graphical primitives. This keeps the file small and makes downloading the file to a browser quick and easy. However, when a series contains a large number of points, or when SVG animation is used, then the file size may grow to become very large thereby undoing the benefits of having used the SVG file format.
Scalable: Since SVG is a vector based format its image size can change without any quality impact to the appearance. This is a attractive feature for printing web pages with embedded SVG documents, thus allowing those documents to retain their high quality output.

Some of the disadvantages of SVG include:

SVG Viewer Required: In cases where SVG charts will viewed by a client who may not have the SVG plug-in, it is a good practice to enable the web page to auto-download and install the plugin. Javascript code to do this can be found in the distributed sample set and is available for use in your projects. Alternatively, one may be obtained from the Adobe website which is located at http://www.adobe.com/svg/viewer/install/main.html.
SVG Drawing Limitations: There are some limitations for SVG drawing which are a result of limitations of SVG itself. In a few cases, when when using some features of GDI+, a picture rendered as a SVG will be slightly different than the same picture rendered using a usual image format such as png, jpeg, or bmp.
The following chart features are not available when using SVG:
- Textured Brushes: Textures are not available.
- Path Gradients: Gradients cannot be used, which affects border skins, the Cylinder chart, various lighting effects for 3D charts, and also soft shadows.
- Image Transparency Color: In .NET it is possible to specify a color of an image that will be painted as transparent. When using SVG this feature is not available.
- Hatching: Not available.
- 3D Cylinder charts cannot be rendered as SVG.

How to Render as SVG

Setting a chart to render in SVG format requires that you simply set the ImageType property. This can be done from within the Property Browser or programmatically.

Example

This example demonstrates how to set the image format type to SVG.

Visual Basic	Copy Code
`Imports Dundas.Charting.WebControl ... ' Set the ImageType to render in SVG format. Chart1.ImageType = ChartImageType.SVG`

C#	Copy Code
`using Dundas.Charting.WebControl; ... // Set the ImageType to render in SVG format. Chart1.ImageType = ChartImageType.SVG;`

Chart Scaling

When SVG Document is rendered in a browser there is possibility that picture could be resized as the browser is resized.

To activate auto resizing the height and width should be set as a % of the browser using the width and height attributes.

There is also an additional attribute, PreserveAspectRatio, that will maintain the proportions of Height and Width preventing image distortion as the image is dynamically resized.

Note
The limitation for a SVG resizable picture is that tooltips functionalities are disabled.

Example

This example demonstrates how to add scaling attributes.

Visual Basic Copy Code

Visual Basic	Copy Code
`Imports Dundas.Charting.WebControl ... ' Enable resizing of SVG Document. Chart1.Attributes("Height") = "70%" Chart1.Attributes("Width") = "70%" ' Resizable picture could keep aspect ratio or not. Chart1.Attributes.Add("preserveAspectRatio", "true")`

Imports Dundas.Charting.WebControl
   ...
       
' Enable resizing of SVG Document.
Chart1.Attributes("Height") = "70%"
Chart1.Attributes("Width") = "70%"
' Resizable picture could keep aspect ratio or not.
Chart1.Attributes.Add("preserveAspectRatio", "true")

C# Copy Code

C#	Copy Code
`using Dundas.Charting.WebControl; ... // Enable resizing of SVG Document. Chart1.Attributes["Height"] = "70%"; Chart1.Attributes["Width"] = "70%"; // Resizable picture could keep aspect ratio or not. Chart1.Attributes.Add("preserveAspectRatio", "true");`

using Dundas.Charting.WebControl;
   ...

// Enable resizing of SVG Document.
Chart1.Attributes["Height"] = "70%";
Chart1.Attributes["Width"] = "70%";

// Resizable picture could keep aspect ratio or not.
Chart1.Attributes.Add("preserveAspectRatio", "true");

In cases where the chart image must be saved, you may use the Save method of the Chart object. Either of the Save methods shown below will allow you to save the XML formatted SVG chart to a file for later use.

    public void Save (string imageFileName, ChartImageFormat format );
    public void Save ( Stream svgStream, ChartImageFormat format );

Example

This example demonstrates how to save a chart as an SVG file.

Visual Basic	Copy Code
`Imports Dundas.Charting.WebControl ... ' Explicit Call to Save method to save the Chart in SVG format. Chart1.Save("SVGChartImage.svg", ChartImageFormat.SVG)`

C#	Copy Code
`using Dundas.Charting.WebControl; ... // Explicit Call to Save method to save the Chart in SVG format. Chart1.Save("SVGChartImage.svg", ChartImageFormat.SVG);`

Custom Painting When Using SVG

Custom drawing is supported using the BackPaint, and PostPaint event of Chart Graphics object. SVG custom drawing uses the same set of methods as would normally be used for painting in other non-vector formats.

Any custom drawn element may also have Href links, tooltips, or both. This is example using a Paint event to draw two circles which are selectable, and also have tooltips.

Example

This example demonstrates how to work with custom painting.

Visual Basic Copy Code

Visual Basic	Copy Code
Imports Dundas.Charting.WebControl ... If (sender = ChartArea) Then ' Initialize a hot region. All elements drawn before EndHotRegion ' called will be selectable and have the same tooltip. ChartGraphics.StartHotRegion("www.dundas.com", "Dundas Software") ' Get the drawing rectangle for the first ellipse. Dim ellipseRect As RectangleF = e.ChartGraphics.GetAbsoluteRectangle(New RectangleF(10, 10, 20, 20)) ' Draw the first ellipse. e.ChartGraphics.DrawEllipse(New Pen(Color.Red), ellipseRect) ' Get the next ellipse rectangle. ellipseRect = e.ChartGraphics.GetAbsoluteRectangle(New RectangleF(5, 5, 10, 10)) ' Draw the next ellipse. e.ChartGraphics.DrawEllipse(New Pen(Color.Red), ellipseRect) ' End the hot region. e.ChartGraphics.EndHotRegion End If

Imports Dundas.Charting.WebControl
   ...
   
If (sender = ChartArea) Then
    ' Initialize a hot region. All elements drawn before EndHotRegion
    ' called will be selectable and have the same tooltip.
    ChartGraphics.StartHotRegion("www.dundas.com", "Dundas Software")
    ' Get the drawing rectangle for the first ellipse.
    Dim ellipseRect As RectangleF = e.ChartGraphics.GetAbsoluteRectangle(New RectangleF(10, 10, 20, 20))
    ' Draw the first ellipse.
    e.ChartGraphics.DrawEllipse(New Pen(Color.Red), ellipseRect)
    ' Get the next ellipse rectangle.
    ellipseRect = e.ChartGraphics.GetAbsoluteRectangle(New RectangleF(5, 5, 10, 10))
    ' Draw the next ellipse.
    e.ChartGraphics.DrawEllipse(New Pen(Color.Red), ellipseRect)
    ' End the hot region.
    e.ChartGraphics.EndHotRegion
End If

C# Copy Code

C#	Copy Code
using Dundas.Charting.WebControl; ... if(sender is ChartArea) { // Initialize a hot region. All elements drawn before EndHotRegion // called will be selectable and have the same tooltip. ChartGraphics.StartHotRegion("www.dundas.com", "Dundas Software"); // Get the drawing rectangle for the first ellipse. RectangleF ellipseRect = e.ChartGraphics.GetAbsoluteRectangle(new RectangleF(10, 10, 20, 20 )); // Draw the first ellipse. e.ChartGraphics.DrawEllipse(new Pen(Color.Red),ellipseRect); // Get the next ellipse rectangle. ellipseRect = e.ChartGraphics.GetAbsoluteRectangle( new RectangleF( 5, 5, 10, 10 )); // Draw the next ellipse. e.ChartGraphics.DrawEllipse( new Pen(Color.Red),ellipseRect); // End the hot region. e.ChartGraphics.EndHotRegion(); }

using Dundas.Charting.WebControl;
   ...

if(sender is ChartArea)
{
  // Initialize a hot region. All elements drawn before EndHotRegion
  // called will be selectable and have the same tooltip.
  ChartGraphics.StartHotRegion("www.dundas.com", "Dundas Software");
  // Get the drawing rectangle for the first ellipse.
  RectangleF ellipseRect = e.ChartGraphics.GetAbsoluteRectangle(new RectangleF(10, 10, 20, 20 ));
  // Draw the first ellipse.
  e.ChartGraphics.DrawEllipse(new Pen(Color.Red),ellipseRect);
  // Get the next ellipse rectangle.
  ellipseRect = e.ChartGraphics.GetAbsoluteRectangle( new RectangleF( 5, 5, 10, 10 ));
  // Draw the next ellipse.
  e.ChartGraphics.DrawEllipse( new Pen(Color.Red),ellipseRect);
  // End the hot region.
  e.ChartGraphics.EndHotRegion();
}

Drawing with a transparent color can be used to create selectable regions, or regions with a specific tooltip that are not visible when the chart is rendered. Similar to the sample above, the code must begin with StartHotRegion method, and end with EndHotRegion methods. All chart drawing is done in the usual way, but instead of using another color, the transparent color gets used.

Binary Streaming and SVG

Similar to rendering charts in a typical image format, you can render a SVG chart using either the Binary Streaming method, or as an Image Tag. When rendering your chart using the binary streaming method, an <embed> tag is used, however, if you render your chart as an image, then an html <img> tag is used instead.

For more information on rendering charts, see the topic on Rendering Methods.

Example

This example demonstrates how to use binary stream rendering as SVG.

HTML	Copy Code
`<embed src="WebForm3.aspx" pluginspage=http://www.adobe.com/svg/viewer/install/ width="500" height="300" TYPE="image/svg+xml">`

Using the Automatic SVG Viewer Download

In order for your end-users to see SVG file, they must have the Adobe SVG viewer installed on their machine. This viewer plugin is available for free from Adobe, and can be downloaded from their website located at: http://www.adobe.com/svg/viewer/install/main.html.

Example

This example demonstrates how to use the Adobe-provided script, which may be embedded in an HTML page to automatically download, and install the Adobe SVG Viewer, that is of course, if the viewer is not already installed on the end-user's machine. The script files "svgcheck.js", and "svgcheck.vbs" are necessary to make it all work. Place these files on your website, and include them in your HTML document as shown below.

JavaScript	Copy Code
`<script language="JavaScript" src="svgcheck.js"></script> <script language="VBScript" src="svgcheck.vbs"></script>`

The following code must be added to your application in order to call the JavaScript code above, which will in turn test for the availability of the SVG viewer.

Example

JavaScript	Copy Code
`<script language="JavaScript"> <!-- checkAndGetSVGViewer(); // --> </script>`

Dundas Chart for ASP.NET
Using SVG Rendering
See Also Send comments on this topic.

Overview

Advantages vs. Disadvantages

How to Render as SVG

Example

Chart Scaling

Example

Example

Custom Painting When Using SVG

Example

Binary Streaming and SVG

Example

Using the Automatic SVG Viewer Download

Example

Example

See Also