Use WebPaintBox draw a SVG


Is it possible to draw a SVG (Scalable Vector Graphics) file using TWebPaintBox? I found there is a method call draw(x,y, TGraphic), This TGraphic only supports icon, bmp or metafile types of images? 

On a different note, I tested to use draw method: I made a bmp image named as factory in the directory. however, it did not work. Please see below the code:

procedure TForm1.WebPaintBox1Paint(Sender: TObject);
  Bitmap : TBitMap;
    Bitmap := TBitMap.Create;

Thank you! 

TBitmap supports SVG.
The mistake here is that LoadFromFile is not synchronous in web.
You'd need to add a Bitmap.OnChange event. This is triggered when the image asynchronously loaded and only then you can draw the bitmap.
This can be used for BMP,PNG,JPG,SVG,ICO,WEBP

Hi Bruno,

Thanks for the reply. I just used Bitmap.OnChange event and loaded BMP, PNG and SVG successfully. However, Webpaintbox. canvas.method works for BMP and PNG but it did not work if I want to draw SVG file. Any suggestion for that?

Thanks again for your help.

Our test works here.
If you experience a problem, please provide details to allow us to reproduce this.

Hi, Here is code I am using for testing: if I LoadFromFile a bmp or pnp type image, paintbox draw method works, but seems not work for the paintbox to draw after I load a SVG file.

procedure TForm1.WebFormCreate(Sender: TObject);
    Bitmap := TBitmap.Create;
    Bitmap.OnChange := LoadSVGFile;
    Bitmap.LoadFromFile('1.svg'); // can be replaced by a SVG, BMP etc.


procedure TForm1.LoadSVGFile(Sender: TObject);

Did you check the browser console for errors?

Sample project with BMP and SVG:

Hi, Thanks  for the sample project. I used your SVG file and draw it using my code and it works. I suspect that the problem is my SVG file since it was converted from emf type image using an application called Inkscape. I guess there is something occurred during the conversion that caused this problem. will investigate the detail, and anyway,  thanks again for your help.

Further question: TWebPaintbox does not have the ElementHandle property that is similar to other common controls like TWebButton? I am looking for the possibility to resize paintbox (with SVG on it) during runtime. have tried directly to change the width and height of paintbox. But it does not work, i.e. only the paintbox's size changed but SVG's size remained as original. Any suggestion for this?


The Canvas has a graphics context (, not an ElementHandle

You can access this with:
  ctx: TJSCanvasRenderingContext2D;
  ctx := webpaintbox1.Canvas.Context;

Awesome, That helps. Thanks, Bruno!