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 Function
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)
'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
