Claudia,

<< Maybe a TImage control, which accepts SVG data assignment would be the
solution ? >>

As long as you can express the image as something like:

data:image/png;base64,......

then you can do so now (at run-time, design-time won't work).  Just assign
the value to the ImageName property instead of a file name.

If you have any other questions, please let me know.

Tim Young
Elevate Software
www.elevatesoft.com

Thanks Tim,

unfortunately also this variant is buggy across the browsers, (and the results even differ from SVG in TPage).

IE9 and EWB-IDE : works never fo SVG, works only for PNG
Opera: works only once(!?) for SVG, works always for PNG
FireFox: works always for SVG and PNG
Chrome: works always for SVG and PNG

This is my source:


procedure TForm1.btnSVGClick(Sender: TObject);
begin
Image1.ImageName := 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIxNTAiPg0KICAgIDxkZWZzPg0KICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZDEiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4NCiAgICAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYigyNTUsMjU1LDI1NSk7c3RvcC1vcGFjaXR5OjEiIC8+DQogICAgICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYigxNjAsMTYwLDI1NSk7c3RvcC1vcGFjaXR5OjEiIC8+DQogICAgICAgPC9saW5lYXJHcmFkaWVudD4NCiAgIDwvZGVmcz4NCiAgIDxyZWN0IHg9IjEwJSIgeT0iMTAlIiB3aWR0aD0iODAlIiBoZWlnaHQ9IjgwJSIgcng9IjEwIiByeT0iMTAiIGZpbGw9InVybCgjZ3JhZDEpIiAvPg0KPC9zdmc+DQo=';
end;

procedure TForm1.btnPNGClick(Sender: TObject);
begin
Image1.ImageName := 'data:image/png;base64,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';

end;

Claudia,

<< unfortunately also this variant is buggy across the browsers, (and the
results even differ from SVG in TPage).

IE9 and EWB-IDE : works never fo SVG, works only for PNG >>

This is probably due to the fact that we force IE8 compatability in the EWB
HTML loader file.  I'm going to be adding an option to specify what level of
IE support is required in the project options.  This is necessary for Canvas
support also.

Thanks,

Tim Young
Elevate Software
www.elevatesoft.com

From another post of Tim:
> The more examples, the better.

So here we go (with the patched webctrls.wbs as described in the initial post):

http://62.108.41.186/ewbdemochart82649916562/

Try this also on mobile devices (rotating the screen etc).
If you use Opera, you have nice gradients, in any other browser the colors are flat. (Programmatically had to disable gradients via browser detection for thers than Opera, because chrome outputs only a black window).
IE doesn't work at all. have no solution, but also no urgent need.

Claudia,

<< So here we go (with the patched webctrls.wbs as described in the initial
post): >>

Very nice, thanks.

Tim Young
Elevate Software
www.elevatesoft.com