Load and work SVG Images

Just starting out? Need help? Post your questions and find answers here.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Load and work SVG Images

Post 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
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Load and work SVG Images

Post 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")

Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Load and work SVG Images

Post 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")

User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Load and work SVG Images

Post 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.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Load and work SVG Images

Post 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....
bembulak
Posts: 71
Joined: Wed Feb 26, 2014 9:53 am

Re: Load and work SVG Images

Post 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.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Load and work SVG Images

Post by Dirk Geppert »

Since Firefox can load and display the image directly, but not with SB LoadImage() ... where is the error then? With SpiderBasic?
Post Reply