SVG gradient example 1

[James D Jarvis]

A simple example showing how to make use of the SVG library in QB64 PE 3.9.0 and higher.

There are some peculiarities in how SVG and XML tags used to define the SVG graphics are parsed and rendered. I'm still learning how they all work myself and want to share as I go along. 

The _LOADIMAGE command is doing a lot of work here and the ability to load a SVG file from a string buffer out of memory let's us treat SVGs as an alternative and more power version of DRAW.

Go review  _LOADIMAGE - QB64 Phoenix Edition Wiki when you get a chance. 

The example program here will draw a big rounded-corner rectangle with a gradient fill in the middle of the screen. Press any key to exit. Read the comments for a hopefully useful description of what is going on in the program.

Code: (Select All)

 'SVG gradient example 1

'by James D. Jarvis Nove,ber 16,2023

'

'how to build an SVG gradient inside a rectangle with rounded corners within the program without needing to call an external file

'

Screen _NewImage(800, 500, 32)

Dim As Long simg 'we are going to draw the SVG into this image



'make a minimal header and footer to setup the SVG

svgheader$ = "<svg x='0' y='0' width='" + _Trim$(Str$(_Width)) + "' height= '" + _Trim$(Str$(_Height)) + "'  >" 'makes sure the SVG will match the screen 1 to 1

svgfooter$ = "</svg>" 'this indicates the end of the SVG



'gd$ is going to be the linear gradient

'gradients have to be defined before they can be called later in the SVG

'

gd$ = "  <defs> <linearGradient id='LGrad1' x1='0' y1='0' x2='0' y2='500'  >" 'x1,y1,x2,y2 establishes the gradient will run from top to bottom

'removing coordinate data from the line above will cause the gradient to be rendered from left to right as opposed to top to bottom

gd$ = gd$ + "      <stop class='stop1' offset='0%'stop-color='#550000' />" 'the gradient at this point is starting out dark red

gd$ = gd$ + "      <stop class='stop2' offset='40%'stop-color='red' />" 'the gradient at this point is default red

gd$ = gd$ + "      <stop class='stop3' offset='60%'stop-color='red' />" 'the gradient at this point is default red

gd$ = gd$ + "      <stop class='stop4' offset='100%'stop-color='#550000' />" 'the gradient is ending in dark red

gd$ = gd$ + "    </linearGradient> "

gd$ = gd$ + " </defs>"



'scaling the postion of the rectangle to be drawn relative to the dimensions of the screen

'this will result in a centered rectangle being drawn on the screen

xoff$ = _Trim$(Str$(Int(_Width / 20))) '_trim$ needs to be used to trim off the leading space STR$ creates to make sure the value is properly entered

yoff$ = _Trim$(Str$(Int(_Height / 20)))

rw1$ = _Trim$(Str$(Int(_Width * .9)))

rh1$ = _Trim$(Str$(Int(_Height * .9)))

'i$  will hold the actual image data

'rect defines a rectanglt at x,y with height and width, rx,ty define the rounded rectangle corners

i$ = "<rect x='" + xoff$ + "' y='" + yoff$ + "' height='" + rh1$ + "' width='" + rw1$ + "'rx='24' ry='24' fill='url(#LGrad1)' stroke='white' stroke-width='9' />"

i$ = i$ + "<rect x='" + xoff$ + "' y='" + yoff$ + "' height='" + rh1$ + "' width='" + rw1$ + "'rx='24' ry='24' fill='none' stroke='black' stroke-width='3' />"

'note in the second rectangle definition above that draw the back line is set to a fill='none' as opposed to 'transparent' the library doesn't render 'none' but will render 'transparent' as a grey box



svg$ = svgheader$ + gd$ + i$ + svgfooter$ 'put all the strings together into one string called svg$

simg = _LoadImage(svg$, 32, "memory") 'load and render the defined SVG$ into simg

_PutImage , simg 'put simg on the screen

Sleep

Cls

Print "Here is the SVG created by this program"

Print

Print svg$

_FreeImage simg 'clear that image out of memory unless you want to keep using it of course