03-24-2025, 06:42 PM
(This post was last modified: 03-24-2025, 06:44 PM by James D Jarvis.)
Got to work some more with SVG graphics. I suppose it may eventually become a useful library of routines. The demo goes through a few simple commands.
this one has an embedded SVG image drawn with Adobe Illustartor. It makes used of deflate/inflate and base64 encoding for sharing data via posts.
Code: (Select All)
'a few routines and a demo for drawing with SVGs defined inside the program
'SVG library example
'Requires QB64-PE v4.1 or later to run or compile
'
Screen _NewImage(600, 400, 32)
Randomize Timer
_PrintMode _KeepBackground
_Title "SVGdraw and related routines"
'====================== DEMO =========================================
numcirc = Int(50 + Rnd * 124)
cs$ = ""
For c = 1 To numcirc
SVGcircle cs$, Int(Rnd * _Width), Int(Rnd * _Height), Int(10 + Rnd * 50), Int(1 + Rnd * 12), _RGB32(rand0(255), rand0(255), rand0(255), rand0(255)), _RGB32(rand0(255), rand0(255), rand0(255), rand0(255))
Next c
SVGdraw cs$, 0, 0 'have to call this routine after setting the SVG up with the earleir SVG command to display the SVG
Print "A bunch of filled circles. <press any key>"
Sleep
Cls
ss$ = ""
SVGtriangle ss$, 100, 100, 200, 200, 100, 250, 3, _RGB32(200, 200, 0), _RGB32(100, 100, 100)
SVGtriangle ss$, 150, 100, 250, 200, 150, 250, 3, _RGB32(200, 200, 0), _RGB32(100, 100, 200, 128)
SVGtriangle ss$, 200, 100, 300, 200, 200, 250, 3, _RGB32(200, 0, 200), _RGB32(100, 200, 100, 128)
SVGdraw ss$, 0, 0
Print "A few overlapping triangles. <press any key>"
Sleep
Cls
ss$ = ""
Dim pp(12)
pp(1) = 10: pp(2) = 10
pp(3) = 100: pp(4) = 100
pp(5) = 200: pp(6) = 110
pp(7) = 300: pp(8) = 200
pp(9) = 250: pp(10) = 150
pp(11) = 200: pp(12) = 70
SVGpath ss$, pp(), 8, _RGB32(100, 200, 200, 100)
SVGdraw ss$, 0, 0
Print "A path. <press any key>"; ""
Sleep
Cls
SVGfpath ss$, pp(), 8, _RGB32(100, 100, 200, 100), _RGB32(200, 100, 200, 190)
SVGdraw ss$, 0, 0
Print "Redrew as a filled path. <press any key>"; ""
Sleep
Cls
Dim tshape(8)
tshape(1) = 100: tshape(2) = 30
tshape(3) = 150: tshape(4) = 100
tshape(5) = 50: tshape(6) = 100
tshape(7) = 100: tshape(8) = 30
ts$ = ""
SVGpolyA ts$, tshape(), 3, _RGB32(0, 100, 140, 200), _RGB32(0, 200, 200, 190)
SVGdraw ts$, 0, 0
For x = 600 To 0 Step -10
_Limit 30
Cls
SVGdraw cs$, 0, 0
SVGdraw ts$, x, 20
Print "Animation example using a shape defined as a polygon and the circle background from earlier."
_Display
Next x
_AutoDisplay
Sleep
Cls
SVGellipse es$, 100, 100, 45, 25, Int(1 + Rnd * 12), _RGB32(255, 255, 255, 255), _RGB32(rand0(255), rand0(255), rand0(255), rand0(255))
SVGellipse es$, 200, 100, 12, 45, Int(1 + Rnd * 12), _RGB32(255, 255, 255, 255), _RGB32(rand0(255), rand0(255), rand0(255), rand0(255))
SVGdraw es$, 0, 0
Print "Filled Ellipses. <press any key>"
Sleep
'========================= routines =============================================================
Sub SVGcircle (svgimage$, cx, cy, radius, stroke, strokeK~&, fillK~&)
'converst input data to a svg definition of a circle
'fillK~k& and strokK~& are the 32 biut colors for the fill color and the stroke colors of the circle
'stroke is the thickness of the perimieter fof the circle
'SVGdraw must be used following this routine to display the shape drawn
r& = _Red32(fillK~&): g& = _Green32(fillK~&): b& = _Blue32(fillK~&): a& = _Alpha32(fillK~&)
fk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
fo$ = _Trim$(Str$(a& / 255))
r& = _Red32(strokeK~&): g& = _Green32(strokeK~&): b& = _Blue32(strokeK~&):: a& = _Alpha32(strokeK~&)
sk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
so$ = _Trim$(Str$(a& / 255))
svgimage$ = svgimage$ + "<circle cx='" + Tnum$(cx) + "' cy='" + Tnum$(cy) + "' r='" + Tnum$(radius) + "'fill-opacity='" + fo$ + "' fill='" + _Trim$(fk$) + "'"
svgimage$ = svgimage$ + "'stroke-opacity='" + so$ + "' stroke='" + _Trim$(sk$) + "' stroke-width='" + _Trim$(Str$(stroke)) + "' />"
End Sub
Sub SVGtriangle (svgimage$, x1, y1, x2, y2, x3, y3, stroke, strokeK~&, fillK~&)
'converst input data to a svg definition of a triangle
'fillK~k& and strokK~& are the 32 biut colors for the fill color and the stroke colors of the circle
'stroke is the thickness of the perimeter of the triangle
'SVGdraw must be used following this routine to display the shape drawn
r& = _Red32(fillK~&): g& = _Green32(fillK~&): b& = _Blue32(fillK~&): a& = _Alpha32(fillK~&)
fk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
fo$ = Tnum$(a& / 255)
r& = _Red32(strokeK~&): g& = _Green32(strokeK~&): b& = _Blue32(strokeK~&):: a& = _Alpha32(strokeK~&)
sk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
so$ = _Trim$(Str$(a& / 255)) 'stroke opacity doesn't seem to be supported but i'm still calulating it for now
svgimage$ = svgimage$ + "<polygon points='" + Str$(x1) + "," + Str$(y1) + Str$(x2) + " ," + Str$(y2) + Str$(x3) + "," + Str$(y3) + " '"
svgimage$ = svgimage$ + "fill-opacity='" + fo$ + "' fill='" + _Trim$(fk$) + "'"
svgimage$ = svgimage$ + "'stroke-opacity='" + so$ + "' stroke='" + _Trim$(sk$) + "' stroke-width='" + Tnum$(stroke) + "' />"
End Sub
Sub SVGpath (svgimage$, Pt(), stroke, strokek~&)
'draw a path described in the single dimensionalarray Pt()
'stroke is thickness of path draw
'strokek~& is color of the stroke to be drawn
'SVGdraw must be used following this routine to display the shape drawn
r& = _Red32(strokek~&): g& = _Green32(strokek~&): b& = _Blue32(strokek~&):: a& = _Alpha32(strokek~&)
sk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
so$ = Tnum$(a& / 255)
totp = UBound(Pt): If totp Mod 2 <> 0 Then totp = totp - 1
dpath$ = "M"
For n = 1 To totp
dpath$ = dpath$ + Str$(Pt(n))
Next n
svgimage$ = svgimage$ + "<path d='" + dpath$ + "'fill-opacity='0' stroke ='" + sk$ + "' stroke-width='" + Tnum$(5) + "' />"
End Sub
Sub SVGfpath (svgimage$, Pt(), stroke, strokek~&, fillK~&)
'draws a filled path described in the single dimensionalarray Pt()
'stroke is thickness of path draw
'strokek~& is color of the stroke to be drawn
'fillK~& is the color to fill the contained space withing the drawn path
'SVGdraw must be used following this routine to display the shape drawn
r& = _Red32(strokek~&): g& = _Green32(strokek~&): b& = _Blue32(strokek~&):: a& = _Alpha32(strokek~&)
sk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
so$ = _Trim$(Str$(a& / 255))
r& = _Red32(fillK~&): g& = _Green32(fillK~&): b& = _Blue32(fillK~&): a& = _Alpha32(fillK~&)
fk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
fo$ = _Trim$(Str$(a& / 255))
totp = UBound(Pt): If totp Mod 2 <> 0 Then totp = totp - 1
dpath$ = "M"
For n = 1 To totp
dpath$ = dpath$ + Str$(Pt(n))
Next n
svgimage$ = svgimage$ + "<path d='" + dpath$ + "' fill='" + fk$ + "' fill-opacity='" + fo$ + "' stroke-linejoin='miter' stroke ='" + sk$ + "' stroke-width='" + Tnum$(stroke) + "' />"
End Sub
Sub SVGpolyA (svgimage$, Pt(), stroke, strokek~&, fillK~&)
'draws a filled polygon described in the single dimensionalarray Pt()
'stroke is thickness of path draw
'strokek~& is color of the stroke to be drawn
'fillK~& is the color to fill the contained space withing the drawn path
'SVGdraw must be used following this routine to display the shape drawn
r& = _Red32(strokek~&): g& = _Green32(strokek~&): b& = _Blue32(strokek~&):: a& = _Alpha32(strokek~&)
sk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
so$ = _Trim$(Str$(a& / 255))
r& = _Red32(fillK~&): g& = _Green32(fillK~&): b& = _Blue32(fillK~&): a& = _Alpha32(fillK~&)
fk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
fo$ = _Trim$(Str$(a& / 255))
totp = UBound(Pt): If totp Mod 2 <> 0 Then totp = totp - 1
dpath$ = "M"
For n = 1 To totp Step 2
dpath$ = dpath$ + Str$(Pt(n)) + "," + Str$(Pt(n + 1))
Next n
svgimage$ = svgimage$ + "<polygon points='" + dpath$ + " '"
svgimage$ = svgimage$ + " fill='" + fk$ + "' fill-opacity='" + fo$ + "'stroke-linejoin='miter' stroke ='" + sk$ + "' stroke-width='" + Tnum$(stroke) + "' />"
End Sub
Sub SVGellipse (svgimage$, cx, cy, rx, ry, stroke, strokeK~&, Fillk~&)
'converst input data to a svg definition of a circle
'fillK~k& and strokK~& are the 32 biut colors for the fill color and the stroke colors of the circle
'stroke is the thickness of the perimieter fof the circle
'SVGdraw must be used following this routine to display the shape drawn
r& = _Red32(Fillk~&): g& = _Green32(Fillk~&): b& = _Blue32(Fillk~&): a& = _Alpha32(Fillk~&)
fk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
fo$ = _Trim$(Str$(a& / 255))
r& = _Red32(strokeK~&): g& = _Green32(strokeK~&): b& = _Blue32(strokeK~&):: a& = _Alpha32(strokeK~&)
sk$ = _Trim$("#" + hexpad$(r&) + hexpad$(g&) + hexpad$(b&))
so$ = _Trim$(Str$(a& / 255))
svgimage$ = svgimage$ + "<ellipse cx='" + Tnum$(cx) + "' cy='" + Tnum$(cy) + "' rx='" + Tnum$(rx) + "' ry='" + Tnum$(ry)
svgimage$ = svgimage$ + "' fill-opacity='" + fo$ + "' fill='" + _Trim$(fk$) + "'"
svgimage$ = svgimage$ + "'stroke-opacity='" + so$ + "' stroke='" + _Trim$(sk$) + "' stroke-width='" + _Trim$(Str$(stroke))
svgimage$ = svgimage$ + " transform='rotate(" + Tnum$(erot) + ")' />"
End Sub
Function Tnum$ (num)
'returns a numbers as a trimmed string (I worte this because it is briefer in the strings used to define the SVGs)
Tnum$ = _Trim$(Str$(num))
End Function
Function hexpad$ (k&)
'makes sure a hexidecimal value of a number is returned as 2 characters
If k& < 16 Then
hexpad$ = "0" + Hex$(k&)
Else
hexpad$ = Hex$(k&)
End If
End Function
Sub SVGdraw (svgi$, px, py)
'completes an svg layer perviously defined in svgimage$ and display it starting fron the point px.py
'is meant to fill a screen
Dim simg&
'get the screen size and build the header
svgheader$ = "<svg width='" + _Trim$(Str$(_Width)) + "' height='" + _Trim$(Str$(_Height)) + "' >"
svgfooter$ = "</SVG>"
svgimage$ = unpackSVG$(svgi$)
If svgimage$ = "NOT_A_PACKED_SVG" Then
SVGdrawing$ = svgheader$ + svgi$ + svgfooter$ 'attacjing the header,mains svg definiton string and the footer
simg& = _LoadImage(SVGdrawing$, 32, "memory") 'loads the completed SVgdrawing described in the string
_PutImage (px, py), simg& 'put the drawing on the screen
_FreeImage simg& 'free up the memory
Else
SVGdrawing$ = svgheader$ + svgimage$ + svgfooter$ 'attacjing the header,mains svg definiton string and the footer
simg& = _LoadImage(SVGdrawing$, 32, "memory") 'loads the completed SVgdrawing described in the string
_PutImage (px, py), simg& 'put the drawing on the screen
_FreeImage simg& 'free up the memory
End If
End Sub
Function SVGpack$ (svg$)
dc$ = _Deflate$(svg$, 10)
SVGpack$ = "SVG64" + _Base64Encode$(dc$)
End Function
Function unpackSVG$ (packed$)
unp$ = "NOT_A_PACKED_SVG"
If Left$(packed$, 5) = "SVG64" Then
datal = Len(packed$) - 5
s0$ = Right$(packed$, datal)
s1$ = _Base64Decode$(s0$)
unp$ = _Inflate$(s1$)
End If
unpackSVG$ = unp$
End Function
Function rand0 (num)
'returns a random # from 0 to num
rand0 = Int(Rnd * (num + 1))
End Functionthis one has an embedded SVG image drawn with Adobe Illustartor. It makes used of deflate/inflate and base64 encoding for sharing data via posts.
Code: (Select All)
'Packed SVG example
'this program requires QB64-Phoenix Edition 4.1 or later
'
'displayes an encoded SVG graphic
'the oriignal data was compressed by use of the _deflate$ commad and _base64encode$ to make it safe to share as a text file on HTML
'
Screen _NewImage(1200, 600, 32)
_FullScreen _SquarePixels , _Smooth
'the following lines are a packed SVg file The original SVG was draewn in Adobe Iluustrator and simplified by hand
'to embed in a program and encoded for compression and safe transmission as tetx file
esvg$ = "SVG64eNrdXN2P5MZx/1cGyIMSoDlh9XcDToDzCHpSngzkXaDXvkVGOuF2odj316c+u5uc2Zt1LECwdZglh0M2q6vr81fV+t3PP7x+PP3xP07f/BfA2TsP23o"
esvg$ = esvg$ + "GJ5+gn4SfeF0XCOd2xZ+WcPXntkT66yJdceEX+hGf9Ys+i0dPzy70rD/nxZ/TL/lcr3SBBtwWfQMes97Z8FjxbrqOlLhVKJG/OHpZ6De/4Lscfpa0AZJDz3t8M5KBo+"
esvg$ = esvg$ + "E0Nh4Zn8pKTVt4PH4HOGDagL/RvaC0eqUoLkqe10+aPjhJGVQeokfs1qCfwt+Bbwx8C80P5of5W9B3JqUBJhqC0ABMDDMPzwNNHz+ZGY2/4SQKHouj9cDjBsyA6iL+Hhyxq"
esvg$ = esvg$ + "2zGQs9/AzMy6hIXPvKLL5EEABcU/+DvER/Fk0pDEgfxFaCfiHxGzhOn+Arwh+5grtEPldiAF4nKQKxWsYpMQ7Fludqst91KO10Xp+tCA+JVHsbtecWyNj3t9WmRX2CJIvYkB"
esvg$ = esvg$ + "1sk2cGziJ+CaxLxA3jblehqLL40PV4WRzeDyxMZphIs1gfyov6Wr0gkCeOVWM9SvAgRwEK7LsmE8UDyPAkRXpms/JqEb9fVJWK9qCQuQ8UpZifqELfBW2ABQkpM3VDvgIe/"
esvg$ = esvg$ + "EgnwkX79Zcmomyw/uIR8J1LtZwFfVFK3RcxAXuTdjaTQtDjqnZXPVSNNEhILNDAZ+CzOIJ8zvT5fhc2FKGMLoxpWbczMF2Qq9GLSHhJuz8wkbc94xGkgTz4SLatQuYiCk"
esvg$ = esvg$ + "bj0mYgeIie2rreF7qS/m0xq8bw0cYn8dn448p1NFJqntU6Km9VY1E34zuaLWOiIwEBmaAFVZxEHHPxK37LMsgkJzGXP8w2DvqjMz2ymhI3MXxIwWinVOJ7Dwm/Cv8G4QBxwsiCiloePt2"
esvg$ = esvg$ + "HnC2bCePL2JatNK2JbB4Fi20RepkG6xIAO4HUQMYGHH5JJz6Zj8q/VrWrL9Vn+okSQMIhk04fEuH6v7uvL6Zt//8/fDa8WAyl5/P6N43T7n56vV3ziXz58u5a1n"
esvg$ = esvg$ + "L6R530mo+GJ7CAGZSGtS0gHaV0jBWcHKNwi4V7MnCxiTwr/kFiUKxqe2l2OuKMkvNlALANpNQ+R+Mm6ydAFhy5sCWB4jaaerA4fyGLnJyEtyklQp5H5elCPF5nvkde"
esvg$ = esvg$ + "yikqEs7gu0Y/IvPfb5NvqooadJnQUlKQ3NfOKUT9VFs/WM+rYafFmMESGxOkGkU5QgfJqZIIoC/0gSu412ghibC6+Es9REgqJA/mqvoKy1k/X6/PPL0+n188//PTyp0+"
esvg$ = esvg$ + "ff8RV/vGH18/Pf/lXHG+t4UTEtwinfpCrHpkUSzsVXK+a/w0FxCSmXi45fIcXtr/g17DS2V/xLKGq4vlnuop8plO6jMt0K3V5DRVCl7riUpvimKpGnez3Isvmr0HCGbI"
esvg$ = esvg$ + "n5M7I47D2XBe9MapvvbMQxH1/8YHEip5HJnl+pdNXv4NZrTVkCw6xrt7Hp2X1p90XuwOFpIV6QslLX2EbKmTtjPPGNuaVsC2e2yO2xYzqgdSHrVv8ykIsfo+YRg6DvjD"
esvg$ = esvg$ + "HmGFX+TlqiOnVCIXZCF0i6rNwKhZS5kZn9jbh1een7fXEM0HBRop4IoGIvse+BU6kdcWXmJ4WgNPuC/5ayzn65k+Ahi3WCjPnSooXT+/43+c/vn5k3mT89vHp+c8fX0k"
esvg$ = esvg$ + "E6etMEmpDeCdJaY0lRyVp+oK/4lxjK+W9JNV7JO1W7/eB/vXVQ8mrnGEkiUcLGUG0sMRzkk6nd7xDNmMCVuTakKh+kKtoC9DA43TCUSIvH1rJuSuyZ6axRMbE5yyTeiq"
esvg$ = esvg$ + "q3B7TUkOOREuKlayJHuQq1HMooZ0CTti3rxATxZYYMW0oSDNimK4ji7uSMYtDpfC3qldl1RD7Ki4ELgGj4upCosgMj3G6vakyYBjHjkxtf3Lqlx0FMOy9+G4e2rOhIZc"
esvg$ = esvg$ + "p6Ym8SmJ3r4FRGIGbBAhOk5tNlFCCKkl2KIwiPxY1+KqaXtD97QpBnOAmCQlFtZgJUdSJvnMXcffEYcrG/JyVsedx4p0Sv4hMJbtQ5ZqXly9hThTDZGaLBTqHaO4SGg6"
esvg$ = esvg$ + "FXMX4nYUbRcD1hbkTkNSV/vUl5IC/so+mSJMyw8gxRNzYCdI5z5yOlBOMFBk0V6w32YfkDlWj9Ci5g8U2wmvOmC3ns6wmcDREs0sS325zzmuh8zaFe2H4f+Ecr97CsU"
esvg$ = esvg$ + "uXhTm9jpdA84w0rky+9TNkwx2Gdc0RhlE26yX+AY3xC5Irkpk48OhRRmAueY6+wAI4ySEl2WLc4Q+BPSW5jD76PTpKi9l3OmhUyMJ8N2bZcY5JFmFCUqLKpmQHPUuec+"
esvg$ = esvg$ + "A7SMkQ9KzOrGjYGfX6iLB3HBeRZR3jfF9Vu0mkz0+BkygyaLJMsIN3kvBjTqJcIpGSiBSVEEV0Eg1JeGSilrKpGUqSoR1FCOY8804+osplSpZM95KKmGWEecoI52e2Q1"
esvg$ = esvg$ + "KT7CLcy21IItHskFfSM9dX9xAMBPGDZJ8h8elXPK9fAbrn7V/w14KMSS2eAkYvEHZuIoVYMEodjtfPbvdOpNn4vx5pUmATvYFxRS06x4lmAbxKYVAkjW7optPgu6K2Ay"
esvg$ = esvg$ + "ZkJOqH4b0N+BxZxXAO4yssUk2yGhYfEik6lm1gLkWxlSaC3VcqiSxtGubxOkuO7dV5yPdEZoWtW9LMxsS82+R5pcMULrMfkOxG0nMCHKqlpRZIMzbB0Bybd6I40ksC"
esvg$ = esvg$ + "x4skfMrlezaC/+urwW4gMflwABo4IL0q8Ve9dlV9nqCiomyr3QokHYnTs6uc0whFR+ho67tH4ADtePybRthRb9/Fjg1LNmNIvsO28Q5YOKzpwK02NRNBTQXosWwGQS"
esvg$ = esvg$ + "+CDYuY5IE0aAar96dx/4hGRKQn+GJvlA5JRFpE+IO9w/dUWp4w2Ecye4OVLKMNJBNohVU6Uj+LDyVKQrk84yi/0eyOoFlTGNVmHHg1SJfiUS7+4aU8z"
esvg$ = esvg$ + "NIcp6KE76Z08kjqHjEYl1VuFJA3WsXo+no+XnlKn2Ivs8AUYldxsr+hcuyFASQC7aKQ+EpRUfiVFvL7gOyAX9dYvW+ES+BqAwathRaUEAhdnC+P3DOGD41cSN"
esvg$ = esvg$ + "ykkhI586B8JkqwfDdM1DxFva93RjGvqGOgVKoyBKFvisw7CXWlehTu1DdYPW8KMF7sr9eKmtRY2sKiK+kA+UzgCpagphWBxjTLfJjMRuvuvGluRxbh"
esvg$ = esvg$ + "IXaAmQByuJ3n8uVcs4FRYuuRAzlT5tpVRdu+T7FH1rkXldB7YwQdgyMg+/6uMXIfI+n7d8e/cQw/Vp7vTRIzSVy1HZYszGXYbBAx57ZToiGFS83wk1N1"
esvg$ = esvg$ + "H9YaFMQVdaQiFczxYRrjSnC/mObxrWe7OW6HqqjlKWgDKykA1iEp2at0llxf7C8PxYIVLrP5+Gda6nmJrPTIafgxMrcSfHIKSPz2S60xHv07Fs614Kf2MlOGr2dm"
esvg$ = esvg$ + "O/M7Fj0GgQtg24MXUUn4LfmwTGt0xOSzFGmOJct/QtGNEz1Gx1xdF3ABLuwqGfiJlMJxUtVX93EARAWgzQRQcgjPOWSevFrW7BMmGux6cQKbhJtuCdDiG2jxTUqy0nqSt"
esvg$ = esvg$ + "OhWeN7y5rSHTpyWajT7lcYKulo1isjOPqzBzls50SSoaYLejtqe1XS2OaVvjNl6E367LO6V+XIWpDAoNZzrcnRgxkO9MTpyk1/LubPCudEyMSkcSkXduxnkmdQNLD4EjS"
esvg$ = esvg$ + "aDVfrth2CtBPpEeytL30GwfgKKiiGMQeE9eV/QWrMA4EFfVWedzPqphFIybMrERE1t0AxdfKOqYqIsP9EZYoEkcPcqyh8+pA9pAnARAwmj9p4U+gIlNh8QFK+S5w8y57W"
esvg$ = esvg$ + "2bEA5TA1P1TTz6O4VxjPUxk+Ae5o7B9j6CA4TpfCocB8h/GY3rDmsRxraLCQYD8lP0e6IMGJ9dfBwvxMgjGWzoBB0XXWJ4PBD6bDee0Rj7jbQvqVFupuMVFPTolg3yvum"
esvg$ = esvg$ + "kag23UQG2eEGrXgDvfh1NNOrZooXCxIzNc2+q7bkNB5+ZOZN6zVehUFcFzfvcNk9GPYdFb4irIxZdMFsKXiWVBJWBtxFbO9VKC7Zhzb8L0ZoN3lCEIAAOMUIpEmMLmc2b"
esvg$ = esvg$ + "mnrTXJWHgJrn7LWEdDFFcYkA+CCNtAU6ZHbbnuXxMHcNO2N6pJxsGq7nLofUSQFJkHhS4xD2QVEdQ6gy+vV7As8CNRMh7dSy0Zk7mUKY4kxR3w49Mos5YRfxYeh5FoMHx"
esvg$ = esvg$ + "5fBB9e81pOBYNiSDM8/N13l8uadnXZNAPE8V7R0Af4zveKE9c5fPr+cLzo0R2Ox/u+vHP8v2O8VnMOvdACtDY+sZUqTrwaSIRGjYsvLGrcV+bScFdBO6jSHyDy066Po2/"
esvg$ = esvg$ + "8dP3r9fmnpxFt/B7/fcC3/vzp+afXF0L4qYsC49QTn3gqyELYnfGPdIKHyOICdDPgd/vvZnZ9CWV2bAaw4L8BZ+yMlksr47m8BBXDyF6z/LKwbgGbAL5z0Tu1gKfqzpfp"
esvg$ = esvg$ + "gf+mkXG+RAjSsT1/3q5Pt5RwSZomYCXpQJL7mS6SeD2qiKeKZTHSX+A2ET3IVerjKoUqHbnk8HZBXFsa+O143v5/1XnSnvMKAUJ9WlZcpN0X6m6BtfiYuaEF7VUIxSf68"
esvg$ = esvg$ + "hXCoDNlZQbdkvWwKgNc2S2WLR1rg6N+2KuFMPcNq7PJb1ULB2g0hRdzIJ8M0HL7JKG3uSp2G9ycYok1jYdx/JQQGJwUJogib/tr2QKKt1psd63E1hmlgN4BDItvFfi5gB"
esvg$ = esvg$ + "05QqUOoSiIw/3ioD/WATUxG3XKGeZMvUMUejpoIU1vBLBIJB56BJz1CAD3uVKPgJwV0l4Tivf0ZuXSSMM8dbz0g1xFFG6t9YTDJfiahhHK3DWscofRu1pODqKcuUq6aU7"
esvg$ = esvg$ + "UkUaKKv2LOF6OZFUExWLT4vYG1TlJZu9qLa2hR+ra77z4F/2mTSHJng9TlpEsMKwjG9EOQ5iafsUtWBBSprJ5lcDtHC9AHp7rfMDoPIdyMuPHxT6NqNKxCbd3ksz4SBr4"
esvg$ = esvg$ + "yK6GmXY1zCnC8dLYPLdJUupjJgBGnq3wEUf7EzgzdaN35beMlZtO55W7eIaTKWH33JqhZzLDx7zgVNd68KdG/t6TZ+bL2hdybxcOujqSIw5jF+bS9dC/YMDIVyRgFynKn"
esvg$ = esvg$ + "W+0CQ0VrxTJU9h+AarO4WTQ0TY5wzjCJviwwUc6V4OYjIE7FW2B6sKIsLq0XHEYIfsxqioWJmncCHULq0QFGI5W2Cx0nBLJZKK+zWV+FnFNDeWqzDtq6po7faA9Jkjli6"
esvg$ = esvg$ + "ouz2Lxtx3pfteRvmc/lUA52aYSKLEGXGfSQ3byPhYKELY7Lk9xn+6iNMkryrww4UDJWZFTN/joHgtueiGd7HlbUjwo7FywH51nNw6c38WtSZQSJQ3H8uihhhnU2PerpLm"
esvg$ = esvg$ + "StvW9VJLbggpNPdYee0PxJWqPdKEdP5k4FVzn2Zd70eiK/3XucjEpjwTcOuCsDTxvangTN3a3pTf1xwn7MYxmt52kSHuFDVJ0N0jkbrHezBMOe7SypvHZ1oj9yRzg3Ham"
esvg$ = esvg$ + "DBWpatv88Eaym0aybw2HwlT1k3YrA3fBQUdFLQgpc5fkZjh01Pcn+W3T3QVOdxc4212gmwucbi5w+71KIsUyhuwtWKICOk13s4CE9p1ZMFXbqpnGOC2dZdXSBCb5Ag0nS"
esvg$ = esvg$ + "S4E1vzGOwhAxJUnqXCOQv26Twh1/dEOC96JQb2+m9caRhLL4zj8mUuZsmDbfgmnEtevOfXboEyxoaB9kFlB3Cob5yIrUJRe5T6nOwrUO6WtwBvZTWz7PZcGAI+SMkwO8R"
esvg$ = esvg$ + "D7GpR/iH5NEGe3ZU1TcxfUtFHEv9kIdw9EM3xV9ZEMe9f5MDWN6dLtEwPVNpjSiDRPHhEokjBu9uRmMeq07Ox6zNhCvInWnCitik73TAjIY6wzPHUzunpqMqUhcaptVLl"
esvg$ = esvg$ + "uyzI+BwjQ73fwWQV9h+72Tbb3gow4NTf1pyz+6j0QIzpz08a7uX8sTEvbPWATDnw1uLEmUXH9jP9ue2nai06cNl34fWo6Gltedm3AVvO/3VM2NrHJZr4u92qUh+scM9Wo"
esvg$ = esvg$ + "fbcnrccY271mzmUE+Brve4UU803iZ65YKpSQyDZTJweQ5ekSN/CiP3/6aVi9XC68seXl9fOn/3miS+uqvlQuLYbRhXHpx+fXp8/XZzwQuLLOaJPiYafj8S0cab9XBnFdC"
esvg$ = esvg$ + "NrFMrbxRslr1BSTZxGpS8ZsadTWPo7IDR9Yr00U/a6EFQP7MBn7PRuuUuY8tdWST/3AVwG9WcXpYKE/l+r3oKbyTfZp9H1DyPxoWSqMnUPlXv/IPo4JNGEIWqj1mhUlPt"
esvg$ = esvg$ + "ZN6hxJoYmkTgh0V3bhslDkY6EdFNyjwANCPwsMqh2J+PbbNQ1oj/u9aBODbvClKH6l3coTXg3Owk+x/wo3zJiCGeaimTEHg7ZubxdKbreJy7QjZxW8U5c+wiLd/kstPcS"
esvg$ = esvg$ + "MRTJUaapHDFULausRdZFuqEiTBGllAyqn9Ik/tuqUVkIbNRT7vwYUjXj9dtgcbhGvEB4siJAOvM0soTzMhVU3bWq0SLbZhsVt2D1pW6vTjkuYGr+S9AJTDkxOq+gxUSLY"
esvg$ = esvg$ + "LuzQ6ExqK567hW1qD/ekJqI09nIYWFlTdwamTZuV/ZI05ClWQLVamldRCZKubXd66POUjdku7rOVn/OGf12VeJeQKW3mvpNiiFLNsgvkRLxGEVG2FiCJ8SGJx3Jx36ZtG"
esvg$ = esvg$ + "atXEoO2kN8DMCiwNtKzgGpGuvxPBrLiGmEQmd5NYpmzmaUHScbD7rbsnfsYYspQ0tTWE7ao9rlypM9kN7cvFc8xcRpADv1+SfRMRNMF0oAYXZehh9ImrezTZqCbjs"
esvg$ = esvg$ + "N7hU5Wqy1wZNCo7CFlGEHmxk59rWgLoHfkNmseJahsRBP3QcqGi07TQ+plf07aodWa+lv/8QHbTn07VI82ONgKChOwrXJNq4K7fSaTZG5aUGWF5BuybYt+Q3poX1glUn"
esvg$ = esvg$ + "mHU2aiXSf/8UQpIvFxShh2/Y8UsVT6neOU0s/kmUs/c3fO3iMijdDq9rao6xYMl7UBFawR6g1JMN5l5V0VWQiEofGmikZn4Pqrmcj/A0X9oTA="
'
'lets display the image
SVGdraw esvg$, 100, 100
Print "press any key to see the SVG code"
Sleep
Print unpackSVG$(esvg$)
'_Clipboard$ = unpackSVG$(esvg$) 'uncommnet if you want to dump the unencoded SVG defiiniton paste in a file (without the header and footer)
_Delay .5
Print
Print "pretty large isn't it? The SVg files prodcued by Adobe Illustrator are pretty verbose"
Print "The packed SVG from the string esvg$ in the code is "; Len(esvg$); "characters in size."
Print "The unpacked SVG is "; Len(unpackSVG$(esvg$)); " characters in size."
Print "<press any key>"
Sleep
x = 0
For s = 1 To 8
SVGdrawscale esvg$, x, 0, s 'displaying the SVG image at varios scales
x = x + (s * 32)
Next s
Print "The chief advantage is scalability. Images may be scaled without pixelation."
Sleep
System
Function SVGpack$ (svg$)
'takes an SVG descrpiton (any string really) and deflaets it to save space
'the deflated data is convereted to base64 encoding to male is safe to share as text
dc$ = _Deflate$(svg$, 10)
SVGpack$ = "SVG64" + _Base64Encode$(dc$)
End Function
Function unpackSVG$ (packed$)
unp$ = "NOT_A_PACKED_SVG"
If Left$(packed$, 5) = "SVG64" Then
datal = Len(packed$) - 5
s0$ = Right$(packed$, datal)
s1$ = _Base64Decode$(s0$)
unp$ = _Inflate$(s1$)
End If
unpackSVG$ = unp$
End Function
Sub SVGdraw (svgi$, px, py)
'completes an svg layer perviously defined in svgimage$ and display it starting fron the point px.py
'is meant to fill a screen
Dim simg&
'get the screen size and build the header
svgheader$ = "<svg width='" + _Trim$(Str$(_Width)) + "' height='" + _Trim$(Str$(_Height)) + "' >"
svgfooter$ = "</SVG>"
svgimage$ = unpackSVG$(svgi$)
If svgimage$ = "NOT_A_PACKED_SVG" Then
SVGdrawing$ = svgheader$ + svgi$ + svgfooter$ 'attacjing the header,mains svg definiton string and the footer
simg& = _LoadImage(SVGdrawing$, 32, "memory") 'loads the completed SVgdrawing described in the string
_PutImage (px, py), simg& 'put the drawing on the screen
_FreeImage simg& 'free up the memory
Else
SVGdrawing$ = svgheader$ + svgimage$ + svgfooter$ 'attacjing the header,mains svg definiton string and the footer
simg& = _LoadImage(SVGdrawing$, 32, "memory") 'loads the completed SVgdrawing described in the string
_PutImage (px, py), simg& 'put the drawing on the screen
_FreeImage simg& 'free up the memory
svgimage$ = ""
End If
End Sub
Sub SVGdrawscale (svgi$, px, py, scale)
'completes an svg layer perviously defined in svgimage$ and display it starting fron the point px.py
'is meant to fill a screen
'scale changes the scale of the drawing 1.0 is 100% while 0.5 would be 50& and 4 would be 400%
Dim simg&
'get the screen size and build the header
svgheader$ = "<svg width='" + _Trim$(Str$(_Width)) + "' height='" + _Trim$(Str$(_Height)) + "' ><g transform='scale(" + _Trim$(Str$(scale)) + ")' >"
svgfooter$ = " </g></SVG>"
svgimage$ = unpackSVG$(svgi$)
If svgimage$ = "NOT_A_PACKED_SVG" Then
SVGdrawing$ = svgheader$ + svgi$ + svgfooter$ 'attacjing the header,mains svg definiton string and the footer
simg& = _LoadImage(SVGdrawing$, 32, "memory") 'loads the completed SVgdrawing described in the string
_PutImage (px, py), simg& 'put the drawing on the screen
_FreeImage simg& 'free up the memory
Else
SVGdrawing$ = svgheader$ + svgimage$ + svgfooter$ 'attacjing the header,mains svg definiton string and the footer
simg& = _LoadImage(SVGdrawing$, 32, "memorym") 'loads the completed SVgdrawing described in the string
_PutImage (px, py), simg& 'put the drawing on the screen
_FreeImage simg& 'free up the memory
svgimage$ = ""
End If
End Sub
