SVG now with opacity

[James D Jarvis]

I've been playing with using SVGs as some of you may have noticed and had a little trouble with the opacity value for transparencies. Well turns out I had just been trying to use the wrong values. The tag "opacity='0.5'" (for example) works just fine.  So as long as the opacity value is expressed as a decimal value between 0 and 1 it will render properly.  So to set the opacity for a path/stroke use "stroke-opacity="   and for the opacity of a fill used "fill-opacity"
the function packcolorN$ here takes an _unsinged long color value and converts it into a string and extracts the alpha value and saves it to a shared value.

Code: (Select All)

'another SVG drawing demo
' a simple demo that shows how to use the SVG parser in QB64-PE to draw images
' requires QB64-PE v3.9.0 or later
'
Dim Shared oflag$ 'needed to convert opacity value of colors
Screen _NewImage(800, 500, 32)
Cls , _RGB32(120, 120, 120)
ih$ = "<svg width='800' height='500'>" 'the header for the SVG image that will be draen into the image buffer
'drawing a triangle using 3 lines  and 2 rectangles
i$ = SVGline$(10, 10, 200, 200, _RGB32(60, 100, 170, 100), 9)
i$ = i$ + SVGline$(200, 200, 200, 10, _RGB32(60, 100, 170), 5)
i$ = i$ + SVGline$(200, 10, 10, 10, _RGB32(60, 100, 170), 5)
i$ = i$ + SVGrect$(30, 30, 100, 100, _RGB32(200, 200, 200, 255), _RGB32(200, 200, 200, 125), 4)
i$ = i$ + SVGrect$(70, 70, 100, 100, _RGB32(100, 100, 200, 55), _RGB32(200, 200, 200, 200), 8)
iff$ = "</svg>" 'the footer for the SVG image that will be drawn into the image buffer
ifull$ = ih$ + i$ + iff$ 'put all the image strings together for the SVG image
s& = _LoadImage(ifull$, 32, "memory") 'draw the SVG image defined by ifull$ into the image buffer s&  by loading the string into memory
'drawing the triangle defined above by the line commands
'simple animation example by changing where the image is put with _putimage
For x = 1 To 100 Step 5
    _Limit 20
    Cls
    _PutImage (0, 0), s&
    _PutImage (110 + x, 30), s&
    _Display
Next x
_FreeImage s&
End
 
Function packcolorN$ (klr As _Unsigned Long)
    'converts an _rgb value into a hex string the SVG parser can use, and extract the opacity value
    packcolorN$ = "#" + Right$("000000" + Hex$(klr And &HFFFFFF), 6)
    oflag$ = _Trim$(Str$(_Alpha(klr) / 255))
End Function
 
Function SVGline$ (X1, Y1, X2, Y2, sklr As _Unsigned Long, swid)
    'build an svg string for a single line
    'convert the numbers to trimmed string values
    xa$ = _Trim$(Str$(X1))
    xb$ = _Trim$(Str$(X2))
    ya$ = _Trim$(Str$(Y1))
    yb$ = _Trim$(Str$(Y2))
    lw$ = _Trim$(Str$(swid))
    kk$ = packcolorN$(sklr)
    op$ = oflag$
    ll$ = "<line fill='none' stroke='" + kk$ + "' stroke-width='" + lw$ + "' stroke-linecap='round' stroke-miterlimit='10'  opacity='" + op$ + "'"
    ll$ = ll$ + " x1='" + xa$ + "' y1='" + ya$ + "' x2='" + xb$ + "' y2='" + yb$ + "'/> "
    SVGline$ = ll$
End Function
Function SVGrect$ (rx, ry, ww, hh, sklr As _Unsigned Long, fklr As _Unsigned Long, sw)
    rxx$ = _Trim$(Str$(rx))
    ryy$ = _Trim$(Str$(ry))
    rww$ = _Trim$(Str$(ww))
    rhh$ = _Trim$(Str$(hh))
    rsw$ = _Trim$(Str$(sw))
    fill$ = packcolorN$(fklr): fop$ = oflag$
    stroke$ = packcolorN$(sklr): sop$ = oflag$
    SVGrect$ = "<rect x='" + rxx$ + "' y='" + ryy$ + "' fill='" + fill$ + "'fill-opacity='" + fop$ + " ' stroke='" + stroke$ + "'stroke-opacity='" + sop$ + "' stroke-width='" + rsw$ + "' stroke-miterlimit='10' width='" + rww$ + "' height='" + rhh$ + "'/>"
End Function