Export Chart to SVG with viewBox attribute using JavaScript via C++
Contents
[
Hide
]
By default, when the chart is exported to SVG format, the viewBox attribute is not included in its XML. However, Aspose.Cells provides ImageOrPrintOptions.svgFitToViewPort property which when set to true exports the chart to SVG with viewBox attribute.
Export Chart to SVG with viewBox attribute
The following sample code exports the chart to SVG format with the viewBox attribute.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Chart to SVG Example</title>
</head>
<body>
<h1>Chart to SVG Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Convert Chart to SVG</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, ImageOrPrintOptions, ImageType, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Create workbook object from uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Access first worksheet
const worksheet = workbook.worksheets.get(0);
// Access first chart inside the worksheet
const chart = worksheet.charts.get(0);
// Set image or print options with SVGFitToViewPort true
const opts = new ImageOrPrintOptions();
opts.imageType = ImageType.Svg;
opts.svgFitToViewPort = true;
// Save the chart to svg format (returns data in browser)
const svgData = await chart.toImage(opts);
// Create blob and download link for SVG
const blob = new Blob([svgData], { type: 'image/svg+xml' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'Image_out.svg';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download SVG File';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart converted to SVG successfully! Click the download link to get the SVG file.</p>';
});
</script>
</html>
If you open the chart’s SVG in notepad, you will find the viewBox attribute similar to this.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
<span class="n">width</span><span class="o">=</span><span class="s">"100%"</span> <span class="n">height</span><span class="o">=</span><span class="s">"100%"</span>
<span class="n">viewBox</span><span class="o">=</span><span class="s">"0 0 480 288"</span><span class="o">></span></code></pre></div>