ASE Home Page Products Download Purchase Support About ASE
ChartDirector General
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  can you load an SVG image inot the background of a BaseChart
Posted by Robert Booth on Apr-30-2021 01:34
| Reply | Monitor
Hello

I have my background images as SVG's. Is it possible to load these images into the Chart background.

I was able to load a PNG file using setBackground(). To get around this issue I had to call Inkscape to convert my SVG files into PNG file.  This is a very poor solution.

Can you help me.

Robert

  Re: can you load an SVG image inot the background of a BaseChart
Posted by Peter Kwan on May-02-2021 15:03
| Reply | Monitor
Hi Robert,

Is the final chart output being SVG, or is it PNG/JPG or PDF?

ChartDirector is designed to be able to output SVG, PNG/JPG or PDF, no matter what is the input. You can use a PNG background image, and output the final chart as SVG or PDF. ChartDireoct is unable to allow the background image to be SVG, but the final output to be PNG/JPG or PDF. So we did not support SVG as the background image.

For your case, if the final chart output is SVG, it should be possible to insert your SVG into the SVG generated by ChartDirector by text processing. Like HTML, SVG is just text so it should be easy to programmatically insert one SVG into another SVG as the background image. The SVG starts with the <svg ...> tag. So the method is to insert your background SVG after the <svg ...> tag in the chart image.

Your background SVG may include some headers text that are not SVG, such as the <?xml ...> and <!DOCTYPE ...> headers. They are used to tell the browser that the following text is SVG. The real SVG starts from the <svg ...> tag. So you code should find the <svg ...> tag to obtain the SVG part of background image, and insert it after the <svg ...> tag in the chart image.

If your chart is to be displayed on a browser, you can also set your SVG as the background of the chart at the HTML level. An example is:

<IMG SRC="mychart.svg" style='background-image:url("background.svg")'>

The above method works even if the chart is in PNG/JPG and the background in SVG. It also allows one background image to be shared by many charts without having to embed the background in every charts. Note that the chart needs to have a transparent background so that you can see the background image under the chart.

Regards
Peter Kwan