# Render to HTML
## Content
**BitmapGraphicsRendering**, **SvgGraphicsRendering**, and **SvgRendering** generate raster or vector content that can be embedded in HTML.
The rendering targets accept dimensions expressed in pixels, while the rectangle supplied to Render uses points.
The following example converts chart dimensions from points to pixels by using **C1XLBook.TwipsToPixels**.
```csharp
using C1.Excel;
float width = 450;
float height = 300;
int widthPx = C1XLBook.TwipsToPixels(20 * width);
int heightPx = C1XLBook.TwipsToPixels(20 * height);
```
### Render to PNG
**BitmapGraphicsRendering** renders chart or diagram content to a raster image.
The following example renders a chart to PNG and converts the output to a Base64-encoded string for embedding in HTML.
```csharp
using System;
using System.IO;
using C1.Chart;
using C1.Excel;
using C1.Util;
// chart is an existing configured FlexChart or FlexDiagram.
float width = 450;
float height = 300;
int widthPx = C1XLBook.TwipsToPixels(20 * width);
int heightPx = C1XLBook.TwipsToPixels(20 * height);
string png;
using (var rendering =
new BitmapGraphicsRendering(widthPx, heightPx))
{
chart.Render(rendering, 0, 0, width, height);
using (var stream = new MemoryStream())
{
rendering.Bitmap.SaveAsPng(stream);
png = Convert.ToBase64String(stream.ToArray());
}
}
```
The resulting Base64-encoded PNG can be embedded using an HTML image element.
```html
```
**BitmapGraphicsRendering** relies on the imaging components supplied through C1.Excel.
### Render to SVG With SvgGraphicsRendering
**SvgGraphicsRendering** generates SVG content through the DS graphics rendering engine.
```csharp
using System.Text;
using System.Xml;
using C1.Chart;
using C1.Excel;
using C1.Util;
// chart is an existing configured FlexChart or FlexDiagram.
// width, height, widthPx, and heightPx are defined
// as shown in the preceding example.
string svg;
using (var rendering =
new SvgGraphicsRendering(widthPx, heightPx))
{
chart.Render(rendering, 0, 0, width, height);
var builder = new StringBuilder();
rendering.ToDocument().Save(
builder,
new XmlWriterSettings
{
Encoding = Encoding.UTF8,
Indent = true
});
svg = builder.ToString();
}
svg = svg.Substring(svg.IndexOf("SvgGraphicsRendering** renders text as vector outlines. The generated text is not selectable as ordinary text.
### Render to SVG With SvgRendering
**SvgRendering** is designed for resource-constrained platforms such as Blazor, Android, and iOS. The following example renders chart content to SVG.
```csharp
using C1.Chart;
using C1.Excel;
using C1.Util;
// chart is an existing configured FlexChart or FlexDiagram.
// width, height, widthPx, and heightPx are defined
// as shown in the preceding example.
string svg;
using (var rendering =
new SvgRendering(widthPx, heightPx))
{
chart.Render(rendering, 0, 0, width, height);
svg = rendering.ToText();
}
```
**SvgRendering** produces vector output with selectable text. Text rendering depends on the fonts available in the viewing environment.
### Embed SVG in HTML
SVG content generated by **SvgGraphicsRendering** or **SvgRendering** can be embedded directly in an HTML document.
The following example writes generated SVG markup into an HTML file.
```csharp
using System.Xml;
// svg contains the generated SVG markup.
using (var writer = XmlWriter.Create(
"Chart.html",
new XmlWriterSettings { Indent = true }))
{
writer.WriteStartElement("html");
writer.WriteStartElement("body");
writer.WriteRaw(svg);
writer.WriteEndElement();
writer.WriteEndElement();
}
```
The generated SVG markup can also be incorporated into dynamically generated HTML content.