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

[grymmjack]

Great example! Thanks for sharing your learnings!