C++ Builder 10.2 Tokyo + TeeChart > 系列の線をSVG出力する

```txt:動作環境
RAD Studio 10.2 Tokyo Update 3
TeeChart Standard v2016.17.160129 32bit VCL
```

### 概要

- TeeChartのSeries1の線をSVGファイルとして出力する

### 参考

- [SVG入門](http://www.tohoho-web.com/ex/svg.html) @ とほほのWWW入門
- [MDN web docs > Paths](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths)

情報感謝です。

### 実装

```Unit1.h
//---------------------------------------------------------------------------

#ifndef Unit1H
#define Unit1H
//---------------------------------------------------------------------------
#include <System.Classes.hpp>
#include <Vcl.Controls.hpp>
#include <Vcl.StdCtrls.hpp>
#include <Vcl.Forms.hpp>
#include <Vcl.ExtCtrls.hpp>
#include <VCLTee.Chart.hpp>
#include <VCLTee.Series.hpp>
#include <VclTee.TeeGDIPlus.hpp>
#include <VCLTee.TeEngine.hpp>
#include <VCLTee.TeeProcs.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published:	// IDE で管理されるコンポーネント
	TChart *Chart1;
	TButton *Button1;
	TLineSeries *Series1;
	TMemo *Memo1;
	void __fastcall Button1Click(TObject *Sender);
private:	// ユーザー宣言
public:		// ユーザー宣言
	__fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------
#endif
```

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include <memory>
#include <DateUtils.hpp>
#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
	Chart1->Series[0]->XValues->DateTime = true;
	Chart1->BottomAxis->DateTimeFormat = L"nn:ss";

	TDateTime dt;

	dt = Now();

	double yval;
	for (int idx=0; idx < 10; idx++) {
		yval = (1+ idx) % 2;
		Series1->AddXY(dt, yval, "", clRed);
		dt = IncSecond(dt, 1);
	}

	//
	Memo1->Lines->Clear();
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	int len = Series1->Count();

	float xval, yval;
	int xpos, ypos;
	String msg;

	Screen->Cursor = crHourGlass; // マウスカーソル

	std::unique_ptr<TStringList> wrkSL(new TStringList);

	String strwrk;
	wrkSL->Add(L"<?xml version=\"1.0\"?>");
	wrkSL->Add(L"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\">");

	// Pathの例
	// from http://www.tohoho-web.com/ex/svg.html
	// <path d="M 5 20 L 20 5 L 35 20 L 20 20" stroke="black" fill="transparent" stroke-width="2" />
	strwrk = L"<path d=\"";
	for(int idx=0; idx < len; idx++) {
		xval = Series1->XValue[idx];
		yval = Series1->YValue[idx];
		xpos = Series1->CalcXPos(idx);
		ypos = Series1->CalcYPos(idx);
		if (idx == 0) {
			strwrk += String().sprintf(L" M %d %d", xpos, ypos);
		} else {
			strwrk += String().sprintf(L" L %d %d", xpos, ypos);
		}
	}
	strwrk += "\" stroke=\"red\" fill=\"transparent\" stroke-width=\"1\" />";
	wrkSL->Add(strwrk);

	wrkSL->Add(L"</svg>");

	wrkSL->SaveToFile(L"test.svg");

	Screen->Cursor = crArrow; // マウスカーソル
}
//---------------------------------------------------------------------------
```

### 画面

![2019-09-08_09h33_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/3aa9128c-7ecd-28c6-0395-900af415d007.png)

### 生成されるSVGファイル

以下の内容の"test.svg"ファイルが生成される。

`
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d=" M 54 31 L 123 312 L 192 31 L 261 312 L 330 31 L 400 312 L 469 31 L 538 312 L 607 31 L 676 312" stroke="red" fill="transparent" stroke-width="1" />
</svg>
`

以下はブラウザで見た結果。

![2019-09-08_09h34_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/d2c3e41d-2754-6e52-2b3c-3529883b77b5.png)