Page 1 of 1

Load and work SVG Images

Posted: Thu Nov 24, 2022 3:50 pm
by Dirk Geppert
Hi guys,

because of the better quality and scalability I would like to use SVG images instead of PNG.

I would like to be able to draw a number in the image (cluster icon - number of elements).

Is there a way to load an SVG as an image so that I can draw on it with SB functions?

Kind regards

Dirk

Re: Load and work SVG Images

Posted: Thu Nov 24, 2022 4:48 pm
by Peter
Dirk Geppert wrote: Thu Nov 24, 2022 3:50 pmIs there a way to load an SVG as an image so that I can draw on it with SB functions?
You can load a SVG with LoadImage():

Code: Select all

Procedure Loaded(Type, Filename$, ObjectId)
  
  ; Display the image in a new window
  OpenWindow(#PB_Any, 10, 10, 300, 300, "Image", #PB_Window_SizeGadget)
  ResizeImage(ObjectId, 300, 300)
  ImageGadget(#PB_Any, 0, 0, ImageWidth(ObjectId), ImageHeight(ObjectId), ImageID(ObjectId))
  
EndProcedure

Procedure LoadingError(Type, Filename$, ObjectId)
  Debug Filename$ + ": loading error"
EndProcedure

; Register the loading event before calling any resource load command
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())

LoadImage(0, "https://svgsilh.com/svg_v2/1801287.svg")


Re: Load and work SVG Images

Posted: Mon Nov 28, 2022 1:57 pm
by Dirk Geppert
Mmh, I had tried it with the following SVG image. Unfortunately, it does not work.

Code: Select all

https://www.vvo-online.de/tools/weihnachtsmarkt/PuR.svg

Code: Select all

Procedure Loaded(Type, Filename$, ObjectId)
  
  ; Display the image in a new window
  OpenWindow(#PB_Any, 10, 10, 300, 300, "Image", #PB_Window_SizeGadget)
  ResizeImage(ObjectId, 300, 300)
  ImageGadget(#PB_Any, 0, 0, ImageWidth(ObjectId), ImageHeight(ObjectId), ImageID(ObjectId))
  
EndProcedure

Procedure LoadingError(Type, Filename$, ObjectId)
  Debug Filename$ + ": loading error"
EndProcedure

; Register the loading event before calling any resource load command
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())

; LoadImage(0, "https://www.vvo-online.de/tools/weihnachtsmarkt/PuR.png")
LoadImage(0, "https://www.vvo-online.de/tools/weihnachtsmarkt/PuR.svg")


Re: Load and work SVG Images

Posted: Mon Nov 28, 2022 2:48 pm
by Peter
works in Chrome and Edge as expected:
Image

Firefox reports the following:
Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in canvas is empty
This requires some detective work.

Re: Load and work SVG Images

Posted: Tue Nov 29, 2022 7:39 am
by Dirk Geppert
Thank you Peter.

It is good to know that basically SVG images can be loaded with SB functions.
It is therefore necessary to check whether the image can be loaded correctly everywhere....

Re: Load and work SVG Images

Posted: Wed Nov 30, 2022 12:08 pm
by bembulak
I can confirm the error/behaviour:
FireFox 107.0.1 (64-Bit) on macOS Monterey, 12.6.1, Intel CPU.

On Safari it works, though.

Re: Load and work SVG Images

Posted: Wed Nov 30, 2022 1:58 pm
by Dirk Geppert
Since Firefox can load and display the image directly, but not with SB LoadImage() ... where is the error then? With SpiderBasic?