{"id":61444,"date":"2023-11-07T03:01:44","date_gmt":"2023-11-06T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61444"},"modified":"2023-11-07T16:35:41","modified_gmt":"2023-11-07T06:35:41","slug":"svg-shapes-collaboration-tidy-up-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-collaboration-tidy-up-tutorial\/","title":{"rendered":"SVG Shapes Collaboration Tidy Up Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Collaboration Tidy Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_cleanup.jpg\" title=\"SVG Shapes Collaboration Tidy Up Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Collaboration Tidy Up Tutorial<\/p><\/div>\n<p>It&#8217;s the day further to the recent <a title='SVG Shapes Iframe Srcdoc Double Quote Tutorial' href='#svgsisdqt'>SVG Shapes Iframe Srcdoc Double Quote Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-iframe-srcdoc-double-quote-tutorial\/'><p>\nWill we be leaving our SVG Show Some Shapes project with a blog posting titled, weirdly, &#8220;SVG Shapes Iframe Srcdoc Double Quote Tutorial&#8221;?  Who&#8217;s to know?  We&#8217;ll see what tomorrow brings?!\n<\/p><\/blockquote>\n<p> &#8230; worry, when we can finally say &#8230;<\/p>\n<blockquote><p>\nNo worries!\n<\/p><\/blockquote>\n<p>But, just as with leaf blowing, we&#8217;ve just moved the issue onto another &#8220;poor sap&#8221; of a blog posting with another weird title &#8230; &#8220;SVG Shapes Collaboration Tidy Up Tutorial&#8221; &#8230; it having come to pass that this also sounds funny as a final blog posting in a series.  So we&#8217;re sacking the author!  <font size=2>Oh!<\/font> <font size=1>It&#8217;s moi.<\/font><\/p>\n<p>Let&#8217;s explain the issue with a speech bubble <font size=1>(and who doesn&#8217;t want to be lectured to by a speech bubble?)<\/font> &#8230;<\/p>\n<p><img style='width:95%;' src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_cleanup-00.jpeg'><\/img><\/p>\n<p>What have we got at our disposal, on our Apache\/PHP\/MySql Linux web server, as an independent back up for deleting these temporary files?  How about &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Korn Shell' href='https:\/\/en.wikipedia.org\/wiki\/KornShell'>Korn Shell<\/a> scripting &#8230;<\/li>\n<li><a target=_blank title='crontab information from computerhope ... thanks' href='http:\/\/www.computerhope.com\/jargon\/c\/cron.htm'>crontab<\/a> scheduling<\/li>\n<\/ul>\n<p> &#8230; as a great <a target=_blank title='Fred and Ginger' href='http:\/\/www.youtube.com\/watch?v=MsS7B8nyw5Y'>Fred and Ginger<\/a> style combination, if ever we heard one?!<\/p>\n<ul>\n<li>Korn Shell scripting &#8230; <font color=blue>\/etc\/init.d\/cron_is_working.ksh  # had appended to it &#8230;<br \/># <\/font><font color=purple size=5>ksh -c &#8216;for i in `find \/tmp -name &#8220;existtemporarily*.*&#8221; -mmin +122`; do rm -f &#8220;$i&#8221;; done&#8217;<\/font><font color=blue><br \/># is called every minute by &#8230;<\/font><\/li>\n<li>crontab scheduling<font color=blue> &#8230; via entry<br \/>* * * * * \/etc\/init.d\/cron_is_working.ksh<\/font><\/li>\n<\/ul>\n<p> &#8230; as a sweep<sub>erer<\/sub> up<sub>erer<\/sub> of the web application moving on too fast to get to its own tidying up &#8230;<\/p>\n<p><object type='application\/pdf' data=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_cleanup.pdf\" style=width:95%;height:900px;><\/object><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-collaboration-tidy-up-tutorial\/'>SVG Shapes Collaboration Tidy Up Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgsisdqt'>Previous relevant <a target=_blank title='SVG Shapes Iframe Srcdoc Double Quote Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-iframe-srcdoc-double-quote-tutorial\/'>SVG Shapes Iframe Srcdoc Double Quote Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Iframe Srcdoc Double Quote Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_webinspector.jpg\" title=\"SVG Shapes Iframe Srcdoc Double Quote Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Iframe Srcdoc Double Quote Tutorial<\/p><\/div>\n<p>It&#8217;s tempting to think, for a given scenario, you&#8217;ve written code that can satisfy you forever.  How about, for a day?!  Well, with the recent <a title='SVG Shapes Aesthetics Tutorial' href='#svgsat'>SVG Shapes Aesthetics Tutorial<\/a> it may well have ended up &#8220;a day&#8221; before we noticed an issue.  Yes, a step forwards was a step sideways, because something we&#8217;d thought was a streamlining had interfered with the audio\/video media data inputs via HTML iframe <a target=_blank title='HTML iframe srcdoc attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_srcdoc.asp'>srcdoc<\/a> means of display.<\/p>\n<p>This was caused by us being overcautious.  This is what we overcompensated for.  We started using Javascript code that went like <font size=1>(the pseudo code)<\/font> &#8230;<\/p>\n<p><code><br \/>\n document.getElementById('myiframe').srcdoc=<strong>\"<\/strong><i>[a Javascript string which contains double quotes]<\/i><strong>\"<\/strong>;<br \/>\n<\/code><\/p>\n<p> &#8230; and what we &#8220;overcompensated&#8221; doing, and caused problems for every audio\/video media data item was to code like <font size=1>(the pseudo code)<\/font> &#8230;<\/p>\n<p><code><br \/>\n document.getElementById('myiframe').srcdoc=<strong>\"<\/strong><i>[a Javascript string which contains double quotes].replace(\/\\\"\/g, \"\\\\\" + '\"')<\/i><strong>\"<\/strong>;<br \/>\n<\/code><\/p>\n<p>Wrong move! <font size=1>Even though, often, backslash escaping is the answer to data delimitation issues, it is not the case for this scenario!<\/font>  We&#8217;d not tested this change with enough of the &#8220;out there&#8221; functionalities we were trying to cater for.<\/p>\n<p>Of course, the danger of this increases as a project moves through its phases.  And that is why it is good to have a separated testing team on a sizeable project, being your project&#8217;s &#8220;honest broker&#8221;, unafraid to tell you in more polite terms than &#8230;<\/p>\n<blockquote><p>\nYou stuffed it!\n<\/p><\/blockquote>\n<p> &#8230; that &#8230; you stuffed it.  And as projects go on, if your &#8220;honest broker&#8221; is only there to report weekly, it might be hard to backtrack and wade through a week of changes to pinpoint the source of the problem.  Even a day&#8217;s worth of wading made it reasonably difficult for us, but luckily we had an interim (and extra to the usual) backup of the code to help pinpoint this issue.<\/p>\n<p>Supposing you leave the double quotes unattended, what happens examining the HTML iframe content?  Well, you see the use of HTML entity &amp;quot; used a lot, but no inherent problems despite this, whereas our Javascript replace did much more damage, with audios and videos effectively destroyed by what we&#8217;d attempted, above.<\/p>\n<p>Which beggars the question &#8230;<\/p>\n<blockquote><p>\nWhere do you see HTML entity &amp;quot; used a lot?\n<\/p><\/blockquote>\n<p>Well, in a web inspector, opening up the HTML iframe of relevance to view its document.body content, you&#8217;ll see these &amp;quot; HTML entities used a lot.  See how great are your modern web browser Web Inspectors for web development?  Now, it might be that the code things you rely on here do need you to cater for these &amp;quot; in the logic, but, for us, we had either already catered for it, or we didn&#8217;t need to, especially.  Either way &#8230; yayyyyyy!!! &#8230; and ahhhhhhhh!!  What a relief!<\/p>\n<p>Will we be leaving our SVG Show Some Shapes project with a blog posting titled, weirdly, &#8220;SVG Shapes Iframe Srcdoc Double Quote Tutorial&#8221;?  Who&#8217;s to know?  We&#8217;ll see what tomorrow brings?!<\/p>\n<p>Try <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html---------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html---------GETME\">tenth draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-iframe-srcdoc-double-quote-tutorial\/'>SVG Shapes Iframe Srcdoc Double Quote Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgsat'>Previous relevant <a target=_blank title='SVG Shapes Aesthetics Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-aesthetics-tutorial\/'>SVG Shapes Aesthetics Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Aesthetics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_viewbox.jpg\" title=\"SVG Shapes Aesthetics Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Aesthetics Tutorial<\/p><\/div>\n<p>In a sizeable online web application project, it can be that you &#8220;put off&#8221; annoyances to follow through on &#8220;the main game&#8221;, so to speak.  But, don&#8217;t forget to come back to at least try to fix the annoyances!<\/p>\n<p>And so it was with our SVG Shapes project ever since we allowed &#8220;shadowing&#8221; into the mix, because &#8220;shadowing&#8221; involved faux <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> element content to the right and bottom not agreeing with the SVG element dimensions defined.  Annoying?  Yes &#8230; very, but still just, &#8220;annoying&#8221;.  We wanted to get the &#8220;main game&#8221; bedded down first.<\/p>\n<p>Also, into the mix, is our trepidation meddling with a &#8220;dimensions issue&#8221; that involves units that are not &#8220;%&#8221; nor &#8220;vh&#8221; nor &#8220;vx&#8221;.  You&#8217;ll probably have read a zillion <a target=_blank title='Responsive design' href='https:\/\/www.w3schools.com\/html\/html_responsive.asp'>responsive design<\/a> webpage advice segments telling you to stick with &#8220;%&#8221; <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=kx_Yr4WhyBI'><font size=1>&#8230; if only &#8220;%&#8221; was a dance?!<\/font><\/a>  It&#8217;s true, though, that if you want happiness across the board, and even to get noticed at all on the search engines, you stand more of a chance designing web content that never mentions a &#8220;hard and fast&#8221; dimension.  Of course, no programmer that&#8217;s done anything &#8220;involved&#8221; can stick to that rule, but those people can use Javascript DOM and its [element].<a target=_blank title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>() methodology (or some other approach) to help here, sometimes.  However, with SVG work, we find, at least, that you have many &#8220;hard and fast&#8221; dimensioning situations cropping up.<\/p>\n<p>And so, regarding SVG, with this aesthetics only issue, up to today, swimming away in the background of our thinking regarding this annoyance, was that we had not resorted to much <a target=_blank title='SVG viewBox attribute information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/viewBox'>&#8220;viewBox&#8221; attribute<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/viewBox'><p>\nThe viewBox attribute defines the position and dimension, in user space, of an SVG viewport.<br \/>\n<br \/>\nThe value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height. The numbers min-x and min-y represent the top left coordinates of the viewport. The numbers width and height represent its dimensions. These numbers, which are separated by whitespace and\/or a comma, specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport).\n<\/p><\/blockquote>\n<p> &#8230; thinking.  All this being the case, today, we tried out the idea that the SVG element itself should not be touched in any way shape <font size=1>(tee hee)<\/font> or form <font size=1>(chortle, chortle)<\/font> regarding its co-ordinates or dimensions, but that every SVG element defined in our WordPress TwentyTen theme&#8217;s 404.php code for this project should have defined a new or updated &#8220;viewBox&#8221; attribute (like the exemplified one, below, for an SVG circle) &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n            <font size=1>header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<\/font><font size=1>tp:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\"<\/font> viewBox=\"0 0 ' . floor($newWidth \/ 0.90) . ' ' . floor($newHeight \/ 0.90) . '\"<font size=1> version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;' . $deffilter . '<br \/>\n&lt;circle' . $usefilter . ' cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" r=\"' . (($newWidth + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" &gt;'  . $animationaroundperhaps . '&lt;\/circle&gt;<br \/>\n' . $plusline . '&lt;\/svg&gt;';<br \/>\n   exit;<\/font><br \/>\n<\/code><br \/>\n?&gt;   <\/p>\n<p>And we&#8217;re happy to say &#8230; it helped!  Yayyyyyy!!   Even with &#8220;overlay&#8221; scenarios, we think, and are happy about, because we applied this fix throughout the 404.php code consistently, we figure.<\/p>\n<p>And there&#8217;s nothing quite like fixing a &#8220;nagging at you&#8221; aesthetics annoyance, which you&#8217;ve been putting off!  Oddly, this change to the recent <a title='SVG Shapes Collaboration Tutorial' href='#svgsct'>SVG Shapes Collaboration Tutorial<\/a> work needed no parent HTML\/Javascript\/CSS clientside <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> <a href='#ifss'>web application<\/a> fixing?!  Double yayyyyyy!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-aesthetics-tutorial\/'>SVG Shapes Aesthetics Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgsct'>Previous relevant <a target=_blank title='SVG Shapes Collaboration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-collaboration-tutorial\/'>SVG Shapes Collaboration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Collaboration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_share.jpg\" title=\"SVG Shapes Collaboration Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Collaboration Tutorial<\/p><\/div>\n<p>We are all not islands!  Though Tahiti sounds nice!  Be that as it may, with our Show Some Shapes web application, further to yesterday&#8217;s <a title='SVG Media Shapes Tutorial' href='#svgmst'>SVG Media Shapes Tutorial<\/a> we&#8217;ve reached the &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Aoife_N%C3%AD_Fhearraigh'>Aoife<\/a> &#8230;<\/p>\n<blockquote><p>\nWe&#8217;re &#8220;missing <strike>U<\/strike>You too&#8221; &#8230; but don&#8217;t you think that&#8217;s a bit beside the point.  And besides, weren&#8217;t you supposed to be cleaning windows this afternoon?\n<\/p><\/blockquote>\n<p>Okay <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Monty_Python%27s_Life_of_Brian'>Brian<\/a> &#8230; yes, you can be an island, if you like.  But, can we get back to brass tacks &#8230; over there next to the &#8220;point&#8221;?<\/p>\n<p>What&#8217;s the &#8220;C&#8221; word that goes with &#8220;Sharing&#8221; (yes, thanks <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Ivan_Illich'>Ivan<\/a> <font size=1>&#8220;and caring&#8221;&#8221;<\/font>)?  Yes, that&#8217;s all well and good, but can we get back to the &#8220;C&#8221; word.  &#8220;Co&#8221; &#8230; &#8220;Col&#8221; &#8230; &#8220;Coll&#8221; &#8230; <font size=1>(no, <a target=_blank href='https:\/\/www.instagram.com\/collyflower\/'>Colleen<\/a> &#8230; not &#8220;Collyflower&#8221;)<\/font> &#8230; give up &#8230; how about &#8230;<\/p>\n<blockquote><p>\nCollaborate\n<\/p><\/blockquote>\n<p>?  Yes, people share and collaborate.  But, in order to collaborate &#8230;<\/p>\n<ul>\n<li>somebody has to initiate &#8230; and hopefully &#8230;<\/li>\n<li>a collaborator reads and\/or listens &#8230; then, often optionally &#8230;<\/li>\n<li>returns a measured response &#8230; and so on and so forth <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=1JHH6iwgIek'>etcetera etcetera etcetera<\/a><\/li>\n<\/ul>\n<p><font size=3>Class??!! &#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.<\/font><font size=2> class?! &#8230;&#8230; <\/font><font size=1>dismissed<\/font><\/p>\n<p>In the online world, good &#8220;initiators&#8221;, we find, are either &#8230;<\/p>\n<ul>\n<li>email &#8230; <button data-onclick=emailit(); id=bshareemail style=visibility:visible; title=Email>&#128231;<\/button> and\/or &#8230;<\/li>\n<li>SMS &#8230; <button data-onclick=smsit(); id=bsharesms style=visibility:visible; title=SMS>&#128223;<\/button> <\/li>\n<\/ul>\n<p> &#8230; respectively catered for, in HTML, via &#8220;a&#8221; links featuring an href attribute starting with &#8220;mailto:&#8221; or &#8220;sms:&#8221; &#8230;<\/p>\n<p><code><br \/>\n document.write(\"&lt;a style=display:none; id=asms href='sms:&body=\" + encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?via=') + \"'&gt;&lt;\/a&gt;&lt;a style=display:none; id=aemail href='mailto:?subject=Show%20Some%20Shapes\" + encodeURIComponent(' (link validity expires in 10 minutes from now)') + \"&body=\" + encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?via=') + \"'&gt;&lt;\/a&gt;&lt;iframe frameborder=0 name=ifstyle id=ifstyle src='\/\/www.rjmprogramming.com.au\/PHP\/fgc\/index.php\" + via + \"' style=display:none;&gt;&lt;\/iframe&gt;\");<br \/>\n<\/code><\/p>\n<p> &#8230; respectively.  Later, we append to those href attribute URLs an encodeURIComponent version of a uniquifier (for an initiator) &#8230;<\/p>\n<p><code><br \/>\n  var alltemp='';<br \/>\n<br \/>\n  function alltempf() {<br \/>\n    if (imageoverlay && iframeoverlay) {<br \/>\n    alltemp=('&lt;html&gt;&lt;head&gt;&lt;\/head&gt;&lt;body oncontextmenu=\"parent.pnosharenow();\" onclick=\"window.open(' + \"'\" + document.URL.split('#')[0].split('?')[0] + \"','_blank','top=200,left=200,width=800,height=800'\" + ');\" title=\"Click to make your own Shapes in new window or right click for finished here and make your own Shapes below\"&gt;' + simage + siframe + document.getElementById('doverlay').outerHTML + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n    } else if (imageoverlay) {<br \/>\n    alltemp=('&lt;html&gt;&lt;head&gt;&lt;\/head&gt;&lt;body oncontextmenu=\"parent.pnosharenow();\" onclick=\"window.open(' + \"'\" + document.URL.split('#')[0].split('?')[0] + \"','_blank','top=200,left=200,width=800,height=800'\" + ');\" title=\"Click to make your own Shapes in new window or right click for finished here and make your own Shapes below\"&gt;' + simage + document.getElementById('doverlay').outerHTML + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n    } else if (iframeoverlay) {<br \/>\n    alltemp=('&lt;html&gt;&lt;head&gt;&lt;\/head&gt;&lt;body oncontextmenu=\"parent.pnosharenow();\" onclick=\"window.open(' + \"'\" + document.URL.split('#')[0].split('?')[0] + \"','_blank','top=200,left=200,width=800,height=800'\" + ');\" title=\"Click to make your own Shapes in new window or right click for finished here and make your own Shapes below\"&gt;' + siframe + document.getElementById('doverlay').outerHTML + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n    } else {<br \/>\n    alltemp=('&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;' + document.body.outerHTML.replace('&lt;body', '&lt;body' + ' oncontextmenu=\"parent.pnosharenow();\" onclick=\"window.open(' + \"'\" + document.URL.split('#')[0].split('?')[0] + \"','_blank','top=200,left=200,width=800,height=800'\" + ');\" title=\"Click to make your own Shapes\"') + '&lt;\/html&gt;');<br \/>\n    }<br \/>\n    document.getElementById('alltemporarily').value=alltemp;<br \/>\n  }<br \/>\n<br \/>\n  function smsit() {<br \/>\n    var smsno=prompt('Please enter SMS number.', '');<br \/>\n    if (smsno != null) {<br \/>\n      document.getElementById('existtemporarily').value='';<br \/>\n      alltempf();<br \/>\n      document.getElementById('mysubbut').click();<br \/>\n      if (document.getElementById('asms').href.indexOf(encodeURIComponent(window.btoa(document.getElementById('storevia').value))) == -1) {<br \/>\n        document.getElementById('asms').href=document.getElementById('asms').href + encodeURIComponent(window.btoa(document.getElementById('storevia').value));<br \/>\n      }<br \/>\n      document.getElementById('asms').href='sms:' + smsno + '&' + document.getElementById('asms').href.split('&')[1];<br \/>\n      document.getElementById('asms').click();<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function emailit() {<br \/>\n    var emailaddr=prompt('Please enter Email address.', '');<br \/>\n    if (emailaddr != null) {<br \/>\n      document.getElementById('existtemporarily').value='';<br \/>\n      alltempf();<br \/>\n      document.getElementById('mysubbut').click();<br \/>\n      if (document.getElementById('aemail').href.indexOf(encodeURIComponent(window.btoa(document.getElementById('storevia').value))) == -1) {<br \/>\n        document.getElementById('aemail').href=document.getElementById('aemail').href + encodeURIComponent(window.btoa(document.getElementById('storevia').value));<br \/>\n      }<br \/>\n      document.getElementById('aemail').href='mailto:' + emailaddr + '?' + document.getElementById('aemail').href.split('?')[1];<br \/>\n      document.getElementById('aemail').click();<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; a method=POST form navigation taking care of storing the relevant snapshot of the data involved, ready to be recalled should a Collaborator click an email or SMS link they were sent.<\/p>\n<p>There are limits, as there are with address bar URLs, as to how long these href attributes can be, to succeed.  Ones in the thousands are just not likely to work.  So, how do the media data URIs produced fit in?  Well, maybe not at all, because even they represent data too long for uploading limits, but we are going to offer the service of trying, and we work to keep all that data storage arrangements, more or less, to ourselves, and offer a 10 minute surviving email or SMS link, to work towards amalgamating data URIs and SVG svg+xml protocol &#8220;shape data&#8221; to present to a Collaborator in an email or SMS initiated by you, a user of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html--------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html--------GETME\">ninth draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-collaboration-tutorial\/'>SVG Shapes Collaboration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgmst'>Previous relevant <a target=_blank title='SVG Media Shapes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-media-shapes-tutorial\/'>SVG Media Shapes Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Media Shapes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_media.jpg\" title=\"SVG Media Shapes Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Media Shapes Tutorial<\/p><\/div>\n<p>To have a web application such as the Show Some Shapes one of yesterday&#8217;s <a title='SVG Image Shapes Tutorial' href='#svgist'>SVG Image Shapes Tutorial<\/a> be able to claim that it accepts all &#8220;media&#8221; inputs, it should, at least, accept, in some way shape <font size=1>(chortle, chortle)<\/font>, or form <font size=1>(tee hee)<\/font> &#8230;<\/p>\n<ul>\n<li>image &#8230; data input, even as yesterday&#8217;s did &#8230; but also, as today&#8217;s attends to &#8230;<\/li>\n<li>video &#8230; and &#8230;<\/li>\n<li>audio<\/li>\n<\/ul>\n<p> &#8230; data input<sub>s<\/sub>.  At first, in doing these last two media categories, we&#8217;d work it, using &#8230;<\/p>\n<ul>\n<li>SVG <a target=_blank title='SVG foreignObject element information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/foreignObject'>foreignObject<\/a> element usage &#8230; but we seemed to run into difficulties, so, instead, resorted to &#8230;<\/li>\n<li>iframe <a target=_blank title='Iframe srcdoc information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_srcdoc.asp'>srcdoc<\/a> methodologies &#8230; effectively swapping the onus being on 404.php to deliver and onto, rather, <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html-------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html-------GETME\">eighth draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>)<\/li>\n<\/ul>\n<p> &#8230; in achieving this new functionality.  The pivotal HTML form <font size=1>(plug and play)<\/font> onsubmit event logic newly added &#8230;<\/p>\n<p><code><br \/>\n  function maybepost() {<br \/>\n    if (document.getElementById('existtemporarily').value.indexOf('image\/') != -1) { return true; }<br \/>\n    if (lastfocus.indexOf('iframe') != -1 || lastfocus.indexOf('image') != -1) {<br \/>\n                 imagestring='data:';<br \/>\n                 equalsr=encodeURIComponent(imagestring);<br \/>\n                 equalsrif=encodeURIComponent(imagestring);<br \/>\n                 if (document.getElementById('existtemporarily').value.indexOf('audio\/') != -1) {<br \/>\n                 document.getElementById('myiframe' + iframeprevs).src=thenifagain(document.getElementById('myiframe' + iframeprevs).src.replace(lastiframesuffix.toUpperCase(), 'image').replace(lastiframesuffix, 'image')).split('=')[0] + '=' + maybenoifshadows(encodeURIComponent(imagestring)); \/\/equalsrif;<br \/>\n                 <i>document.getElementById('myiframe' + iframeprevs).srcdoc='&lt;html&gt;&lt;body style=\"opacity:0.2;width:' + ififw + 'px;height:' + ififh + 'px;\"&gt;&lt;audio controls=\"true\" loop=\"true\" muted=\"true\" crossorigin=\"anonymous\"&gt;&lt;source' + typeeq + ' src=\"' + document.getElementById('existtemporarily').value.split('#audio')[0] + '\"&gt;&lt;\/source&gt;&lt;\/audio&gt;&lt;\/body&gt;&lt;\/html&gt;';<\/i><br \/>\n                 document.getElementById('thiframeopt').innerText='Iframe ... showing audio above';<br \/>\n                 document.getElementById('seliframeoverlay').value='overlay';<br \/>\n                 } else if (document.getElementById('existtemporarily').value.indexOf('video\/') != -1) {<br \/>\n                 document.getElementById('myiframe' + iframeprevs).src=thenifagain(document.getElementById('myiframe' + iframeprevs).src.replace(lastiframesuffix.toUpperCase(), 'image').replace(lastiframesuffix, 'image')).split('=')[0] + '=' + maybenoifshadows(encodeURIComponent(imagestring)); \/\/equalsrif;<br \/>\n                 <i>document.getElementById('myiframe' + iframeprevs).srcdoc='&lt;html&gt;&lt;body style=\"opacity:0.8;width:' + ififw + 'px;height:' + ififh + 'px;\"&gt;&lt;video controls=\"true\" height=\"90%\" width=\"90%\" autoplay=\"true\" loop=\"true\" muted=\"true\" crossorigin=\"anonymous\"&gt;&lt;source' + typeeq + ' src=\"' + document.getElementById('existtemporarily').value.split('#video')[0] + '\"&gt;&lt;\/source&gt;&lt;\/video&gt;&lt;\/body&gt;&lt;\/html&gt;';<\/i><br \/>\n                 document.getElementById('thiframeopt').innerText='Iframe ... showing video above';<br \/>\n                 document.getElementById('seliframeoverlay').value='overlay';<br \/>\n                 }<br \/>\n                 imagestring='';<br \/>\n                 lastiframesuffix='image';<br \/>\n                 document.getElementById('thiframesel').value='';<br \/>\n    }<br \/>\n    document.body.style.cursor='pointer';<br \/>\n    return false;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; refers to an overriding <i>srcdoc<\/i> attribute filled out and populated, and which overrides any other <i>src<\/i> attribute linked to the relevant HTML iframe element.  We thought including audio media input as an option, could open the door to, eventually, share an SVG based annotated presentation which includes an (optionally used) audio commentary.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblogsvg-media-shapes-tutorial\/'>SVG Media Shapes Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgist'>Previous relevant <a target=_blank title='SVG Image Shapes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-image-shapes-tutorial\/'>SVG Image Shapes Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Image Shapes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_images.gif\" title=\"SVG Image Shapes Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Image Shapes Tutorial<\/p><\/div>\n<p>Am sure some of you have been waiting for it?!  Here it is &#8230;<\/p>\n<details onmouseover=\"var sbl=document.getElementById('mysummary').innerHTML; if (sbl.indexOf(' ...') == -1) { document.getElementById('mysummary').innerHTML=document.getElementById('mysummary').innerHTML.replace('?', '? ... You will not regret it!'); } \">\n<summary id=mysummary>What <font size=1>(some of)<\/font> you&#8217;ve been waiting for?<\/p>\n<\/summary>\n<p><img title='?' src='data:image\/jpeg;base64,\/9j\/4AAQSkZJRgABAQAAAQABAAD\/2wCEAAoHCBYWFRgVFhYZGRgaHSEcHRwaHCEeHBoeHxwkHhofHhoeIS4lHCErHxocJzgnKy8xNTU1ISQ7QDs0Py40NTEBDAwMEA8QHxISHzosJSs6NDY2PTY0NDQ0NjE2NjQ0NjQ9NDQ0NDQ2ND00NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP\/AABEIAMIBAwMBIgACEQEDEQH\/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQADBgIBB\/\/EADgQAAECBAUCBAYBBQACAgMAAAECEQADBCEFEjFBUWFxIoGRoQYyscHR8BMUQlLh8XKCFSMHM2L\/xAAaAQADAQEBAQAAAAAAAAAAAAACAwQBAAUG\/8QAKhEAAgICAgEDAwQDAQAAAAAAAQIAEQMhEjFBEyJRBDKBFDNhcSORocH\/2gAMAwEAAhEDEQA\/ANRjNQQsMNLH7ADpeAKiYpN8uUcDWH86nUpXiSMythcMN39ONYqVh8oHxOtxYJsOz7mPnWRixNy8MOIinCkCYlcxLqKDoOWcXjqZIBSVAE5di7jcCNDTU2ZOXKlCElwlAbuFDQ3YwBjFMwzJBCun3GjRrYqWxNV7NTJJlJK1ZhYXtqPKKTNSlTg7v\/yCayv\/AIz40F9CSLE94VoxNBBBSNf+NAheo8E7sQr+tzqCSkC3zuA54y66NFyZ2XwnQebte34hVMqkBWYMC4\/D+kSortCkvHMtnqdx1Qj+dVFRKUZvELAbW2fSK6XCFBRKjlcOQ77+0XfCcvOqYo6JSEv1P\/IY1KUocuf3eFOzAzgANRRNkpQQ3i5cW5EXTq4EOLNxYekLK6pSS+ZmNx9PrEEnMk314hfAkC48EQiesrSfEb\/nkaRpaCW1MnODmAYalwND6QgwHDlLmB3CEhzs\/Qeoh\/itcxYHwjTuOIah9MWIvL76WC0AJWSHBSeuh5G8aGpnZSByP+j6esZiViAWQFXa4a3vDNNe+hd9H26AxSn1I40ZM+FrgVRNCpgQzqhlXy8qOPxAdPOQiZ\/ItAzaBT6JPI5g6fMRMLFdraesYzqVIB2Z3BlIsSokS5A2UvxdWbwj3eM5JpQtZIJjR4xTrml0jw9w\/ZoWUuGJA8YYvuLg9OIWqW1kamg0IdLw8Il8sPWEtVNyeNVn42jR10wJRyBYDmMdXzgtOUaNruPxHZFUNQjMNtsymbiPjFzDmmqAUvmeMfTDxeJ2dn6Q\/pgyk3GXcd4FkW41o9wyoc9A6XfY6N5\/SBMa8KmIf\/8Aoa\/rQRTKQVZRvb7\/AFgzEqTOhKj\/AG2b\/kAygCvzFqwuzMUuSF+I+JnIy6kwQqaVJBIZho3fXtHq6fItWVwCA4YNY+p1MczV+YvDOVx\/LUDmqAHIAdj9OkNMMr0sFBROxCrdmO\/nCKpqEpfkC3f8R3R1JKQdjcjV3113h\/D23AYXHlZOU5CgL6AcRxJqAhIZKraEbHbqNoBkVwUoy16HQnW7\/wC4JyEDK7pJaxLh9\/8AXvAhagkgam1ofiOWZaf5AQtvEH0ItEjJeHkRIp\/Vt8Sb9OvzN7KWpSWBAfoA3a3QavA1dKUkeBiTodQHiUtIUZDnzFL+JXzBDfL5sPSKxNeYEhNh6N2gePg9xRNbEa0cpeUX8W55gPE6VOUu5fqfpxB02eEJBBNhcc234MZytxCasgoS4PS\/aNycftPcFLuxOKilQtASsZgddP14xGNfCs5GZcoFSAdP7vLn91j6Xh2FrfMtgk3bcGD6hCVApAJG8D6ZXYjVzEGp8GloLeIkHgjSO7jRXtG++IfhQLJUiy9eQRwRtrtGKnUC0KyLSUnS+h7HcRqkHvv4lAe+puPh15VIkpAzzCVEHdILD2D+ceLK1EqX4RsNX6+kMKkoEhCHAyJSH\/xIELKye7KF2DONGePPcgkmaAT1FOIUQKgpKQVDV3s2hH43g6hoFKUjKu5IYAb7ueIWT6taVJKAFJKhmG4TyO142WCoyIE5QJKtBwDv+8QVsAL6hbWxDJq0SUZBsL9TuTzGXr6klyBbUHUNreDccr3Gm7GE8urADFLWtu4gQOR\/iEi0L8yqnqiNBd79oPpaklQWflGov6iF7jM\/O2w8409NTpybM14YMd9TmYA\/3FlbXZzfa0CLnHL4DdO8DVkzx5Q2u8e1IIBIDOfaAC\/MaFAGoVKxNeUBSr3Fj+\/oimox0KcBVxs+neEkxZ5Lj2\/XjhSdVJZy1zr5bbe8NGMHuYVE+lVKBMlpVnHiAV0Yh\/vC2bhCANbq4jOUGOKQlMtVwLDoH2jRU08EhQLg79SIOrJ1IyCmrmfxHCFZmlkO++nrD2iwQ5BnNwASBBlJSnOVqcj6fkQRU1mUktZPv2gGYL9whWzaEqk4cEMW9Ytqa7JLIe50fyJ06RR\/8rmIHOkV4tgwnDOFlJscr+EtfyjSFcWkCipppnKwqM4LQoZWVmBuHtl6wHT5lBRJLEkJBBBYWNjpd4YysNmuUJTmY3I+Vu51g0YIwdS2Vs2ggOdaIjehdzI1yCAWc9Br1hfTLKlApYpT\/a+ztbm7+0ambhqklWa42b87GFCsPyDwOCb29Sx2Ot4qxuvGjNBtq8RjQ0CZiLWWC9\/aD6JagrItAUAWe9jy21miqVSlCUhK9Lqzajt52jsqKCXU\/L6htC\/1hZJ6mWNy6bKDlwI9hVMxJifzHsd6LwOc2tOuYqagJQcpLEhrDYno8MqKUf5ZiTbKfDYMQwu43i\/D0ZAwF259ouo0kqKlMDfS\/a\/aKVWqMkLdiWzUKygKSNbl9RfTg6dIXz8SlS1BLAAlvW0Gz55LnRIs5cQnqZKCtKTLzhRDvcc6QDOb1OVQe5oVLzWG4ioIyEsSSdntBJWB0iifMABJHa8OagLMBbJgAq0lAUUlJNmIuC+hjLYvLB8TPfyfyh1WVhJSlQZTAlmP76bwFjqU5HAbcvYG3vHnMeW76l2NaNfMQLqkTRmHgKFNYv3B5GrRbNmpDJAJKiwYE3+wjGf1hRNUx3e0aXCK9cxRSFfMwYC\/Vukc+IjZ6jiu9RnQYQFhCwpPzeJIuoAauOC3vDPEK0JSlL6b6HyZmj1Un+KWAk3BL3Hi9L9ozOMTVEWPiIs7+phXft\/qGFs3cIrJudBez7j+3r5QukYacuWWpwk2Kjc\/rxRJrFAMQ53I\/EMfhmrT\/JkKcxOge3Ow4+0OUECplVZEYy6A\/wASVqSX3t12i2dPyICf7tGe55jTKSkIPS4S\/t6PCDFKJK1hQJTcEtYEBrH09oxiFPcBWDdiZdeEzpswNYM77gdo9r5h+UvZvONZSTkCx1Yhzr+2gapkSFsuytgpJBf87escGDAfxHDKAaImUkUzupZOt9\/WCxSOqwH5i6okJWcifFlOiXDeY6QVhsuepa8yMoS2U5SHdz\/cwOm3WConYmMSp35mbxqmWjxM3TaC8CxHKQkl0nX\/AFDb4hwyctJKUKUD\/iCo9NIzuHYXULWqWmWorSWUGYJ01JsNebw\/HZX3eIhgCLn0ejnH+MId23O9rHraFWIlSjlS5csOTDbD8OVLlhMxScw2SfvvA8+YhBJCRmYOeWGsSZyCRMxGiTFsrCVJ8UxeXoLmDpdclDo+a2qt4SV+MOQxhcuvdQvdmvpzeBVW8ajeJbuamixFS0ZiGbW\/lp3EKZ1Syyoq\/wCbR1JntLdKQCRqLvaM5UVh+UgiNXHbanADc1dJPC7BiH1\/McVVKl9bkM23+oS4NV5Va6w0qJlyXhxUjqTE02p1\/SsoKzFgGLh384RY7WBJKEEuQ3Yf7h6J5ULjX3hPi+GJUSQGWW5bs23lB4WRcg5TmBZddzMxIumU5SSCNIke1zSR0Z9zISkFQLPvq+1ht5RdReJydIW1UtwoF240i5NQZcpyD3aPOU1dzWF9RmpaS44\/ftA0pQchNy9+BHEurC5aVpvmGsUy1JS5a5vHE7m1DZ60pIOp46wtrJyiGBILu4447RcpalAsQnd+sU5Co6wh1ZjUNSF3OaakBJWfJ9B7xnfiKYQFJUXTqnL+OY1UtCQShR8TORfSEnxFSICT25hOVONVKMTe7c+RVJOdXeNv8FUYQhVRMd1eFAbb+5XnoPOMZUhlq7x9Fwh1U0vKrKnLd+lj5vDfqGIxgDzKqszmtnrIsXEcSKcrBBGYmGlBRhh4nEFTwiWlk6l3DAat+PeJFUKt3BZrNCJRSIQnKUpJc3HXvHtBkkqUpMtJzNfUuHtl4Y9I8l5iSQLA\/pgmShJJmK+RI05O5IhqlmHxBJo\/MNFRnAPyuNx5NC7Fa9aDlSlx\/kduWgSnxvMteuV9WUAL7FQuO1rQHiOI3LG5\/dRrAMpB6hqovXUoxvE1ICglWUvrY6G+trxfQVCchyBsxzHva49Iz9QvOfFd\/wBv7w4ppaUZRm4SA1nOgDaXg2AVAB3CZaNxjg80CYoqAsHDPsw+\/tBUvHCVeJ1pBJu+m1hEpqEFPiBzubNa4cXhaJDLygXF72t33gFbiZrIHmxw6vMwpFkpUHbRRYgXGos94EnY0EqUhIUGOrM\/WOfhqU6pin+QZWHUOYzdchaJinADq8JGhD+0OPJgDEFVBI+JpkVSl6bwurJKiCDc\/WGGCaPqW9fOPapHjBB12+8H6agXJ+W5lBhylKG2pY2sIMo8GQpYUXBFiO2\/nBmKTwNdRp0OloGwurzLudYBWBbjUcxYLYjCspkpQcumw2EYivDKJjeKmhT6FoyuLyL3HpG1T2ION9UYrw1BUqzavaNGihmLWLjI28UYHTMc5FiHEMqpamSUk9QOOsPaqsxRYlpWmQAtjcAXfSK54OcFrQYkZQHuN9y5+0W1MoZH07bcQooGEznRiSYbnSJBCZUSB4Gbzn0cU2YgqDDZ947mS8wKVJDPsXBG2waL5M7N06wNUfML+8WmhJpVOkAJSmWlKQmwAFgOE8RaKZKU+LWCgUpS+sL1KJ8O23LbawvI4U0O4SgkTpaHSQNfpCrC6GpTMWtRT\/GWCU3zHXN049Ib0xy2Ju7Rd\/INGdrgDUsdowEGmm7GoT\/CGD6tGb+IaTKhRH9z276w4nYoElywGzm79RCusrZc4ZVG3TWFfUFGXR3DxcgZ8Urw0xfeNn8IVD0yk65FG3Q+L8w2mYdRIOb+DMo653Vf\/wASWHpC+rxNMv5UJSh\/lSlKQBZwABa32hGXIHQIO9T0Ftj1HVKFhALkJFmA126+0DV63ZQIdmfndusAzMXTlEwApzAWe3l6wrqMScuFEDiFhDqFwPcc06lZS9u\/7ePamWvKMoseDaFkjFUqs1zbXXpDn+PIgKsBYhNrh3ZtP+Q7VQACDuLKOlUtwsndgBuNbQoxOkWkOlJVtx\/yNfMCUhR\/zBLt8pfltbmKjPISAvQuzj0HmIwNRjA3keZkKCkOULWCAdmd9H3t3jT4Ypiu6VEks2qW201fUf8AYXVzuACMitNG+mvrB2HoQNSQX0O\/HeMduUa+xYjNCzk8ZdRa+h\/1CjEJq0pUAXcuCTftDOYhiVEvuGtb7womzf8AK\/Fr+kIo3uAph3wJUEJnpUDqkv3BDexijHp4UsBtIZ\/DikpRMUwckDsADqPMxnqpeecQzXAfmK1a6k2QWzGaPDiQi2\/pFc+oYsTfvBaGSjKOISKwglS1qmqcg2swuIa6k9SZavcoxFea46xnhVFCwXN7Q0r5mXwpcnmKKLB1rJJIG99TAogG4zlrcbyKp0BtdzAVQc5bc6QzlUICLqAOjE+sDUmGqVMIWWA8SS1rHRzveO6IggXZnVMoISUE3BghE5wR+iPZ1LmWEgWGsHoo0oQSdAL7sOkGbitRTRqGfVwb94NxCrJZKRbn6d4i5KUDMPaEtFMWtKlMrKCdbN7QAJ6E00dy7+sV\/gY8gGbPLmPIZqDxn1agWFoCk6HSB6xxcEODYnRzbTeLaWnCJaJMtJCEi27Nq51cvFlckIRf6PfXyg8hpCfgQEHugE3FgXStmFhlcd9esDLxeWkWS55MZzFaq5aFBrFCPNXI77Mr9MeJrl\/EakkjKnLsRzu4ML5mPEqcH9\/RCGYtStosoqBa1aa9NvvDFVmoEziFG4yqaha3VdrdoswqoJzA6wbOlMkJtFSZQTcaw4fTgG4HqainFKo8alt\/eEdbPOW4FyR1sRvGgxOVmcM8ZmtkDM7NwH\/PnAJi4miJUmRSs4VNWUsknKLtt194HRPzEJ3gzD5JKm5tpCjF8LVKm5tjtwePvFCIpNGccpqhNBhuCTFzEKzZU7u7HQfUxs10aikIUoent+6Rh8CxpbpQVNsCRa50faPoC5qUIS4Djq4hORTdHxOZiAIKumNkEuker3gTFaAlIyrKSAwe4J6+e8W1E9SlBSQ7H23i2YsrABZnf96Qu\/iBvzFuHUwSjKXVyrVzaL5qEEgWfbjq54tBVTMyoZJD6vuekKkzs3hNjqA2vn5RhNmOxaGoUuqSCySW3H4gT+lK1OLbjbvFOFYHOXPKjZDvvp\/i3ffvGorkoQnLlADdiP3vAuAN3DJo0O4tweUHmpPCSOLPr7QvrFpCw2u4\/wBttB\/w5Ug\/z+J0gpF+SFE+zekKcUS6yQ1zt+9o1dECKbZMeSKi0L58xa1MBBWFUqlsk+vEMzSpQ9+8Ut1ZkfRimRhzHMTptBH8qEcOSwjipqgCQ4JaEVTWgrAIBgORJoQwvzG6xmILkFKn7gcesdqrQDlhXKmFSmGmnSKq+ckaHWEsG5QwL0YSrEClf+QOpP2aGK6klHhfsPxGeUWCTYwfQVJ4306dIMWBuA4siownlkgjzB1HSPEzwEEDUjQwLWVHS0LF1ew94BWYtqdw1K1rL3HsIkVIBN9NdxzHkV8RBsz7L\/KE+H\/sLfiCq8DJPmL6G4ihE8AlKrqS\/T0hbj1UXawDc+0T5c5ZePzMXHTXMzPUVKY6w0ocAOZJX3Z7wkHz5r+sb3DEOgLU5tpqTDMCrU3KxHUV1NFLSpwGGwgReJpSW0aDMbrCCRYdBGRXSLnLCUryvqWezvHK1sQJwW6LdR9UVuitjHKKhSz4QyRF9ZhSUJDPYamz+T2j2RTkpypNtS3WGiwaMA0diconJS+YgnYQRS4Wic9me7gaQJMpUpDkOYd4fOQiScrg\/f8AfrGs4A3OW\/EBqMOTJQvIEZwDlUrTuR0\/WjHYpKKwSU62Ow8uIeV+IuojN4dbk+zwjr64EEB+kSLkZmsCWKtCZtcooXbTaNXhOJmYnIpyoDXQb6PqbQoTSmYkuwI0j3CFBEzKu2xb1sYrYhl33MOjrqaUYklMokIVYkMbEtw9vPSC8EqkzwoAfKLgF794YIRJWwLG2u8GUiJUoZZaAOwA11PXSJjxGjBvUWSaIlTMW6mOa2gCb5glI+ZRawffiHoKQkrILEONX9CHhTSYgZqz4cgDgvY+b8hoE8aqarMDYkm4gmWgZGZrEbjaMliuPFalAO4s+xh9j85CdYxcwZnUNHjsOMEkmNBNXNL8JlSZE1YYuti+rBI0u390UYhVJKmYO\/pFeHYyEU\/8WS7kv3Yl\/OFc6YSoFnu\/bygih9QkjUKgR\/M+h4UsZMz6APzAGNVuU6wHhdYAgsO50\/doX1zrJbWMyHlSydF4tuCT61RdtdoGpqda13DPp2g2gw7Mrxlst779oeS56EMwDiGKyr7Zz32IBNoiEgjXcRWilKw5sBpb6wznYglZSkBi8F1KAlHWC4i7EQXNUZm6yUUjR22\/EU0lVMyZshA6w2nzUhN+8A09SpZCGt9ftHUKmhtTtZWtLtaFyEeJthpGjqFFACAAQR7\/AIhNUBtLPCtK1CMB9s58I4jyAZocm8exRxMXr5m9p6n+oKFEFJ1LnxM\/ykcRVjMxOYw9ppCXKiLpBD6Ptv5whxiWDdwIj9OzNLTPAOsAbmPoiVhEgbMN7RgqBKc4vd7RqsXqT\/HlZwRr+6Q4nghgHbATLY1V5jc7xzh0wILvC6uV4tPvFMmYsFhA4Qa1H5KqbBdTnByhydT1Zr+0DioUgMEsIpwtBQkqUWgasrXJAihkvfmTK3jxLE1JXMCTo\/0jqvr1pWiWEqUlawl0hwMxbTziYJSErzEGNFKkZVhTBxA0AKMK6MU4xhqUC4vCOjokEFag7bRqMQaYCoqbX1hDTSnUUA2faAUKTqMtgNwKWAlbJF9BAWNUWiwGI16iNThmGp\/kTmBPWPPicISkhIaMYlSD+IxGs1AfhSchZSkjxAa88PGvlyQkuefvHyiRVmTMdL88NyI0kj4iUpiQYzKpGwIZUk0TNRiqc4TcjIXABa\/XnUwtnVoQmxDnre0Uf1+cfNAdZRzZhARLUrqAw4+YsPKJQSW3qMVdbifEakrVqY4lSnDQ7kfDM\/MxCR1J\/AhlTYClB8S8x4AioZcSLVwWsmI6bClKDtYanYXaNNRfC0pICqhaEg8qABDPrDD+nSEZdiGIBYHuzE+cBTKclLMwNow\/WKDoX\/cHgWHdTib8PIWCujmpWn\/EqBSeQlY3FrK51jPTgpCilaShadlBi\/3HXSCqCUuROzoTkUHBBuhQPIexsN4C+JKyZMJmKSw5Gg+8H\/iydaPxOKspo7H\/AGSormRaFiavbrC9VSd4OoEoDqJfiOGPjswjXGhNBgsgqXnO17w1rqgqSeISya1ks7b23gsVaVJbQbmO9QSU42ud0WGhfiWbcRzUyEJUEiw546vFs7E0pSQ7ecJq8LPiBZTOHHX99Iz1LNCcuJjswutq0oPzPbWM1VV5UTl58oKpcImzlt8yj1jSUHwMs\/OyR6xVh+nUnkdwHycdTEOs\/wBxiR9PT8Do\/wAvaJFvAfEl9SF1S1Jlhzci\/wC7xkqlalkh4d4zOKtNOYQLpyCHOseDiAZrl7ChKpGEzJkxORWVlAk9I3c+RmSEkOwhbh1MwYWtqIaLqMiCwdTbaxWwAU3EEliAJmaigQlRCgLb6QBPmIBdLOLPF+KzitXjsTzGaVmd9Q7P+OYRiJlJx2LMbza\/+13Ji2ipiWUrcwhRVBMxOa7n9vG5NGyQebn8RXurk7CtQzCkMlRSwb+47RK+pCd36D9vEo5mVBBPpC2vmKUPCAfKJ89kCoWKr3FGIVhL7dPpHmErOfvHM2lXfN3jzCpZMxIHMDhFGPyEETV06ghQJu8KPiGUpXiGn79ocV0i40DQrxxZUgk2DcwWU+IvF3YmAylc0hOrs0b\/AAH4UTlzTlF\/8RZu++0Zj4LCTOzq5JD8mw9zH0JdVfIRYi568Rn1OUr7Y8bMuo5EpDNLSk9gSP8A2OsHVFQMoZoTJWXNi34guxTp2fb8RFjJawZjUDcippU4IKS\/Oo5DecZ2dh60VBmBRuC4O7l\/ZofSSxJNi+pZmjqpIVcDWDKlQaPc7luLs4UpLr8SRmyg+TtxtxDGcoFBHIDfXaBKlIR4mYt+3ijD1FTizN9TAg74icTYuKKqpyKCdS7q\/EOqmhSUAlIL8jaLk0KVOco3DnV+RHFcMqWClEttu1tNm19+YNloQuXI6mQrsCSVHI4bUNbuOkATMFmIvlLcjQ+Y1jdoQ7A22fluYCpsQXIWRkCkKN0NZuQf7VexijB9SL4P\/uA6sdrMipKx\/a3Z294tRMW2UDvH02lpaWpSVJQLFiGZQPUD2jtHwvJGoJi39OrbGxEfqSNEbnzjD6IrWFL+VN2PtDidlWkKQxSRb\/UFVtRLQ7IWlKlFKRlJ6BRbQFveFNAFSyqWWKPmSe5cgx5uXZNeOv5HmPDaE8\/iGbrBX9VUSvEiasFw4JcEaXSXHR4tKEgZwQ+2mscSajOhSiMuV8znRu0CjuptTMYg9xzL+Kp7B5SD1vf3iRnpVQlQBDkHvEh36nP8wfRT4h9RXAk2N9jt3hcVf3OPKDv40u69PS3lAFStAfKLPCsWprV4mgoKoEJFnbQRZjCSUAbguG1eEWCT\/wD7ADp\/qG+I1I94qye5JOvtaxMrXEuSbl4WLQx3jQVsjODl9AITqpVcG0BjUiUnIOM5p8ucKUHb1942iarOlw7M14ymH4etSx4Y20mkShF2v7RWBYkjMLi2RKU99DDSRTtcRwjKHO0Ey52VObmB4gTORMzuISjnY7nYwwwzD2It5tFCMGXNqETFLyoS5UOX0jR1s9KEhm7iEkqgsxu2IAi7EAxvYAevfjaMp8V1wCCkHY6cmw92hpW4z827+cYfGpxWw\/yUP32hWL\/JkvxKVXisa\/BsoKJCgWABB6guG50jeoo1kZsumgFyfKFXwnhARJEwi5NuwjY0WZKWzZmdyWBvo4SBZw0FkVXfcXyrYnAw\/KU+EMdXNxbjeBsQSEl09vx9YbqUAHJ8zCiYskHOR1y6HjrANxGhFqTdmIsVKylQQWLOH2tr2hthtPkp0KmKGci7F9dO8Lpj5gQcoG7P5XBG\/wBIbLUpSEsdtz06QKsKJ7Ma3QES4pUJKwkqCXsH3Ls3S5g+VQpYLuFDZ7Hm2+8eU2GIUsLWnMoDUj5TyCYtxBKwUBCgBmdT3OXUt1tGcRXKcWrQnhqFBeVh\/GE3Oigp+Nw0ByxmmAA2SXHaLKleYFJuW\/557wtwLDFmepSlEJYN1L\/9jDbTUFAm4yq03Khva14U1SmsIdVsxKAopDjbbUl\/RoSFTkfSJGFNHL1L6MLQQtCilTaj6EbiHq8ZUuXlYpU7KI0I6biFdECpJJSxdh06wuxmvXLy5UlYN7afmG4cmUWgOjAZEY2RsTwqGchCfDdyDoddO5hdUSspM2Y4yOPDoxIa2+3vBNJU5lhgXJ02DdIY1cu5AsTZ9WLdY0HidxbXOJNOhSEHKCCHSWvfU\/SB6dS0zChKXJG+h\/G0NJKShDEglmfkgXt1O0LU1gKytIOZJy6HzvxB9TFttQAVklPhZSWJDNoQWO\/MSGE1QJJY\/vlEjOS\/B\/3D4t8\/8ldLUpXmSbLHO46fvEVzMM6tDCnpcoCilj930PPeB6wEsQ\/Xj93gweJupjAHoz3DMMyqzP6xdPKAsZlXewiSJ7J1hYukEyoQorOVBfv2ioMpAqTcSSbmpRQhIc6q0HEdUuDAm8MJqwGLbQIvFShPR\/8AkNORV7igrHqcLp0IUwAYdIV4lWAakdAIrq8SzO0Z+tW7OS7j2ha5uRoRnp13Hyal0lgwhlhcrOEqUbcfmEkiUcg+sMsNnWKQ7+2kMJ3uDXxG9bOCQw9oR17qR81+BwYKC81iCLXBgepk6aACJcwvZjsZ4mZqpp1B7OOd\/wBeE9FQmbUolDUlz02vD\/Fau+UHz2gr\/wDHdDnqJk06IASO5H+zB4PMe7ELZm5FMJaEIA+UM+keTpoSllF+Dp2i+vWxhHVgqsDcjeAdtmpOssXiSFD+M+NzoNW5I4BimumEfiAsMwSYhf8AKq6UkqZIGdTuGsL6t\/yGVRQhakrUkhYSAQ5LbkMLaveEupIjTxU0DcVzppZN2L3PT7w+kzWTlu9nU1iSBpzx\/wAgKnpQV3UfDyBd\/LqfSC64DIEsBz6xykqCYTEGhCKdPmOfbX8QPiJWLpTY77jmKJNcAcij2u0GqmZkuX84J9roxY9pimYLAv8A3BwTew+xu8Hy0pBCgASnffkM3nAi5QUXGv1i2nRkDKUVd9u3SAU+YRIqC4iXuz39oANOmylJuC4tfyhhUU61LStChkAIKeT20eCWDub29+YS4o3GI2qgyVEJ8ROltj\/swsnlKyxeOqmqKlKJCkgONQxHMB0M1SsxAsFEP068QIRvuhznC6QIqMylOg7dRpGgxVUseI2AYlxYA6vtCaoWEkBw56jbp5xwufnSUqLu4vwReHcyRTCAyWbBhcxSEhbKIckkfjttA02UrLnTqUsGDlzoWGvaJ\/AlMtCXt340B9IJypACg9gXA9RBca3BBoxfTjwjMcxa5sH8okL\/AP42eq4cA6Dgbe0ewfp\/yIXMR7LRNNyQAN3YEbmGMiUFoZRYtoL+egPEUUktwULAWdH0sC6RbRoYJUkJCTYjVue8aFiiwiCrp1CwFo6w2jdQJ2h5NpQoWZjxv384UzZmQKSXSrQc+R5gQeJ2J1ctCN62cEAsrpr0jL1OIm7EHiOJ9SpeY3fQ9eC20JlyVAubDaNHuNxioqiN0z8yCdx6esI5yJqpqAkEgm4g4VIACQdrwwwkpCninGR5iHFR7NlqSgJbQB4HoQoKJOkHLmZkaX5gdNr68wwsLuIHUMly1FTj3gTEZRYtcn3gynqEoTffS8K8Rq05b22b\/kKzFaqMQG5mqym1Ud9I3HwTRCTTJmXBmFSjcZbnwnrYD1jFVdQlZSCTcgPZgDb6x9I\/lCEJQkjKlISG4AYWhQYolmUZDYAnNSvi768+UKcRnlGUsCSd+nkYMXUpQFFRYvqd9LgbB9ukJMTrg2Y8s\/fSJyzeJqIL3HeC42iaClPhKAxSdRs\/XSCQSAtRdydzbo3AjGU9UoElLPtGmoKz+RICgxAvB8ixqCycdziTMyFR1KjoduxMCV2ZWU3FmZzfR7aecWYgzHLe+0NaSkC0oWrUbHezefMAqM2vibyoWZh62VNUtKQlYuHUAQD5xqZkxaUoAJUk+FQAuDbUnSzmC505l5LE3zcjgsO8e1OXrx19YNyKoGdyOrEHSyQ17W79YDnoulJcuQdwwezHkRao2+Z+p1PeKJSM3iU5G526Qnc4HdwqpzISGUW4Pbn91gVM5RQ5Fy57jb7QXiqRkACtBr9DFFFTf\/UkcD2c\/mBy66hqRVxPUg5Tc39o9wSXlBTlLEnxbtY+jiLqmlJN4JpykI+XxA2J6dYNW9kImAVlNLC82V1Jdi9nP1EJv6ggt5wwrCSSXb6frxnKtbHXQmH4gHFQ40VWOoOT2520h5QKWpwojING1NrOYwyKom+rfaN7gCAunCszZQ7P53hj4iooRbEVcM\/plcD1\/wBRIyU34qUklJlEN\/5D7RIH0H+Ij1R8x5SqOcX2H1MGzfnP7sIkSD8fmC3f4h0g+FMKsc1R2MSJC26mp3EX+vrHM75BEiRg6j2+2AJ3h3hG0eRIevcS\/wBs0K4HqNREiRj9xKz1e0Z\/E9YkSMP3CEszJLm97n6x9I+HC9PKe\/hH1MSJDvqf2\/8AULzPcY2\/d4xvxOo5U3\/tiRIh+k\/dEob9uMKHQRoML+fy+5iRI0\/un+52T7YdJ0PnDaiSMiLbD7RIkOx+P6iGgJ\/\/AGr7D7RxN+Yx7EiU\/wDsYe\/xFdbp\/wC32MMqD5IkSDx9\/iA3Qg+IfJHVP8g\/eIkSJ8vRjE6gc+Bhp\/7H6xIkFj+2GIHiQ8IjKVupiRIq+m7jF+2D0nzn\/wAj9o+ifD\/yf+sSJFWfsRLfbLJksObD0iRIkTRU\/9k='><\/img><\/details>\n<p>Yes, images <font size=1>are the input to our<\/font> shapes <font size=1>web application as today&#8217;s work<\/font>.  And yes, SVG <font size=1>has an<\/font> <a target=_blank title='SVG image element information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/image'>image<\/a> <font size=1>element type<\/font>.<\/p>\n<p>And so, on top of yesterday&#8217;s <a title='SVG Shapes Animations Tutorial' href='#svgsat'>SVG Shapes Animations Tutorial<\/a>, today, we offer either &#8230;<\/p>\n<ul>\n<li>image URL &#8230; or &#8230;<\/li>\n<li>browsed for image<\/li>\n<\/ul>\n<p> &#8230; in amongst the &#8220;iframe modus operandi&#8221; choices, as a new functionality option.<\/p>\n<p>Once the image, as SVG, is in place, you may then be tempted to overlay other SVG or line or text annotations on top, for your creation.<\/p>\n<p>The WordPress PHP 404.php needed to cater for this &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n         $rvalis=str_replace('+',' ',urldecode(explode('&',explode('=', $_SERVER['QUERY_STRING'])[1])[0]));<br \/>\n         $semicrvals=explode(';', $rvalis);<br \/>\n         if (strpos($_SERVER['QUERY_STRING'], '=+data') !== false || strpos($_SERVER['QUERY_STRING'], '=%20data') !== false) {<br \/>\n           if (file_exists(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt')) {<br \/>\n             while (filesize(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt') == 0) {<br \/>\n               sleep(3);<br \/>\n             }<br \/>\n             sleep(3);<br \/>\n             $rvalis=' ' . file_get_contents(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt');<br \/>\n             unlink(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt');<br \/>\n           } else {<br \/>\n             exit;<br \/>\n           }<br \/>\n         } else if (strpos($_SERVER['QUERY_STRING'], '=data') !== false || strpos($_SERVER['QUERY_STRING'], '=data') !== false) {<br \/>\n           if (file_exists(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt')) {<br \/>\n             while (filesize(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt') == 0) {<br \/>\n               sleep(3);<br \/>\n             }<br \/>\n             sleep(3);<br \/>\n             $rvalis='' . file_get_contents(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt');<br \/>\n             unlink(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'existtemporarily' . fgcserver_remote_addr() . '.txt');<br \/>\n          } else {<br \/>\n             exit;<br \/>\n           }<br \/>\n         }<br \/>\n\/\/<br \/>\n\/\/ ahead of<br \/>\n\/\/<br \/>\n      if (strpos(strtolower($_SERVER['QUERY_STRING']), 'image=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(ourexplode('image=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            $plusline=str_replace('fillc', $fillc, str_replace('strokec', $strokec, $plusline));<br \/>\n            $thehome=' L ' . ($newWidth \/ 2) . ' ' . ($newHeight \/ 2) . ' Z';<br \/>\n            if (substr(trim(($rvalis . '0')),0,1) &gt;= '0' && substr(trim(($rvalis . '0')),0,1) &lt;= '9') {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;' . $deffilter . '<br \/>\n&lt;rect' . $usefilter . ' x=\"0\" y=\"0\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"none\" &gt;'  . $animationaroundperhaps . '&lt;\/rect&gt;<br \/>\n' . $plusline . '&lt;\/svg&gt;';<br \/>\n            } else {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;' . $deffilter . '<br \/>\n&lt;image' . $usefilter . ' x=\"0\" y=\"0\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" href=\"' . str_replace(' ','+',trim($rvalis)) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" &gt;'  . $animationaroundperhaps . '&lt;\/image&gt;<br \/>\n' . $plusline . '&lt;\/svg&gt;';<br \/>\n            }<br \/>\n            exit;<br \/>\n       }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html------GETME\">seventh draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-image-shapes-tutorial\/'>SVG Image Shapes Tutorial<\/a>.<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='svgsat'>Previous relevant <a target=_blank title='SVG Shapes Animations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-animations-tutorial\/'>SVG Shapes Animations Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"SVG Shapes Animations Tutorial\"]<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Animations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_modes.jpg\" title=\"SVG Shapes Animations Tutorial\" style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>In a similar way to the way yesterday's <a title='SVG Shapes Drop Shadow Filter Tutorial' href='#svgsdsft'>SVG Shapes Drop Shadow Filter Tutorial<\/a>'s ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>new SVG filter (ie. drop shadow) functionality ... was a totally PHP 404.php job to implement ... today, the even ...<\/li>\n\n\n\n\n<li>newer <a target=_blank title='SVG animations information ... thanks' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/SVG_animation_with_SMIL'>SVG animation<\/a> (ie. along a path) functionality<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... and was also  a totally PHP 404.php <sub>sub<\/sub>job.<\/p>\n\n\n\n&lt;?php\n<code>\n       $animationaroundperhaps='    &lt;animateMotion\n      path=\"M 0 0 H ' . ($newWidth - 0) . ' Z\"\n      dur=\"3s\"\n      repeatCount=\"indefinite\" \/&gt;\n';\n\/\/ ... applied or not to an SVG circle <font color=blue>as per<\/font> ...\n            header('Content-Type: image\/svg+xml');\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\" \n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;' . $deffilter . '\n&lt;circle cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" r=\"' . (($newWidth + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" <font color=blue>&gt;'  . $animationaroundperhaps . ' &lt;<\/font>\/<font color=blue>circle<\/font>&gt;\n&lt;path' . $usefilter . ' d=\"M ' . ($newWidth \/ 2) . ' 0 A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 1, ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 2) . ' ' . $thehome . '\" stroke=\"white\" stroke-width=\"3\" fill=\"white\"  &gt;'  . $animationaroundperhaps . ' &lt;\/path&gt;\n' . $plusline . '&lt;\/svg&gt;';\n            exit;            \n<\/code>\n?&gt;\n\n\n\n<p>Different, though, is the control regarding the use or not of these new functionalities, where a \"Some\" (h1 element) hardcoding is now a select (ie. dropdown) mode of use element ...<\/p>\n\n\n\n<code>\n&lt;select id=myselanim&gt;&lt;option value=' '&gt;Shadowed&lt;\/option&gt;&lt;option value='UPPERCASE'&gt;Animated and Shadowed&lt;\/option&gt;&lt;option value='uppercase'&gt;Animated&lt;\/option&gt;&lt;option value=''&gt;Some&lt;\/option&gt;&lt;\/select&gt;\n<\/code>\n\n\n\n<p> ... referenced in some new Javascript \"wrapper\" functions ...<\/p>\n\n\n\n<code>\n  function maybenoimshadows(inbit) {\n    if (document.getElementById('myselanim').value == ' ') {\n      return '%20' + inbit;\n    } else if (document.getElementById('myselanim').value == 'UPPERCASE') {\n      return '%20' + inbit;\n    }\n    return inbit;\n  }\n  <br \/>\n  function maybenoifshadows(inbit) {\n    if (document.getElementById('myselanim').value == ' ') {\n      return '%20' + inbit;\n    } else if (document.getElementById('myselanim').value == 'UPPERCASE') {\n      return '%20' + inbit;\n    }\n    return inbit;\n  }\n  <br \/>\n  function animcheck(insrc) {\n    if (document.getElementById('myselanim').value.trim() != '') {\n      return insrc.replace(lastimagesuffix + '=', lastimagesuffix.toUpperCase() + '=').replace(document.getElementById('thimagesel').value + '=', document.getElementById('thimagesel').value.toUpperCase() + '=');\n    }\n    return insrc;\n  }\n  <br \/>\n  function anifcheck(insrc) {\n    if (document.getElementById('myselanim').value.trim() != '') {\n      return insrc.replace(lastiframesuffix + '=', lastiframesuffix.toUpperCase() + '=').replace(document.getElementById('thiframesel').value + '=', document.getElementById('thiframesel').value.toUpperCase() + '=');\n    }\n    return insrc;\n  }\n<\/code>\n\n\n\n<p> ... tweaking URLs to differentiate among those four modes of use in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html-----GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html-----GETME\">fifth draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>).<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-animations-tutorial\/'>SVG Shapes Animations Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgsdsft'>Previous relevant <a target=_blank title='SVG Shapes Drop Shadow Filter Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-drop-shadow-filter-tutorial\/'>SVG Shapes Drop Shadow Filter Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Drop Shadow Filter Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_filter.jpg\" title=\"SVG Shapes Drop Shadow Filter Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Drop Shadow Filter Tutorial<\/p><\/div>\n<p>With the overall &#8230;<\/p>\n<ul>\n<li>overlay &#8230; and &#8230;<\/li>\n<li>annotation<\/li>\n<\/ul>\n<p> &#8230; feel to the blog posting thread recent posts regarding our &#8220;Show Some Shapes&#8221; latest web application with yesterday&#8217;s <a title='SVG Shapes Text Annotation Tutorial' href='#svgstat'>SVG Shapes Text Annotation Tutorial<\/a> we became keen to follow up &#8230;<\/p>\n<ul>\n<li>3D data arrangement talk &#8230; with &#8230;<\/li>\n<li>3D SVG display feel<\/li>\n<\/ul>\n<p>As you might expect, there are a variety of ways to approach this using SVG <a target=_blank title='SVG filters information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_filters_intro.asp'>filter<\/a><sub>s<\/sub>, and we&#8217;d like to thank <a target=_blank title='SVG Drop Shadow information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_feoffset.asp'>W3School&#8217;s SVG Drop Shadow<\/a> filter advice for what we decided to adopt, here, at least for now, to make the SVG shapes pop out of the webpage in a 3D way, using shadowing.<\/p>\n<p>It&#8217;s a generic change, and was only a change affecting 404.php work whereby we defined two new variables, as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n       $deffilter='  &lt;defs&gt;<br \/>\n    &lt;filter id=\"f1\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\"&gt;<br \/>\n      &lt;feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"20\" dy=\"20\" \/&gt;<br \/>\n      &lt;feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"10\" \/&gt;<br \/>\n      &lt;feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" \/&gt;<br \/>\n    &lt;\/filter&gt;<br \/>\n  &lt;\/defs&gt;<br \/>\n';<br \/>\n       $usefilter=' filter=\"url(#f1)\" ';<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; applied like <font color=blue>as in<\/font> the exemplified case of an SVG circle below &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<font color=blue>' . $deffilter . '<\/font><br \/>\n&lt;circle<font color=blue>' . $usefilter . '<\/font> cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" r=\"' . (($newWidth + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n' . $plusline . '&lt;\/svg&gt;';<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application you can also <a href='#ifss'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-drop-shadow-filter-tutorial\/'>SVG Shapes Drop Shadow Filter Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgstat'>Previous relevant <a target=_blank title='SVG Shapes Text Annotation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-text-annotation-tutorial\/'>SVG Shapes Text Annotation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Text Annotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_text_annotation.jpg\" title=\"SVG Shapes Text Annotation Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Text Annotation Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='SVG Shapes Line Annotation Tutorial' href='#svgslat'>SVG Shapes Line Annotation Tutorial<\/a> was a fantastic lead in for today&#8217;s Text Annotation ideas with our &#8220;Show Some Shapes&#8221; web application, of recent times.<\/p>\n<p>The reason is, partly, we reckon, because if you lead off your development with the harder option, that &#8230;<\/p>\n<ul>\n<li><i>Line Annotation<\/i> is, with its x1,y1,x2,y2 set<sub>s<\/sub> of data needed &#8230; has more work behind it than &#8230;<\/li>\n<li><i>Text Annotation<\/i> has, a lot of the time, with its application quite often sufficing with x1,y1 only (and assuming a horizontal alignment), whereas if the x1,y1,x2,y2 is defined, in the code, we can still use a &#8230;<br \/>\n<code><br \/>\n<font color=blue>&lt;text x=\"167\" y=\"167\" transform=\"rotate(90,167,167)\" stroke-width=\"2\" stroke=\"black\" fill=\"rgb(0,0,255)\"&gt;diameter&lt;\/text&gt;<\/font><br \/>\n&lt;line x1=\"167\" y1=\"0\" x2=\"167\" y2=\"334\" stroke-width=\"2\" stroke=\"black\" fill=\"rgb(0,0,255)\"&gt;&lt;title&gt;diameter&lt;\/title&gt;&lt;\/line&gt;<br \/>\n<\/code>\n<\/ul>\n<p> &#8230; example of <i>###<\/i> <font size=1>(as explained later)<\/font> style of <font color=blue>SVG text<\/font> arrangement where &#8230;<\/p>\n<ol>\n<li>text positional x and y are halfway along the &#8220;line&#8221; SVG element they are describing (which in the x1,y1 only case, is coded to end up being x1,y1) &#8230; and &#8230;<\/li>\n<li>SVG text has a great <i>transform<\/i> attribute <a target=_blank title='SVG transform rotate information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/transform#rotate'>rotate<\/a> three argument call going like &#8230;<br \/>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/transform#rotate'><p>\nThe rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y).\n<\/p><\/blockquote>\n<p> &#8230; we make use of <i>angling<\/i> our SVG text appropriately<\/li>\n<\/ol>\n<p> &#8230; then this is the better way around to approach the project.  For the user, this &#8220;text annotation&#8221; interest can now be flagged via a &#8230;<\/p>\n<ul>\n<li>## delimitation (of textbox entries) creates SVG text only (with no SVG line) annotation creation &#8230; while &#8230;<\/li>\n<li>### delimitation (of textbox entries) creates SVG text and SVG line annotation (with a SVG title hover component) creation &#8230; augmenting the existant &#8230;<\/li>\n<li># delimitation (of textbox entries) creates SVG line annotation only (with a SVG title hover component) creation<\/li>\n<\/ul>\n<p> &#8230; as far as text annotations now go in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html----GETME\">the only mildly changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html----GETME\">fourth draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>).<\/p>\n<p><font color=blue>More work<\/font>, though, was asked of 404.php, as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n       $plusline='';<br \/>\n       <font color=blue>$annoword='title';<br \/>\n       <br \/>\n       if (strpos($_SERVER['QUERY_STRING'], '=') !== false) {<br \/>\n         $rvalis=str_replace('+',' ',urldecode(explode('&',explode('=', $_SERVER['QUERY_STRING'])[1])[0]));<br \/>\n         $semicrvals=explode(';', $rvalis);<br \/>\n         for ($ijk=0; $ijk<sizeof($semicrvals); $ijk++) {\n         $crvals=explode(',', $semicrvals[$ijk]);\n         $combit='';\n         <font color=blue>$annoword='title';<br \/>\n         $theangle=-999.0;<br \/>\n         if (sizeof($crvals) == 2 && strpos($semicrvals[$ijk], '##') !== false) {<br \/>\n           array_push($crvals, $crvals[0]);<br \/>\n           array_push($crvals, $crvals[1]);<br \/>\n           $theangle=0.0;<br \/>\n         } else if (sizeof($crvals) == 4) {<br \/>\n           if (explode('#',$crvals[0])[0] == explode('#',$crvals[2])[0] && explode('#',$crvals[1])[0] == explode('#',$crvals[3])[0]) {<br \/>\n             $theangle=0.0;<br \/>\n           }<br \/>\n         }<\/font><br \/>\n         if (sizeof($crvals) >= 4) {<br \/>\n           for ($hj=0; $hj<4; $hj++) {\n              $comsb=explode('#', $crvals[$hj]);\n              if (sizeof($comsb) > 1) {<br \/>\n               <font color=blue>if (sizeof($comsb) > 2 && $comsb[1] == '') {<br \/>\n                 $annoword='text';<br \/>\n                 if ($theangle < -361.0) {\n                 $radvalalt=atan2((explode('#',$crvals[3])[0] - explode('#',$crvals[1])[0]),(explode('#',$crvals[2])[0] - explode('#',$crvals[0])[0]));\n                 $radval=atan2((explode('#',$crvals[2])[0] - explode('#',$crvals[0])[0]),(explode('#',$crvals[3])[0] - explode('#',$crvals[1])[0]));\n                 $theangle=fmod((450 - rad2deg($radval) + 360),360);\n                 if ($theangle > 180.0) { $theangle-=360.0; }<br \/>\n                 }<br \/>\n                 $plusline.='<' . $annoword . ' x=\"' . ((explode('#',$crvals[0])[0] + explode('#',$crvals[2])[0]) \/ 2) . '\" y=\"' . ((explode('#',$crvals[1])[0] + explode('#',$crvals[3])[0]) \/ 2) . '\" transform=\"rotate(' . $theangle . ',' . ((explode('#',$crvals[0])[0] + explode('#',$crvals[2])[0]) \/ 2) . ',' . ((explode('#',$crvals[1])[0] + explode('#',$crvals[3])[0]) \/ 2) . ')\" stroke-width=\"2\" stroke=\"strokec\" fill=\"fillc\">' . $comsb[-1 + sizeof($comsb)] . '<\/' . $annoword . '>';<br \/>\n                 $theangle=-999.0;<br \/>\n                 if (sizeof($comsb) > 3) {<br \/>\n                   $annoword='title';<br \/>\n                   $combit='<' . $annoword . '>' . $comsb[-1 + sizeof($comsb)] . '<\/' . $annoword . '>';<br \/>\n                 }<br \/>\n               } else {<\/font><br \/>\n                 $combit='<<font color=blue>' . $annoword . '<\/font>>' . $comsb[1] . '<\/<font color=blue>' . $annoword . '<\/font>>';<br \/>\n               <font color=blue>}<\/font><br \/>\n              }<br \/>\n           }<br \/>\n           <font color=blue>if ($annoword == 'title') {<\/font><br \/>\n              $plusline.='<line x1=\"' . explode('#',$crvals[0])[0] . '\" y1=\"' . explode('#',$crvals[1])[0] . '\" x2=\"' . explode('#',$crvals[2])[0] . '\" y2=\"' . explode('#',$crvals[3])[0] . '\" stroke-width=\"2\" stroke=\"strokec\" fill=\"fillc\">' . $combit . '<\/line>';<br \/>\n           <font color=blue>}<\/font><br \/>\n           if (sizeof($crvals) >= 6) {<br \/>\n             for ($ibv=6; $ibv<=sizeof($crvals); $ibv+=2) {\n           $combit='';\n           $annoword='title';\n           for ($hj=-4; $hj<=-1; $hj++) {\n              $comsb=explode('#', $crvals[$hj + $ibv]);\n              if (sizeof($comsb) > 1) {<br \/>\n               <font color=blue>if (sizeof($comsb) > 2 && $comsb[1] == '') {<br \/>\n                 $annoword='text';<br \/>\n                 if ($theangle < -361.0) {\n                 $radvalalt=atan2((explode('#',$crvals[-1 + $ibv])[0] - explode('#',$crvals[-3 + $ibv])[0]),(explode('#',$crvals[-2 + $ibv])[0] - explode('#',$crvals[-4 + $ibv])[0]));\n                 $radval=atan2((explode('#',$crvals[-2 + $ibv])[0] - explode('#',$crvals[-4 + $ibv])[0]),(explode('#',$crvals[-1 + $ibv])[0] - explode('#',$crvals[-3 + $ibv])[0]));\n                 $theangle=fmod((450 - rad2deg($radval) + 360),360);\n                 if ($theangle > 180.0) { $theangle-=360.0; }<br \/>\n                 }<br \/>\n                 $plusline.='<' . $annoword . ' x=\"' . ((explode('#',$crvals[-4 + $ibv])[0] + explode('#',$crvals[-2 + $ibv])[0]) \/ 2) . '\" y=\"' . ((explode('#',$crvals[-3 + $ibv])[0] + explode('#',$crvals[-1 + $ibv])[0]) \/ 2) . '\" transform=\"rotate(' . $theangle . ',' . ((explode('#',$crvals[-4 + $ibv])[0] + explode('#',$crvals[-2 + $ibv])[0]) \/ 2) . ',' . ((explode('#',$crvals[-3 + $ibv])[0] + explode('#',$crvals[-1 + $ibv])[0]) \/ 2) . ')\" stroke-width=\"2\" stroke=\"strokec\" fill=\"fillc\">' . $comsb[-1 + sizeof($comsb)] . '<\/' . $annoword . '>';<br \/>\n                 $theangle=-999.0;<br \/>\n                 if (sizeof($comsb) > 3) {<br \/>\n                   $annoword='title';<br \/>\n                   $combit='<' . $annoword . '>' . $comsb[-1 + sizeof($comsb)] . '<\/' . $annoword . '>';<br \/>\n                 }<br \/>\n               } else {<\/font><br \/>\n                 $combit='<<font color=blue>' . $annoword . '<\/font>>' . $comsb[1] . '<\/<font color=blue>' . $annoword . '<\/font>>';<br \/>\n               <font color=blue>}<\/font><br \/>\n              }<br \/>\n           }<br \/>\n           <font color=blue>if ($annoword == 'title') {<\/font><br \/>\n              $plusline.='<line x1=\"' . explode('#',$crvals[-4 + $ibv])[0]. '\" y1=\"' . explode('#',$crvals[-3 + $ibv])[0] . '\" x2=\"' . explode('#',$crvals[-2 + $ibv])[0] . '\" y2=\"' . explode('#',$crvals[-1 + $ibv])[0] . '\" stroke-width=\"2\" stroke=\"strokec\" fill=\"fillc\">' . $combit . '<\/line>';<br \/>\n           <font color=blue>}<\/font><br \/>\n             }<br \/>\n           }<br \/>\n         } \/\/ else if (sizeof($crvals) == 3) { if (strpos(substr($crvals[2] . ' ',1),'-') !== false) {  $rvalis=$rvalis;   }        }<br \/>\n         }<br \/>\n       }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>You want to try those same practical examples as yesterday, but with text annotation, as well?   Type &#8230;<\/p>\n<blockquote style=font-size:8px;><p>\n<a style=text-decoration:none;cursor:pointer; target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">167###radius,167,334,167;167###diameter,0,167,334;167###chord,334,334,167;1###tangent,0,1,334;20###secant,0,20,334<\/a>\n<\/p><\/blockquote>\n<p> &#8230; into the iframe fill textbox &#8230; or try the equivalent resultant URL &#8230;<\/p>\n<p><a style=font-size:8px; target=_blank title='URL' href='\/\/www.rjmprogramming.com.au\/ITblog\/334\/334\/?svg0000ff+circle=167%23%23%23radius%2C167%2C334%2C167%3B167%23%23%23diameter%2C0%2C167%2C334%3B167%23%23%23chord%2C334%2C334%2C167%3B1%23%23%23tangent%2C0%2C1%2C334%3B20%23%23%23secant%2C0%2C20%2C334'>https:\/\/www.rjmprogramming.com.au\/ITblog\/334\/334\/?svg0000ff+circle=167%23%23%23radius%2C167%2C334%2C167%3B167%23%23%23diameter%2C0%2C167%2C334%3B<br \/>167%23%23%23chord%2C334%2C334%2C167%3B1%23%23%23tangent%2C0%2C1%2C334%3B20%23%23%23secant%2C0%2C20%2C334<\/a> <\/p>\n<p> &#8230; or view it below &#8230;<\/p>\n<p><iframe style='width:100%;height:500px;' src='\/\/www.rjmprogramming.com.au\/ITblog\/334\/334\/?svg0000ff+circle=167%23%23%23radius%2C167%2C334%2C167%3B167%23%23%23diameter%2C0%2C167%2C334%3B167%23%23%23chord%2C334%2C334%2C167%3B1%23%23%23tangent%2C0%2C1%2C334%3B20%23%23%23secant%2C0%2C20%2C334'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-text-annotation-tutorial\/'>SVG Shapes Text Annotation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgslat'>Previous relevant <a target=_blank title='SVG Shapes Line Annotation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-line-annotation-tutorial\/'>SVG Shapes Line Annotation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Line Annotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_line_annotation.gif\" title=\"SVG Shapes Line Annotation Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Line Annotation Tutorial<\/p><\/div>\n<p>Our &#8220;Show Some Shapes&#8221; web application of <a title='SVG Shapes Overlay Tutorial' href='#svgsot'>SVG Shapes Overlay Tutorial<\/a> was well set up for &#8230;<\/p>\n<ul>\n<li>line<sub>ar<\/sub> annotation &#8230; especially considering &#8230;<\/li>\n<li>line<sub>s<\/sub> use the stroke colour the user defines and the other shape types mainly show the fill colour<\/li>\n<\/ul>\n<p> &#8230; and so, generally speaking, line features can &#8220;overlay&#8221; other shapes, like annotation helps clarify a diagram or document.<\/p>\n<p>In order to allow for this we&#8217;re now accepting these styles of entry (via any textbox presented to the user) &#8230;<\/p>\n<ul>\n<li>comma (and\/or semicolon ; pen up) separated <i>x1,y1,x2,y2<\/i> co-ordinate set<sub>(s)<\/sub> &#8230;<\/li>\n<li>comma (and\/or semicolon ; pen up) separated <i>x1,y1,bearing-distance<\/i> set<sub>(s)<\/sub> &#8230;<\/li>\n<li>justification code from <i>to<\/i> justification code to ( eg. the default <i>tltobr<\/i> )&#8230; where &#8230;\n<ol>\n<li><i>tl<\/i> &#8230; top left<\/li>\n<li><i>tc<\/i> &#8230; top centre<\/li>\n<li><i>tr<\/i> &#8230; top right<\/li>\n<li><i>cl<\/i> &#8230; centre left<\/li>\n<li><i>cc<\/i> &#8230; centre centre<\/li>\n<li><i>cr<\/i> &#8230; centre right<\/li>\n<li><i>bl<\/i> &#8230; bottom left<\/li>\n<li><i>bc<\/i> &#8230; bottom centre<\/li>\n<li><i>br<\/i> &#8230; bottom right<\/li>\n<\/ol>\n<p> &#8230; relative to the SVG window width x height dimensions, comma (and\/or semicolon ; pen up) separated\n<\/li>\n<\/ul>\n<p> &#8230; allowing &#8220;hover&#8221; titles via # (hashtag) delimited comments <font size=1>(hopefully missing commas and semicolons)<\/font> helped out by a new Javascript function &#8230;<\/p>\n<p><code><br \/>\n  function equalsrcheck(ioo) {<br \/>\n    var thisval=ioo.value;<br \/>\n    var justs=['tl','tc','tm','tr','bl','bc','bm','br','cl','cc','cm','cr','ml','mc','mm','mr'];<br \/>\n    var jusxw=[0.00,0.50,0.50,1.00,0.00,0.50,0.50,1.00,0.00,0.50,0.50,1.00,0.00,0.50,0.50,1.00];<br \/>\n    var jusyh=[0.00,0.00,0.00,0.00,1.00,1.00,1.00,1.00,0.50,0.50,0.50,0.50,0.50,0.50,0.50,0.50];<br \/>\n    var xfofarc='', iix, xtoflds=[], jjx;<br \/>\n    \/\/if (thisval.trim() == '' || thisval.indexOf(',') == -1) { equalsr='y'; }<br \/>\n    if (thisval.indexOf(',') != -1) {<br \/>\n       var cflds=thisval.split(',');<br \/>\n       for (var inm=0; inm&lt;cflds.length; inm++) {<br \/>\n         if (cflds[inm].split('#')[0].toLowerCase().indexOf('to') == 2 && eval('' + cflds[inm].split('#')[0].length) == 6) {<br \/>\n       xfofarc='';<br \/>\n       xtoflds=cflds[inm].split('#')[0].toLowerCase().split('to');<br \/>\n       for (iix=0; iix&lt;justs.length; iix++) {<br \/>\n         if (xtoflds[0] == justs[iix] || xtoflds[0] == (justs[iix].substring(1) + justs[iix].substring(0,1))) {<br \/>\n           if (ioo.id.indexOf('mage') != -1) {<br \/>\n            xfofarc='' + eval(jusxw[iix] * imifw) + ',' + eval(jusyh[iix] * imifh) + ',';<br \/>\n           } else if (ioo.id.indexOf('frame') != -1) {<br \/>\n            xfofarc='' + eval(jusxw[iix] * ififw) + ',' + eval(jusyh[iix] * ififh) + ',';<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       if (xfofarc != '') {<br \/>\n       for (jjx=0; jjx&lt;justs.length; jjx++) {<br \/>\n         if (xtoflds[1] == justs[jjx] || xtoflds[1] == (justs[iix].substring(1) + justs[iix].substring(0,1))) {<br \/>\n           if (ioo.id.indexOf('mage') != -1) {<br \/>\n            xfofarc+='' + eval(jusxw[jjx] * imifw) + ',' + eval(jusyh[jjx] * imifh) + '';<br \/>\n           } else if (ioo.id.indexOf('frame') != -1) {<br \/>\n            xfofarc+='' + eval(jusxw[jjx] * ififw) + ',' + eval(jusyh[jjx] * ififh) + '';<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n       if (eval('' + xfofarc.split(',').length) == 4) {<br \/>\n           thisval=thisval.replace(cflds[inm].split('#')[0], xfofarc);<br \/>\n       }<br \/>\n         }<br \/>\n         cflds=thisval.split(',');<br \/>\n       }<br \/>\n       if (eval('' + cflds.length) &gt;= 3) {<br \/>\n         if (eval('' + cflds.length) &gt;= 4 && (cflds[2] + ' ').substring(1).indexOf('-') == -1) {<br \/>\n           equalsr=encodeURIComponent(thisval);<br \/>\n           if (ioo.id.replace('cp','sel').indexOf('sel') != -1) { ioo.value=''; }<br \/>\n           thisval='';<br \/>\n         } else if ((cflds[2] + ' ').substring(1).indexOf('-') &gt; 0) {<br \/>\n           var pcx=eval('' + cflds[0].split('#')[0]);<br \/>\n           var pcy=eval('' + cflds[1].split('#')[0]);<br \/>\n           var radialssofar='', fdel='';<br \/>\n           for (var jj=2; jj&lt;cflds.length; jj++) {<br \/>\n           if ((cflds[jj] + ' ').substring(1).indexOf('-') &gt; 0) {<br \/>\n           pcx=eval(pcx + Math.sin(Math.PI * eval('' + cflds[jj].split('#')[0].split('-')[0]) \/ 180.0) * eval('' + cflds[jj].split('#')[0].split('-')[1]));<br \/>\n           pcy=eval(pcy + Math.cos(Math.PI * eval('' + cflds[jj].split('#')[0].split('-')[0]) \/ 180.0) * eval('' + cflds[jj].split('#')[0].split('-')[1]));<br \/>\n           radialssofar+=fdel + cflds[0] + ',' + cflds[1] + ',' + pcx + ',' + pcy;<br \/>\n           pcx=eval('' + cflds[0].split('#')[0]);<br \/>\n           pcy=eval('' + cflds[1].split('#')[0]);<br \/>\n           fdel=';';<br \/>\n           } else {<br \/>\n           radialssofar+=',' + cflds[jj].split('#')[0];<br \/>\n           }<br \/>\n           }<br \/>\n           equalsr=encodeURIComponent(radialssofar);<br \/>\n           if (ioo.id.replace('cp','sel').indexOf('sel') != -1) { ioo.value=''; }<br \/>\n           thisval='';<br \/>\n         } else {<br \/>\n           equalsr='y';<br \/>\n           thisval='' + cflds[0].split('#')[0];<br \/>\n         }<br \/>\n       }<br \/>\n    } else if (thisval.split('#')[0].toLowerCase().indexOf('to') == 2 && eval('' + thisval.split('#')[0].length) == 6) {<br \/>\n       var toflds=thisval.toLowerCase().split('to');<br \/>\n       var combit='';<br \/>\n       if (thisval.indexOf('#') != -1) { combit='#' + thisval.split('#')[1].split(',')[0].split(';')[0]; }<br \/>\n       var fofarc='';<br \/>\n       for (var ii=0; ii&lt;justs.length; ii++) {<br \/>\n         if (toflds[0].split('#')[0] == justs[ii] || toflds[0].split('#')[0] == (justs[ii].substring(1) + justs[ii].substring(0,1))) {<br \/>\n           if (ioo.id.indexOf('mage') != -1) {<br \/>\n            fofarc='' + eval(jusxw[ii] * imifw) + ',' + eval(jusyh[ii] * imifh) + ',';<br \/>\n           } else if (ioo.id.indexOf('frame') != -1) {<br \/>\n            fofarc='' + eval(jusxw[ii] * ififw) + ',' + eval(jusyh[ii] * ififh) + ',';<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       if (fofarc != '') {<br \/>\n       for (var jj=0; jj&lt;justs.length; jj++) {<br \/>\n         if (toflds[1].split('#')[0] == justs[jj] || toflds[1].split('#')[0] == (justs[jj].substring(1) + justs[jj].substring(0,1))) {<br \/>\n           if (ioo.id.indexOf('mage') != -1) {<br \/>\n            fofarc+='' + eval(jusxw[jj] * imifw) + ',' + eval(jusyh[jj] * imifh) + '';<br \/>\n           } else if (ioo.id.indexOf('frame') != -1) {<br \/>\n            fofarc+='' + eval(jusxw[jj] * ififw) + ',' + eval(jusyh[jj] * ififh) + '';<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n       if (eval('' + fofarc.split(',').length) == 4) {<br \/>\n           equalsr=encodeURIComponent(fofarc + combit);<br \/>\n           if (ioo.id.replace('cp','sel').indexOf('sel') != -1) { ioo.value=''; }<br \/>\n           thisval='';<br \/>\n       }<br \/>\n    }<br \/>\n    return thisval;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html---GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html---GETME\">third draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>).<\/p>\n<p>And yes, 404.php had to accomodate these new $_GET argument value expansions <font size=1>(previously only the pretty dumb <i>y<\/i> as a value always)<\/font>, via $plusline line<sub>ar<\/sub> annotation append PHP as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n       $plusline='';<br \/>\n       <br \/>\n       if (strpos($_SERVER['QUERY_STRING'], '=') !== false) {<br \/>\n         $rvalis=str_replace('+',' ',urldecode(explode('&',explode('=', $_SERVER['QUERY_STRING'])[1])[0]));<br \/>\n         $semicrvals=explode(';', $rvalis);<br \/>\n         for ($ijk=0; $ijk&lt;sizeof($semicrvals); $ijk++) {<br \/>\n         $crvals=explode(',', $semicrvals[$ijk]);<br \/>\n         $combit='';<br \/>\n         if (sizeof($crvals) &gt;= 4) {<br \/>\n           for ($hj=0; $hj&lt;4; $hj++) {<br \/>\n              $comsb=explode('#', $crvals[$hj]);<br \/>\n              if (sizeof($comsb) &gt; 1) {<br \/>\n                 $combit='&lt;title&gt;' . $comsb[1] . '&lt;\/title&gt;';<br \/>\n              }<br \/>\n           }<br \/>\n           $plusline.='&lt;line x1=\"' . explode('#',$crvals[0])[0] . '\" y1=\"' . explode('#',$crvals[1])[0] . '\" x2=\"' . explode('#',$crvals[2])[0] . '\" y2=\"' . explode('#',$crvals[3])[0] . '\" stroke-width=\"2\" stroke=\"strokec\" fill=\"fillc\"&gt;' . $combit . '&lt;\/line&gt;';<br \/>\n           if (sizeof($crvals) &gt;= 6) {<br \/>\n             for ($ibv=6; $ibv&lt;=sizeof($crvals); $ibv+=2) {<br \/>\n           $combit='';<br \/>\n           for ($hj=-4; $hj&lt;=-1; $hj++) {<br \/>\n              $comsb=explode('#', $crvals[$hj + $ibv]);<br \/>\n              if (sizeof($comsb) &gt; 1) {<br \/>\n                 $combit='&lt;title&gt;' . $comsb[1] . '&lt;\/title&gt;';<br \/>\n              }<br \/>\n           }<br \/>\n              $plusline.='&lt;line x1=\"' . explode('#',$crvals[-4 + $ibv])[0]. '\" y1=\"' . explode('#',$crvals[-3 + $ibv])[0] . '\" x2=\"' . explode('#',$crvals[-2 + $ibv])[0] . '\" y2=\"' . explode('#',$crvals[-1 + $ibv])[0] . '\" stroke-width=\"2\" stroke=\"strokec\" fill=\"fillc\"&gt;' . $combit . '&lt;\/line&gt;';<br \/>\n             }<br \/>\n           }<br \/>\n         } \/\/ else if (sizeof($crvals) == 3) { if (strpos(substr($crvals[2] . ' ',1),'-') !== false) {  $rvalis=$rvalis;   }        }<br \/>\n         }<br \/>\n       }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>You want to try some practical examples of use?   Type &#8230;<\/p>\n<blockquote style=font-size:8px;><p>\n<a style=text-decoration:none;cursor:pointer; target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">167#radius,167,334,167;167#diameter,0,167,334;167#chord,334,334,167;1#tangent,0,1,334;20#secant,0,20,334<\/a>\n<\/p><\/blockquote>\n<p> &#8230; into the iframe fill textbox &#8230; or try the equivalent resultant URL &#8230;<\/p>\n<p><a style=font-size:8px; target=_blank title='URL' href='\/\/www.rjmprogramming.com.au\/ITblog\/334\/334\/?svg0000ff+circle=167%23radius%2C167%2C334%2C167%3B167%23diameter%2C0%2C167%2C334%3B167%23chord%2C334%2C334%2C167%3B1%23tangent%2C0%2C1%2C334%3B20%23secant%2C0%2C20%2C334'>https:\/\/www.rjmprogramming.com.au\/ITblog\/334\/334\/?svg0000ff+circle=167%23radius%2C167%2C334%2C167%3B167%23diameter%2C0%2C167%2C334%3B167%23chord%2C334%2C334%2C<br \/>167%3B1%23tangent%2C0%2C1%2C334%3B20%23secant%2C0%2C20%2C334<\/a> <\/p>\n<p> &#8230; or view it below &#8230;<\/p>\n<p><iframe style='width:100%;height:500px;' src='\/\/www.rjmprogramming.com.au\/ITblog\/334\/334\/?svg0000ff+circle=167%23radius%2C167%2C334%2C167%3B167%23diameter%2C0%2C167%2C334%3B167%23chord%2C334%2C334%2C167%3B1%23tangent%2C0%2C1%2C334%3B20%23secant%2C0%2C20%2C334'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-svg-shapes-overlay-tutorial\/'>SVG Shapes Line Annotation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgsot'>Previous relevant <a target=_blank title='SVG Shapes Overlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-overlay-tutorial\/'>SVG Shapes Overlay Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_overlay.gif\" title=\"SVG Shapes Overlay Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Overlay Tutorial<\/p><\/div>\n<p>The dimensions discussed in yesterday&#8217;s <a title='SVG Shapes Dimensions and Colour Tutorial' href='#svgsdct'>SVG Shapes Dimensions and Colour Tutorial<\/a> were the &#8220;what we normally talk about as 2D&#8221; dimensions &#8230;<\/p>\n<ol>\n<li>width <font size=1>&#8230; which you could think of as <font color=blue>X<\/font><\/font> &#8230; and &#8230;<\/li>\n<li>height <font size=1>&#8230; which you could think of as <font color=blue>Y<\/font><\/font> &#8230; and, today, we want to add into the mix &#8230;<\/li>\n<li><a target=_blank title=\"Overlay blog postings, inhouse\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\">&#8220;overlay&#8221;<\/a> &#8230; or depth &#8230; <font size=1>&#8230; which you could think of as <font color=blue>Z<\/font><\/font> &#8230; or elevation &#8230; the three of which we all know of as &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Fayette_Pinkney'>Fayette<\/a>, <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=5OpuZzsPBhQ'>we see you<\/a>, <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s'>again<\/a>, but not in degrees &#8230; but &#8230; in &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=jT2og9rWEAE'>Kate<\/a>, something&#8217;s coming to you?  Yes &#8230; yes &#8230; three thingos &#8230; thingos being &#8230; maybe &#8230; yes &#8230; <span style=cursor:pointer; onmouseover=\"this.innerHTML=this.innerHTML.replace('4','6').replace(' size=',' color=purple SIZE=');\" onclick=\"this.innerHTML=this.innerHTML.replace('4','6').replace(' size=',' color=purple SIZE=');\"><font size=\"4\">3 dimensions<\/font><\/span>!<\/li>\n<\/ol>\n<p>This opens up the variety of &#8220;shapes&#8221; you can come up with considerably, even without involving any opacity, and so far we have not coded for CSS z-index usage <font size=1>(just good ol&#8217; <i>position:absolute<\/i> usage so far)<\/font>.  Should you stumble upon a useful &#8220;overlay creation&#8221; a right click can open it up in a new web browser tab, should you prefer that arrangement.<\/p>\n<p>To achieve this change asked nothing more of our 404.php code, but rather asked of the client web application the turning of the &#8220;<i>Height<\/i>&#8221; hardcoding into a new select (dropdown) like &#8230;<\/p>\n<p><code><br \/>\n&lt;select onchange=fixv(this); id=selimageoverlay&gt;&lt;option value=\"\"&gt;<i>Height<\/i>&lt;\/option&gt;&lt;option value=\"overlay\"&gt;Height ... Overlayed&lt;\/option&gt;&lt;\/select&gt;<br \/>\n&lt;div id=\"doverlay\"&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and accompanying new Javascript global var<font size=1>iables<\/font> and &#8220;onchange event logic&#8221; &#8230;<\/p>\n<p><code><br \/>\n  var imageoverlay=false, iframeoverlay=false;<br \/>\n  var imageprevs='', iframeprevs='';<br \/>\n  var imagelasts='', iframelasts='';<br \/>\n  var imageurlpush=[], iframeurlpush=[];<br \/>\n  var imagerect=[], iframerect=[];<br \/>\n  var snapshotoh='';<br \/>\n  var bigwo=[];<br \/>\n<\/code><\/p>\n<p> &#8230; with new Javascript &#8220;onchange event logic&#8221; code like &#8230;<\/p>\n<p><code><br \/>\n  function fixv(oselinvo) {<br \/>\n    var theval=oselinvo.value;<br \/>\n    switch('' + oselinvo.id) {<br \/>\n      case 'selimageoverlay': \/\/ overlay flag<br \/>\n       if (theval.trim() == '') {<br \/>\n         imageoverlay=false;<br \/>\n         \/\/imageurlpush=[];<br \/>\n         \/\/imagerect=[];<br \/>\n       } else {<br \/>\n         if (eval('' + imageurlpush.length) == 0) {<br \/>\n         snapshotoh='&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;' + document.body.outerHTML + '&lt;\/html&gt;';<br \/>\n         }<br \/>\n         imageoverlay=true;<br \/>\n         imageurlpush.push(document.getElementById('myimage' + imagelasts).src);<br \/>\n         imagerect=[];<br \/>\n         imagerect.push(document.getElementById('myimage' + imagelasts).getBoundingClientRect());<br \/>\n         imagelasts='' + imageurlpush.length;<br \/>\n       }<br \/>\n       break;<br \/>\n<br \/> <br \/>\n      case 'seliframeoverlay': \/\/ overlay flag<br \/>\n       if (theval.trim() == '') {<br \/>\n         iframeoverlay=false;<br \/>\n         \/\/iframeurlpush=[];<br \/>\n         \/\/iframerect=[];<br \/>\n       } else {<br \/>\n         if (eval('' + iframeurlpush.length) == 0) {<br \/>\n         snapshotoh='&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;' + document.body.outerHTML + '&lt;\/html&gt;';<br \/>\n         }<br \/>\n         iframeoverlay=true;<br \/>\n         iframeurlpush.push(document.getElementById('myiframe' + iframelasts).src);<br \/>\n         iframerect=[];<br \/>\n         iframerect.push(document.getElementById('myiframe' + iframelasts).getBoundingClientRect());<br \/>\n         iframelasts='' + iframeurlpush.length;<br \/>\n       }<br \/>\n       break;<br \/>\n\/\/<br \/>\n\/\/ more cases would follow<br \/>\n\/\/<br \/>\n      default:<br \/>\n        break;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; setting up the &#8220;oncontextmenu&#8221; (ie. right click) event logic &#8230;<\/p>\n<p><code><br \/>\n  function windowopen(purl, pway) {<br \/>\n    bigwo.push(window.open('','_blank'));<br \/>\n    if (imageoverlay && iframeoverlay) {<br \/>\n    bigwo[eval(-1 + bigwo.length)].document.write(snapshotoh.replace(' id=\"my' + 'iframe\" style=\"',' id=\"my' + 'iframe\" style=\"visibility:hidden;').replace(' id=\"my' + 'image\" style=\"',' id=\"my' + 'image\" style=\"visibility:hidden;').replace(' id=\"do' + 'verlay\"&gt;', ' id=\"do' + 'verlay\"&gt;' + document.getElementById('doverlay').innerHTML));<br \/>\n    } else if (imageoverlay) {<br \/>\n    bigwo[eval(-1 + bigwo.length)].document.write(snapshotoh.replace(' id=\"my' + 'ifrXame\" style=\"',' id=\"my' + 'ifrXame\" style=\"visibility:hidden;').replace(' id=\"my' + 'image\" style=\"',' id=\"my' + 'image\" style=\"visibility:hidden;').replace(' id=\"do' + 'verlay\"&gt;', ' id=\"do' + 'verlay\"&gt;' + document.getElementById('doverlay').innerHTML));<br \/>\n    } else if (iframeoverlay) {<br \/>\n    bigwo[eval(-1 + bigwo.length)].document.write(snapshotoh.replace(' id=\"my' + 'iframe\" style=\"',' id=\"my' + 'iframe\" style=\"visibility:hidden;').replace(' id=\"my' + 'imaXge\" style=\"',' id=\"my' + 'imXage\" style=\"visibility:hidden;').replace(' id=\"do' + 'verlay\"&gt;', ' id=\"do' + 'verlay\"&gt;' + document.getElementById('doverlay').innerHTML));<br \/>\n    } else {<br \/>\n    bigwo[eval(-1 + bigwo.length)].document.write('&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;' + document.body.outerHTML + '&lt;\/html&gt;');<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; and all helped out by two &#8220;wrapper functions&#8221; that wrap the image and\/or iframe &#8220;src&#8221; attribute &#8220;calculation&#8221; code, as per &#8230;<\/p>\n<p><code><br \/>\n  function thenimagain(inurl) {<br \/>\n     if (imageoverlay) {<br \/>\n        var wasp=imageprevs;<br \/>\n        \/\/setTimeout(function() {<br \/>\n        imageprevs=imagelasts;<br \/>\n        imageurlpush.push(inurl);<br \/>\n        document.getElementById('doverlay').innerHTML+='&lt;img title=\"Click for new window version or right click showing overlays\" oncontextmenu=\"windowopen(this.src,' + \"'_blank'\" + ');\" onclick=\"window.open(this.src,' + \"'_blank'\" + ');\" style=' + \"'width:\" + imifw + \"px;height:\" + imifh + \"px;left:\" + imagerect[0].left + \"px;top:\" + imagerect[0].top + \"px;position:absolute;'\" + ' id=myimage' + imagelasts + ' src=\"' + inurl + '\"&gt;&lt;\/img&gt;';<br \/>\n        imagerect=[];<br \/>\n        imagerect.push(document.getElementById('myimage' + imagelasts).getBoundingClientRect());<br \/>\n        imagelasts='' + imageurlpush.length;<br \/>\n        \/\/}, 1000);<br \/>\n        return document.getElementById('myimage' + wasp).src + '#';<br \/>\n     }<br \/>\n     return inurl;<br \/>\n  }<br \/>\n  <br \/>\n  function thenifagain(inurl) {<br \/>\n     if (iframeoverlay) {<br \/>\n       var wasp=iframeprevs;<br \/>\n       \/\/setTimeout(function() {<br \/>\n       iframeprevs=iframelasts;<br \/>\n       iframeurlpush.push(inurl);<br \/>\n       document.getElementById('doverlay').innerHTML+='&lt;iframe title=\"Click for new window version or right click showing overlays\" oncontextmenu=\"windowopen(this.src,' + \"'_blank'\" + ');\" onclick=\"window.open(this.src,' + \"'_blank'\" + ');\" frameborder=0 style=' + \"'width:\" + ififw + \"px;height:\" + ififh + \"px;left:\" + iframerect[0].left + \"px;top:\" + iframerect[0].top + \"px;position:absolute;'\" + ' id=myiframe' + iframelasts + ' src=\"' + inurl + '\"&gt;&lt;\/iframe&gt;';<br \/>\n       iframerect=[];<br \/>\n       iframerect.push(document.getElementById('myiframe' + iframelasts).getBoundingClientRect());<br \/>\n       iframelasts='' + iframeurlpush.length;<br \/>\n       \/\/}, 1000);<br \/>\n       return document.getElementById('myiframe' + wasp).src + '#';<br \/>\n     }<br \/>\n     return inurl;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html--GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html--GETME\">third draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-overlay-tutorial\/'>SVG Shapes Overlay Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgsdct'>Previous relevant <a target=_blank title='SVG Shapes Dimensions and Colour Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-dimensions-and-colour-tutorial\/'>SVG Shapes Dimensions and Colour Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Dimensions and Colour Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes_more.jpg\" title=\"SVG Shapes Dimensions and Colour Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Dimensions and Colour Tutorial<\/p><\/div>\n<p>It&#8217;s not so much fun, for a lot of us, learning about things when it&#8217;s just dished up.  It&#8217;s usually better, especially for our visual or kinesthetic learners out there, that the user can change a setting to see a changed result.  And so, further to yesterday&#8217;s <a title='SVG Shapes Game Primer Tutorial' href='#svgsgpt'>SVG Shapes Game Primer Tutorial<\/a>&#8216;s start to <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html-GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html-GETME\">second draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application (you can also <a href='#ifss'>try below<\/a>), we&#8217;ve added &#8230;<\/p>\n<ul>\n<li>dimensional width and height &#8220;input&#8221; controls<\/li>\n<li>fill colour and stroke colour &#8220;input&#8221; colour picker controls &#8230; including &#8220;Transparent&#8221; and &#8220;None&#8221; choices presented in an accompanying dropdown<\/li>\n<li>fill colour opacity and stroke colour opacity &#8220;input&#8221; controls<\/li>\n<\/ul>\n<p>Our strategy, here was to allow URLs to our 404.php be a lot more complex via &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$opacityis=\"1.0\";<br \/>\n$fopacityis=\"1.0\";<br \/>\n$sopacityis=\"1.0\";<br \/>\n<br \/>\n function restcheck($inideacol) {<br \/>\n    global $opacityis, $fopacityis, $sopacityis, $linemode;<br \/>\n    $outideacol=trim($inideacol);<br \/>\n    $inideacol=$outideacol;<br \/>\n    if (strlen($inideacol) &gt;= 4) {<br \/>\n      if (strpos(strtolower(substr($inideacol, -4, 3)), \"to\") !== false) {<br \/>\n        if ( str_replace('l','r',str_replace('t','r',str_replace('b','r',str_replace('c','r',str_replace('m','r',  strtolower(substr($inideacol, -1, 1)))))))      == 'r') {<br \/>\n           $rbit=explode('to', strtolower($inideacol))[-1 + sizeof(explode('to', strtolower($inideacol)))];<br \/>\n           $lbitis=explode('to' . $rbit,  strtolower($inideacol))[-1 + sizeof(explode('to' . $rbit,  strtolower($inideacol)))];<br \/>\n           $lpref='';<br \/>\n           if ( str_replace('l','r',str_replace('t','r',str_replace('b','r',str_replace('c','r',str_replace('m','r',  strtolower(substr($lbitis, -1, 1)))))))      == 'r') {<br \/>\n             $lpref=strtolower(substr($lbitis, -1, 1));<br \/>\n             if ( str_replace('l','r',str_replace('t','r',str_replace('b','r',str_replace('c','r',str_replace('m','r',  strtolower(substr($lbitis, -2, 1)))))))      == 'r') {<br \/>\n              $linemode=strtolower(substr($lbitis, -2, 1)) . $lpref . 'to' . $rbit;<br \/>\n              $outideacol=substr($inideacol,0,(strlen($inideacol) - strlen($linemode)));<br \/>\n             } else {<br \/>\n              $linemode=$lpref . 'to' . $rbit;<br \/>\n              $outideacol=substr($inideacol,0,(strlen($inideacol) - strlen($linemode)));<br \/>\n             }<br \/>\n\t\t   } else {<br \/>\n             $linemode=$lpref . 'to' . $rbit;<br \/>\n             $outideacol=substr($inideacol,0,(strlen($inideacol) - strlen($linemode)));<br \/>\n           }<br \/>\n        }<br \/>\n      }<br \/>\n      if (strpos(strtolower(substr($outideacol, -2, 2)), \".\") !== false && strpos(strtolower(substr($outideacol, -2, 2)), \")\") === false) {<br \/>\n           $rbit=explode('.', strtolower($outideacol))[-1 + sizeof(explode('.', strtolower($outideacol)))];<br \/>\n           $lbitis=explode('.' . $rbit,  strtolower($outideacol))[0];<br \/>\n           $lpref='';<br \/>\n           if ($rbit == \"\" || (substr(($rbit . ' '),0,1) &gt;= '0'    &&  substr(($rbit . ' '),0,1) &lt;= '9'   )) {<br \/>\n            if ((substr(($lbitis . ''),-1,1) &gt;= '0'    &&  substr(($lbitis . ''),-1,1) &lt;= '9'   )) {<br \/>\n              \/\/echo $outideacol . ' ' . substr(($lbitis . ''),-1,1) . '.' . $rbit . '?' . $lbitis . '!';<br \/>\n              \/\/exit;<br \/>\n              $outideacol=substr($outideacol,0,(strlen($outideacol) - strlen(substr(($lbitis . ''),-1,1) . '.' . $rbit)));<br \/>\n              \/\/echo $outideacol;<br \/>\n              \/\/exit;<br \/>\n              $opacityis=substr(($lbitis . ''),-1,1) . '.' . str_replace('00','0',substr(($rbit . '0'),0));<br \/>\n            } else {<br \/>\n              $outideacol=substr($outideacol,0,(strlen('.' . $rbit)));<br \/>\n              $opacityis='0' . '.' . str_replace('00','0',substr(($rbit . '0'),0));<br \/>\n            }<br \/>\n           }<br \/>\n      }<br \/>\n    }<br \/>\n    return $outideacol;<br \/>\n }<br \/>\n<br \/>\n function ffcolcheck($outideacol) {<br \/>\n    global $opacityis, $fopacityis, $sopacityis;<br \/>\n\/\/              echo ' ' . $fopacityis . ' ' . $sopacityis . ' ' . $opacityis . ' ... ' . $outideacol;<br \/>\n\/\/              exit;<br \/>\n              $awso=$opacityis;<br \/>\n    $fopacityis=$opacityis;<br \/>\n    $inideacol=restcheck($outideacol);<br \/>\n    if ($fopacityis != $opacityis) {  $fopacityis=$opacityis; $opacityis=$waso;  }<br \/>\n\/\/              echo $inideacol . ' ' . $fopacityis . ' ' . $sopacityis . ' ' . $opacityis . ' ... ' . $outideacol;<br \/>\n\/\/              exit;<br \/>\n    if (strlen($inideacol) == 6) {<br \/>\n      if (str_replace('A','',str_replace('a','',str_replace('B','',str_replace('b','',str_replace('C','',str_replace('c','',str_replace('D','',str_replace('d','',str_replace('E','',str_replace('e','',str_replace('F','',str_replace('f','',   str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',      $inideacol))))))))))))))))))))))    == '') {<br \/>\n        if ($fopacityis != '1.0') {<br \/>\n\/\/              echo 'rgba(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ',' . $fopacityis . ')';<br \/>\n\/\/              exit;<br \/>\n         return 'rgba(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ',' . $fopacityis . ')';<br \/>\n        }<br \/>\n        return 'rgb(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ')';<br \/>\n      }<br \/>\n    }<br \/>\n    return $inideacol;<br \/>\n }<br \/>\n<br \/>\n function fcolcheck($outideacol) {<br \/>\n    global $opacityis, $fopacityis, $sopacityis;<br \/>\n\/\/              echo ' ' . $fopacityis . ' ' . $sopacityis . ' ' . $opacityis . ' ... ' . $outideacol;<br \/>\n\/\/              exit;<br \/>\n    $sopacityis=$opacityis;<br \/>\n    $inideacol=restcheck($outideacol);<br \/>\n    if ($sopacityis != $opacityis) {  $fopacityis=$opacityis; $opacityis=$sopacityis;  }<br \/>\n\/\/              echo $inideacol . ' ' . $fopacityis . ' ' . $sopacityis . ' ' . $opacityis . ' ... ' . $outideacol;<br \/>\n\/\/              exit;<br \/>\n    if (strlen($inideacol) == 6) {<br \/>\n      if (str_replace('A','',str_replace('a','',str_replace('B','',str_replace('b','',str_replace('C','',str_replace('c','',str_replace('D','',str_replace('d','',str_replace('E','',str_replace('e','',str_replace('F','',str_replace('f','',   str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',      $inideacol))))))))))))))))))))))    == '') {<br \/>\n        if ($fopacityis != '1.0') {<br \/>\n\/\/              echo 'rgba(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ',' . $fopacityis . ')';<br \/>\n\/\/              exit;<br \/>\n         return 'rgba(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ',' . $fopacityis . ')';<br \/>\n        }<br \/>\n        return 'rgb(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ')';<br \/>\n      }<br \/>\n    }<br \/>\n    return $inideacol;<br \/>\n }<br \/>\n<br \/>\n function colcheck($outideacol) {<br \/>\n    global $opacityis, $fopacityis, $sopacityis;<br \/>\n    if ($opacityis != '1.0' && $sopacityis != $opacityis) { $sopacityis=$opacityis;   }<br \/>\n    $wasop=$opacityis;<br \/>\n    $inideacol=restcheck($outideacol);<br \/>\n    if ($wasop != $opacityis) {  $sopacityis=$opacityis;  }<br \/>\n    if (strlen($inideacol) == 6) {<br \/>\n      if (str_replace('A','',str_replace('a','',str_replace('B','',str_replace('b','',str_replace('C','',str_replace('c','',str_replace('D','',str_replace('d','',str_replace('E','',str_replace('e','',str_replace('F','',str_replace('f','',   str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',      $inideacol))))))))))))))))))))))    == '') {<br \/>\n        if ($sopacityis != '1.0') {<br \/>\n\/\/              echo 'rgba(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ',' . $sopacityis . ')';<br \/>\n\/\/              exit;<br \/>\n         return 'rgba(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ',' . $sopacityis . ')';<br \/>\n        }<br \/>\n        return 'rgb(' . hexdec(substr($inideacol,0,2)) . ',' . hexdec(substr($inideacol,2,2)) . ',' . hexdec(substr($inideacol,4,2)) . ')';<br \/>\n      }<br \/>\n    }<br \/>\n    return $inideacol;<br \/>\n }<br \/>\n <br \/>\nfunction createScaledImage($newWidth,$newHeight,$path,$datauri) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/16774521\/scale-image-using-php-and-maintaining-aspect-ratio<br \/>\n    global $ptitle, $reltopic, $filterstuff, $randstr, $opacityis, $linemode;<br \/>\n    $image_name=explode(DIRECTORY_SEPARATOR, $path)[-1 + sizeof(explode(DIRECTORY_SEPARATOR, $path))];<br \/>\n    $theextis='';<br \/>\n    <br \/>\n    if (($newWidth == 32 && $newHeight == 32) || strpos(('?' . $_SERVER['QUERY_STRING']), '?svg') !== false) {<br \/>\n       $fillc=\"red\";<br \/>\n       $strokec=\"black\";<br \/>\n       if (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false || strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $fillc=\"none\";<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('arc=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('semicircle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;path d=\"M ' . ($newWidth \/ 2) . ' 0 A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 0, ' . ($newWidth \/ 2) . ' ' . $newHeight . ' \" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n        <br \/> <br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'pie=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('pie=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            $thehome=' L ' . ($newWidth \/ 2) . ' ' . ($newHeight \/ 2) . ' Z';<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;circle cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" r=\"' . (($newWidth + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;path d=\"M ' . ($newWidth \/ 2) . ' 0 A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 1, ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 2) . ' ' . $thehome . '\" stroke=\"white\" stroke-width=\"3\" fill=\"white\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n            <br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'circle=') !== false) {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('circle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=fcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;circle cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" r=\"' . (($newWidth + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'ellipse=') !== false) {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('ellipse=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;ellipse cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" rx=\"' . (($newWidth + $newWidth) \/ 4) . '\"  ry=\"' . (($newHeight + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'square=') !== false || strpos($_SERVER['QUERY_STRING'], 'rectangle=') !== false) {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'square=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('square=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'rectangle=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('rectangle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=fcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;rect x=\"0\" y=\"0\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'rhombus=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('rhombus=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;rect x=\"-' . ($newWidth \/ 2) . '\" y=\"-' . ($newHeight \/ 2) . '\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" transform=\"translate(' . ($sbone \/ 2) . ', ' . ($sbone \/ 2) . ') rotate(45)\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'octagon=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('octagon=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=fcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;rect x=\"-' . ($newWidth \/ 2) . '\" y=\"-' . ($newHeight \/ 2) . '\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" transform=\"translate(' . ($newWidth \/ 2) . ', ' . ($newHeight \/ 2) . ') rotate(45)\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'triangle=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('triangle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n  &lt;polygon points=\"' . $newWidth . ',' . $newHeight . ' ' . ($newWidth \/ 2) . ',0 0,' . $newHeight . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'line=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('line=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=fcolcheck($inbw[0]);<br \/>\n                  $strokec=$fillc;<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n  &lt;line x1=\"' . $newWidth . '\" y1=\"' . $newHeight . '\" x2=\"0\" y2=\"0\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'bezier=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('bezier=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            $fillc=\"none\";<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n  &lt;path d=\"M 0 ' . $newHeight . ' q ' . (($newWidth \/ 2) - 0) . ' ' . (0 - $newHeight) . ' ' . ($newWidth - 0) . ' ' . ($newHeight - $newHeight) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n<br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false || strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $fillc=\"none\";<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('arc=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('semicircle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=fcolcheck($inbw[0]);  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;path d=\"M ' . ($newWidth \/ 2) . ' 0 A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 0, ' . ($newWidth \/ 2) . ' ' . $newHeight . ' \" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n            <br \/> <br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false || strpos($_SERVER['QUERY_STRING'], 'crescent=') !== false) {<br \/>\n            $fillc=\"none\";<br \/>\n            $thehome='';<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('quadrant=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'crescent=') !== false) {<br \/>\n            $inbetween=restcheck(str_replace(':',' ',str_replace('`',' ',str_replace(';',' ',str_replace('+',' ',urldecode(explode('crescent=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0]))))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbetween=trim($inbetween);  $inbw=explode(' ', str_replace('  ',' ',str_replace('   ',' ',str_replace('    ',' ',str_replace('    ',' ',$inbetween)))));<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=ffcolcheck($inbw[0]);<br \/>\n                  if (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false) {<br \/>\n                    $thehome=' L ' . ($newWidth \/ 2) . ' ' . ($newHeight \/ 2) . ' Z';<br \/>\n                  }<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') {<br \/>\n                    $fillc=fcolcheck($inbw[0]);<br \/>\n                    if (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false) {<br \/>\n                      $thehome=' L ' . ($newWidth \/ 2) . ' ' . ($newHeight \/ 2) . ' Z';<br \/>\n                    }<br \/>\n                  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=colcheck($inbw[1]);  }<br \/>\n               }<br \/>\n            }<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;path d=\"M 0 ' . ($newHeight \/ 2) . ' A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 1, ' . ($newWidth \/ 2) . ' 0 ' . $thehome . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       }<br \/>\n    }<br \/>\n    <br \/>\n    if (!$datauri) {<br \/>\n      if (isset($_GET['random'])) {<br \/>\n       if (substr(($_GET['random'] . ' '),0,1) == '0') {<br \/>\n        $thist=' ' . time();<br \/>\n        $thistminustwo=substr($thist,0,(strlen($thist) - 2));<br \/>\n        if (!file_exists('.\/rjmlist.htm')) {<br \/>\n          file_put_contents('.\/rjmlist.htm', '&lt;body&gt;&lt;pre&gt;' . \"\\n\" . $thist . '|' . $_GET['random'] . '|' . $ptitle . \"\\n&lt;\/pre&gt;&lt;\/body&gt;\");<br \/>\n        } else {<br \/>\n          $sofarc=file_get_contents('.\/rjmlist.htm');<br \/>\n          $newones=explode($thistminustwo, $sofarc);<br \/>\n          $lastiis=0;<br \/>\n          if (strpos($sofarc, ' ') !== false) { $lastiis=explode('|',explode(' ', $sofarc)[1])[0];  }<br \/>\n          if (sizeof($newones) == 1 && (time() - $lastiis) &gt; 100) {<br \/>\n          file_put_contents('.\/rjmlist.htm', '&lt;body&gt;&lt;pre&gt;' . \"\\n\" . $thist . '|' . $_GET['random'] . '|' . $ptitle . \"\\n&lt;\/pre&gt;&lt;\/body&gt;\");<br \/>\n          } else {<br \/>\n          $sofarcs=explode('|' . $_GET['random'] . '|', $sofarc);<br \/>\n          if (sizeof($sofarcs) &gt; 1) {<br \/>\n            $sofarpref=' ' . explode(' ', $sofarcs[0])[-1 + sizeof(explode(' ', $sofarcs[0]))] . '|' . $_GET['random'] . '|' . explode(\"\\n\", $sofarcs[1])[0] . \"\\n\";<br \/>\n            $sofarc=str_replace($sofarpref, \"\", $sofarc);<br \/>\n          }<br \/>\n          file_put_contents('.\/rjmlist.htm', '&lt;body&gt;&lt;pre&gt;' . \"\\n\" . $thist . '|' . $_GET['random'] . '|' . $ptitle . \"\\n\" . str_replace('&lt;body&gt;&lt;pre&gt;' . \"\\n\", '', $sofarc));<br \/>\n          }<br \/>\n        }<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    <br \/>\n    $mime = getimagesize($path);<br \/>\n<br \/>\n    if ($mime['mime']=='image\/png') {<br \/>\n        if ($filterstuff != '') {<br \/>\n            header('Content-Type: image\/png');<br \/>\n            echo ourimagecreatefromcontent(file_get_contents($path), 'png');<br \/>\n      exit;<br \/>\n        }<br \/>\n        $src_img = imagecreatefrompng($path);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/jpg' || $mime['mime']=='image\/jpeg' || $mime['mime']=='image\/pjpeg') {<br \/>\n        if ($filterstuff != '') {<br \/>\n            header('Content-Type: image\/jpeg');<br \/>\n            echo ourimagecreatefromcontent(file_get_contents($path), 'jpeg');<br \/>\n      exit;<br \/>\n        }<br \/>\n        $src_img = imagecreatefromjpeg($path);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/gif') {<br \/>\n      \/\/echo 'data:image\/gif;base64,' . base64_encode(file_get_contents($path));<br \/>\n            header('Content-Type: image\/gif');<br \/>\n            echo ourimagecreatefromcontent(file_get_contents($path), 'gif');<br \/>\n      exit;<br \/>\n        $src_img = imagecreatefromgif($path);<br \/>\n    }<br \/>\n<br \/>\n    $old_x          =   imageSX($src_img);<br \/>\n    $old_y          =   imageSY($src_img);<br \/>\n<br \/>\n    if ($old_x &gt; $old_y) {<br \/>\n        $thumb_w    =   $newWidth;<br \/>\n        $thumb_h    =   $old_y\/$old_x*$newWidth;<br \/>\n    }<br \/>\n<br \/>\n    if ($old_x &lt; $old_y) {<br \/>\n        $thumb_w    =   $old_x\/$old_y*$newHeight;<br \/>\n        $thumb_h    =   $newHeight;<br \/>\n    }<br \/>\n<br \/>\n    if ($old_x == $old_y) {<br \/>\n        $thumb_w    =   $newWidth;<br \/>\n        $thumb_h    =   $newHeight;<br \/>\n    }<br \/>\n    <br \/>\n    $dst_img        =   imagecreatetruecolor($thumb_w,$thumb_h);<br \/>\n<br \/>\n    imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);<br \/>\n<br \/>\n    \/\/ New save location<br \/>\n    $new_thumb_loc = '\/tmp\/' . $image_name;<br \/>\n<br \/>\n    if (!$datauri) {<br \/>\n    if($mime['mime']=='image\/png') {<br \/>\n        $theextis='png';<br \/>\n      header('Content-Type: image\/png');<br \/>\n      imagepng($dst_img); \/\/,$new_thumb_loc,8);<br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n      exit;<br \/>\n    } else if ($mime['mime']=='image\/jpg' || $mime['mime']=='image\/jpeg' || $mime['mime']=='image\/pjpeg') {<br \/>\n        $theextis='jpeg';<br \/>\n      header('Content-Type: image\/jpeg');<br \/>\n      imagejpeg($dst_img); \/\/,$new_thumb_loc,80);<br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n      exit;<br \/>\n    } else if ($mime['mime']=='image\/gif') {<br \/>\n        $theextis='gif';<br \/>\n      header('Content-Type: image\/gif');<br \/>\n      imagegif($dst_img); \/\/,$new_thumb_loc,80);<br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n      exit;<br \/>\n    }<br \/>\n    exit;<br \/>\n    }<br \/>\n<br \/>\n    $result=\"\";<br \/>\n    if ($mime['mime']=='image\/png') {<br \/>\n        $theextis='png';<br \/>\n        imagepng($dst_img,$new_thumb_loc,8);<br \/>\n        $result = file_get_contents($new_thumb_loc);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/jpg' || $mime['mime']=='image\/jpeg' || $mime['mime']=='image\/pjpeg') {<br \/>\n        $theextis='jpeg';<br \/>\n        imagejpeg($dst_img,$new_thumb_loc,80);<br \/>\n        $result = file_get_contents($new_thumb_loc);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/gif') {<br \/>\n        $theextis='gif';<br \/>\n        imagegif($dst_img,$new_thumb_loc);<br \/>\n        $result = file_get_contents($new_thumb_loc);<br \/>\n    }<br \/>\n<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n    <br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n<br \/>\n    return ourimagecreatefromcontent($result, $theextis);<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-dimensions-and-colour-tutorial\/'>SVG Shapes Dimensions and Colour Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svgsgpt'>Previous relevant <a target=_blank title='SVG Shapes Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-game-primer-tutorial\/'>SVG Shapes Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG Shapes Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.jpg\" title=\"SVG Shapes Game Primer Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG Shapes Game Primer Tutorial<\/p><\/div>\n<p>Although we do not mention it in today&#8217;s blog posting title, today&#8217;s work primarily hinges on some changes we made to our <a target=_blank title='WordPress blog' href='\/\/wordpress.org'>WordPress<\/a> Blog <font size=1>(you are reading)<\/font> <i>404.php<\/i> logic, further to the last foray into WordPress TwentyTen theme&#8217;s 404.php means by which unsuccessful <i>ht<font color=black>tp<\/font>:\/\/www.rjmprogramming.com.au\/ITblog\/<\/i> prefixing URLs get processed, as we talked about with <a title='Interactively Change WordPress Blog Background Image on Scroll Tutorial' href='#icwpbbist'>Interactively Change WordPress Blog Background Image on Scroll Tutorial<\/a>.<\/p>\n<p>We&#8217;ve opened up a new segment of functionality here, allowing the user to receive SVG (via svg+xml protocol) image based data for a URL such as &#8230;<\/p>\n<p><code id=codesa title='00'><br \/>\n<a id=mysa target=_blank onmouseover=\"document.getElementById('mysimif').style.display='block';\" onclick=\"document.getElementById('mysimif').style.display='block';\" href='\/\/www.rjmprogramming.com.au\/ITblog\/620\/350\/?svgbluerectangle=y'><font color=black>ht<\/font><font color=black>tp<\/font>:\/\/www.rjmprogramming.com.au\/ITblog\/620\/350\/?svgbluerectangle=y<\/a><br \/>\n<\/code><\/p>\n<p><iframe id=mysimif onload=\"if (document.getElementById('codesa').title == '00') { document.getElementById('codesa').title='0'; setInterval(function(){ var bcols=['bluerectangle','darkorangeellipse','greenline','purplequadrant','magentatriangle','cyanrectangle','oliveellipse','grayline','silversemicircle','pinktriangle','browncircle','cyanarc']; var wasn=eval('' + document.getElementById('codesa').title.split(' ')[0]); var isn=eval(eval(1 + wasn) % eval('' + bcols.length)); document.getElementById('codesa').title='' + isn; document.getElementById('mysimif').src=document.getElementById('mysimif').src.replace('' + bcols[wasn],'' + bcols[isn]);  document.getElementById('mysa').href=document.getElementById('mysa').href.replace('' + bcols[wasn],'' + bcols[isn]); document.getElementById('mysa').innerHTML=document.getElementById('mysa').innerHTML.replace('' + bcols[wasn],'' + bcols[isn]);  },13000); }\" style='display:none;width:620px;height:350px;' id=mysimif src='\/\/www.rjmprogramming.com.au\/ITblog\/620\/350\/?svgbluerectangle=y'><\/iframe><\/p>\n<p>As you probably know, SVG is a boon to people trying to explain geometry or shapes, as with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html_GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\">Show Some Shapes<\/a> web application you can also try below &#8230;<\/p>\n<p><iframe id=ifss style=\"width:100%;height:800px;\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/show_some_shapes.html\"><\/iframe><\/p>\n<p> &#8230; which beggars the question &#8230;<\/p>\n<blockquote><p>\nWhat does the changed 404.php PHP code look like?\n<\/p><\/blockquote>\n<p>Glad you asked!<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    if (($newWidth == 32 && $newHeight == 32) || strpos(('?' . $_SERVER['QUERY_STRING']), '?svg') !== false) {<br \/>\n       $fillc=\"red\";<br \/>\n       $strokec=\"black\";<br \/>\n       if (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false || strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $fillc=\"none\";<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('arc=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('semicircle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;path d=\"M ' . ($newWidth \/ 2) . ' 0 A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 0, ' . ($newWidth \/ 2) . ' ' . $newHeight . ' \" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n<br \/> <br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'pie=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('pie=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            $thehome=' L ' . ($newWidth \/ 2) . ' ' . ($newHeight \/ 2) . ' Z';<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;circle cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" r=\"' . (($newWidth + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;path d=\"M ' . ($newWidth \/ 2) . ' 0 A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 1, ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 2) . ' ' . $thehome . '\" stroke=\"white\" stroke-width=\"3\" fill=\"white\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n    <br \/> <br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'circle=') !== false) {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('circle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;circle cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" r=\"' . (($newWidth + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'ellipse=') !== false) {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('ellipse=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;ellipse cx=\"' . ($newWidth \/ 2) . '\" cy=\"' . ($newHeight \/ 2) . '\" rx=\"' . (($newWidth + $newWidth) \/ 4) . '\"  ry=\"' . (($newHeight + $newHeight) \/ 4) . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'square=') !== false || strpos($_SERVER['QUERY_STRING'], 'rectangle=') !== false) {<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'square=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('square=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'rectangle=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('rectangle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;rect x=\"0\" y=\"0\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'rhombus=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('rhombus=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;rect x=\"-' . ($newWidth \/ 2) . '\" y=\"-' . ($newHeight \/ 2) . '\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" transform=\"translate(' . ($sbone \/ 2) . ', ' . ($sbone \/ 2) . ') rotate(45)\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'octagon=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('octagon=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;rect x=\"-' . ($newWidth \/ 2) . '\" y=\"-' . ($newHeight \/ 2) . '\" width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" transform=\"translate(' . ($newWidth \/ 2) . ', ' . ($newHeight \/ 2) . ') rotate(45)\"\/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'triangle=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('triangle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n  &lt;polygon points=\"' . $newWidth . ',' . $newHeight . ' ' . ($newWidth \/ 2) . ',0 0,' . $newHeight . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'line=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('line=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n  &lt;line x1=\"' . $newWidth . '\" y1=\"' . $newHeight . '\" x2=\"0\" y2=\"0\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       } else if  (strpos($_SERVER['QUERY_STRING'], 'bezier=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('bezier=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            $fillc=\"none\";<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            $bone=$newWidth;<br \/>\n            if ($newHeight &gt; $bone) { $bone=$newHeight; }<br \/>\n            $sbone=sqrt($bone * $bone * 2);<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" viewbox=\"0 0 ' . ($newWidth \/ 1) . ' ' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n  &lt;path d=\"M 0 ' . $newHeight . ' q ' . (($newWidth \/ 2) - 0) . ' ' . (0 - $newHeight) . ' ' . ($newWidth - 0) . ' ' . ($newHeight - $newHeight) . '\" stroke-width=\"2\" stroke=\"' . $strokec . '\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n<br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false || strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $fillc=\"none\";<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'arc=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('arc=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'semicircle=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('semicircle=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') { $fillc=$inbw[0];  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;path d=\"M ' . ($newWidth \/ 2) . ' 0 A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 0, ' . ($newWidth \/ 2) . ' ' . $newHeight . ' \" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n            <br \/> <br \/>\n       } else if (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false || strpos($_SERVER['QUERY_STRING'], 'crescent=') !== false) {<br \/>\n            $fillc=\"none\";<br \/>\n            $thehome='';<br \/>\n            if  (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('quadrant=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            } else if  (strpos($_SERVER['QUERY_STRING'], 'crescent=') !== false) {<br \/>\n            $inbetween=str_replace(':',',',str_replace('.',',',str_replace(' ',',',str_replace('+',',',urldecode(explode('crescent=', str_replace('?svg','',str_replace('??svg','',('?' . $_SERVER['QUERY_STRING']))))[0])))));<br \/>\n            }<br \/>\n            if ($inbetween != '') {<br \/>\n               $inbw=explode(',', $inbetween);<br \/>\n               if (sizeof($inbw) == 1) {<br \/>\n                  $fillc=$inbw[0];<br \/>\n                  if (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false) {<br \/>\n                    $thehome=' L ' . ($newWidth \/ 2) . ' ' . ($newHeight \/ 2) . ' Z';<br \/>\n                  }<br \/>\n               } else if (sizeof($inbw) &gt;= 2) {<br \/>\n                  if (trim($inbw[0]) != '') {<br \/>\n                    $fillc=$inbw[0];<br \/>\n                    if (strpos($_SERVER['QUERY_STRING'], 'quadrant=') !== false) {<br \/>\n                      $thehome=' L ' . ($newWidth \/ 2) . ' ' . ($newHeight \/ 2) . ' Z';<br \/>\n                    }<br \/>\n                  }<br \/>\n                  if (trim($inbw[1]) != '') { $strokec=$inbw[1];  }<br \/>\n               }<br \/>\n            }<br \/>\n            header('Content-Type: image\/svg+xml');<br \/>\n            echo '&lt;?xml version=\"1.0\" standalone=\"no\"?&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"<br \/>\n\"ht<font color=black>tp<\/font>:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;svg width=\"' . ($newWidth \/ 1) . '\" height=\"' . ($newHeight \/ 1) . '\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;path d=\"M 0 ' . ($newHeight \/ 2) . ' A ' . (($newWidth + $newWidth) \/ 4) . ' ' . (($newHeight + $newHeight) \/ 4) . ', 0, 0, 1, ' . ($newWidth \/ 2) . ' 0 ' . $thehome . '\" stroke=\"' . $strokec . '\" stroke-width=\"2\" fill=\"' . $fillc . '\" \/&gt;<br \/>\n&lt;\/svg&gt;';<br \/>\n            exit;<br \/>\n       }<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-game-primer-tutorial\/'>SVG Shapes Game Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icwpbbist'>Previous relevant <a target=_blank title='Interactively Change WordPress Blog Background Image on Scroll Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-wordpress-blog-background-image-on-scroll-tutorial\/'>Interactively Change WordPress Blog Background Image on Scroll Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interactively Change WordPress Blog Background Image on Scroll Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll_wp.jpg\" title=\"Interactively Change WordPress Blog Background Image on Scroll Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Interactively Change WordPress Blog Background Image on Scroll Tutorial<\/p><\/div>\n<p>With yesterday&#8217;s <a title='Interactively Change Background Image on Scroll User Settings Tutorial' href='#icbisust'>Interactively Change Background Image on Scroll User Settings Tutorial<\/a>&#8216;s offering were you &#8220;an intrepid&#8221;, typing &#8230;<\/p>\n<blockquote><p>\n<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/600\/400\/\">\/\/www.rjmprogramming.com.au\/ITblog\/600\/400\/<\/a>\n<\/p><\/blockquote>\n<p> &#8230; into that newly minted Javascript prompt window designed for user interaction purposes? This populates the background images in our new Image Scrolling with Fixed Text web application with a random selection from the WordPress Blog you are reading.  Because we have some control here, we researched whether our WordPress <a target=_blank title='WordPress Blogs tagged 404.php' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/404.php'>404.php<\/a> logic could be tweaked to help out more in this scenario.  The way the PHP works here, detecting this situation, at the end of its workings, is to use an image header (exemplified by the GIF one below) &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n            header('Content-Type: image\/gif');<br \/>\n            echo file_get_contents($path);<br \/>\n            exit;<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; where $path would point at a GIF image file residing on the RJM Programming domain web server.   This design restricts us from any <i>echo<\/i> functionality before this, so what can we achieve?  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone? Anyone?<\/a> Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Rasmus_Lerdorf'>Rasmus<\/a>, we can write to other web server files that could be like middle-people between the server (supplier of image data) and client (the webpage that called the server).   After the server work &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n      if (strpos(('' . str_replace(');%20}','',$_SERVER['QUERY_STRING']) . '~'), '591734~') !== false) {<br \/>\n          \/\/file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'p.p','here');<br \/>\n          $prevcontis='';<br \/>\n          $ptfileis=$_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'ptitledata.html';<br \/>\n          if (file_exists($ptfileis)) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/67707029\/how-do-i-get-how-long-the-file-was-created-in-seconds-in-php<br \/>\n            $modifdate = filemtime($ptfileis);<br \/>\n            $secondsago = time() - $modifdate;<br \/>\n            if ($secondsago &gt; 5) {<br \/>\n              unlink($ptfileis);<br \/>\n            } else {<br \/>\n              $prevcontis=file_get_contents($ptfileis);<br \/>\n            }<br \/>\n          }<br \/>\n          file_put_contents($ptfileis, $prevcontis . \"\\n\" . $ptitle . '?' . str_replace(');%20}','',$_SERVER['QUERY_STRING']));<br \/>\n          \/\/file_put_contents($ptfileis . \"huh\", $prevcontis . \"\\n\" . $ptitle . '?' . str_replace(');%20}','',$_SERVER['QUERY_STRING']));<br \/>\n      \/\/} else {<br \/>\n      \/\/    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'p.q',('' . str_replace(');%20}','',$_SERVER['QUERY_STRING']) . '~'));<br \/>\n      }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; back at that client (which called the server with that appended &#8220;591734&#8221; placed onto the URL to indicate the intention to want to examine this return data), we have Ajax based Javascript logic &#8230;<\/p>\n<p><code><br \/>\n  var ptc='#';<br \/>\n  var iptc=0;<br \/>\n  var btlist=[];<br \/>\n  var vsbtlist=[];<br \/>\n  var omo='';<br \/>\n<br \/>\n  var zhr=null;<br \/>\n  var zform=null;<br \/>\n  var rawhtml='';<br \/>\n  <br \/>\n  function defmaybe(inu) {<br \/>\n    var retomo=omo;<br \/>\n    if (omo != '') {<br \/>\n      omo='';<br \/>\n      return retomo;<br \/>\n    }<br \/>\n    return inu;<br \/>\n  }<br \/>\n<br \/>\n  function stateChanged() {<br \/>\n   var inm=1, jnm=1, thebtitle='';<br \/>\n   if (zhr.readyState == 4) {<br \/>\n   if (zhr.status == 200) {<br \/>\n   rawhtml = zhr.response;<br \/>\n   console.log('rawhtml=' + rawhtml);<br \/>\n   if (rawhtml.indexOf('random=') != -1 && vsbtlist.length &gt; 0) {<br \/>\n     var rawrs=rawhtml.split('random=');<br \/>\n     for (inm=1; inm&lt;rawrs.length; inm++) {<br \/>\n      for (jnm=0; jnm&lt;vsbtlist.length; jnm++) {<br \/>\n        if (vsbtlist[jnm].indexOf('?random=' + rawrs[inm].split(String.fromCharCode(10))[0]) != -1) {<br \/>\n          console.log('found ...');<br \/>\n          thebtitle=rawhtml.split('?random=' + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10))[eval(-1 + rawhtml.split('?random=' + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10)).length)];<br \/>\n          console.log(thebtitle);<br \/>\n          document.getElementById(vsbtlist[jnm].split('?')[0]).title=thebtitle + ' ... you can right click to navigate there';<br \/>\n          document.getElementById(vsbtlist[jnm].split('?')[0]).onmouseout=function(){ omo=''; };<br \/>\n          document.getElementById(vsbtlist[jnm].split('?')[0]).onmouseover=function(){ omo='\/\/www.rjmprogramming.com.au\/ITblog\/' + thebtitle.split(' (')[0].toLowerCase().replace(\/\\ \/g,'-'); };<br \/>\n          document.getElementById(vsbtlist[jnm].split('?')[0]).oncontextmenu=function(){ window.open(defmaybe('\/\/www.rjmprogramming.com.au\/ITblog\/' + thebtitle.split(' (')[0].toLowerCase().replace(\/\\ \/g,'-')),'_blank','top=50,left=50,width=800,height=800'); };<br \/>\n        }<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n  }<br \/>\n<br \/>\n  function ajaxit() {<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zhr.onreadystatechange=stateChanged;<br \/>\n   zhr.open('get', '\/\/www.rjmprogramming.com.au\/ptitledata.html?random=' + Math.floor(Math.random() * 196756453), true);<br \/>\n   zhr.send(null);<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; adding <i>oncontextmenu<\/i> (ie. right click) functionality to the background images, so as a popup window can open to show the associated WordPress Blog posting linked to the image data.<\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html--GETME\">today&#8217;s changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html--GETME\">interactively_change_background_image_on_scroll.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\">web application<\/a> you can <a href='#myicbios'>also try way below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-wordpress-blog-background-image-on-scroll-tutorial\/'>Interactively Change WordPress Blog Background Image on Scroll Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icbisust'>Previous relevant <a target=_blank title='Interactively Change Background Image on Scroll User Settings Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-user-settings-tutorial\/'>Interactively Change Background Image on Scroll User Settings Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interactively Change Background Image on Scroll User Settings Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll_more.jpg\" title=\"Interactively Change Background Image on Scroll User Settings Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Interactively Change Background Image on Scroll User Settings Tutorial<\/p><\/div>\n<p>If you are a regular reader, you&#8217;ll know with the web applications presented here, we usually try to allow the user to control &#8230;<\/p>\n<ul>\n<li>how they function &#8230; and\/or sometimes &#8230;<\/li>\n<li>how they look<\/li>\n<\/ul>\n<p> &#8230; in the ephemeral &#8220;this session&#8221; sense, and sometimes follow that up, depending, with recallable settings often calling on window.localStorage or HTTP Cookies, associated with the web browser being used.<\/p>\n<p>Regarding that <i>ephemeral &#8220;this session&#8221; sense<\/i> above, building on the work of yesterday&#8217;s <a title='Interactively Change Background Image on Scroll Tutorial' href='#icbist'>Interactively Change Background Image on Scroll Tutorial<\/a>, we now allow the user control over defining any\/all &#8230;<\/p>\n<ul>\n<li>Background Image source URL<\/li>\n<li>Refresh delay (in seconds)<\/li>\n<li>Text Wording<\/li>\n<li>Text Background Image source URL<\/li>\n<\/ul>\n<p> &#8230; and regarding the use of that last one, we&#8217;ve decided, somewhat, to take over with the CSS regarding the Text Wording showing through amongst so many &#8220;image interests&#8221; with various opacities &#8230;<\/p>\n<p><code><br \/>\n  var mode='dw';<br \/>\n  <br \/>\n  function preask() {<br \/>\n   if (backimg.trim() != '') {<br \/>\n    if (backimg.toLowerCase().replace(\/\\ \/g,'') == 'lorempicsum') {<br \/>\n       backimg='\/\/picsum.photos\/600\/400' + suffix + '?random=' + Math.floor(Math.random() * 198765643);<br \/>\n       if (mode == 'dw') {<br \/>\n       mode='';<br \/>\n       document.write('&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;');<br \/>\n       } else {<br \/>\n       document.getElementById('dstyle').innerHTML+='&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;';<br \/>\n       }<br \/>\n       backimg='lorempicsum';<br \/>\n    } else {<br \/>\n       if (mode == 'dw') {<br \/>\n       mode='';<br \/>\n       document.write('&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;');<br \/>\n       } else {<br \/>\n       document.getElementById('dstyle').innerHTML+='&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;';<br \/>\n       }<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Which beggars the observation &#8230;<\/p>\n<blockquote><p>\nIsn&#8217;t the CSS <a target=_blank title='CSS text-shadow information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_text-shadow.php'>text-shadow<\/a> property just great?!\n<\/p><\/blockquote>\n<p>We use it more and more often to help out foreground text presented with a lot of &#8220;overlay imagery&#8221; going on behind it.<\/p>\n<p>Here is the Javascript prompt window &#8220;blurb&#8221; presented to the user should they want to delve into this woooooorrrrrlllllldddd just by clicking or touching in the non-text part of the webpage &#8230;<\/p>\n<blockquote><p>\n      <font size=1>var ansis=prompt(&#8216;<\/font>Optionally enter in background source URL prefix [&#8216; + prefix + midbit + suffix + &#8216;] ( or type Lorem Picsum or for blog posting images you could try \/\/www.rjmprogramming.com.au\/ITblog\/&#8217; + sixhundred + &#8216;\/&#8217; + fourhundred + &#8216;\/ ), hashtag delimited from an optional imagery refresh rate in seconds [&#8216; + ten + &#8216;], hashtag delimited from an optional Text element background image (or type Lorem Picsum), hashtag delimited from optional Text wording [&#8216; + tcont + &#8216;] we will assume involves a space.<font size=1>&#8216;, &#8221;);<\/font>\n<\/p><\/blockquote>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html-GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html-GETME\">interactively_change_background_image_on_scroll.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\">web application<\/a> you can <a href='#myicbios'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-user-settings-tutorial\/'>Interactively Change Background Image on Scroll User Settings Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icbist'>Previous relevant <a target=_blank title='Interactively Change Background Image on Scroll Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-tutorial\/'>Interactively Change Background Image on Scroll Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interactively Change Background Image on Scroll Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.gif\" title=\"Interactively Change Background Image on Scroll Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Interactively Change Background Image on Scroll Tutorial<\/p><\/div>\n<p>Regarding today&#8217;s &#8220;Interactively Change Background Image on Scroll&#8221; topic, we&#8217;d like to thank, profusely, two sources &#8230;<\/p>\n<ul>\n<li>Ideas and Initial Code &#8230; <a target=_blank href='https:\/\/www.w3schools.com\/'>W3School<\/a>&#8216;s <a target=_blank href='https:\/\/www.w3schools.com\/howto\/howto_css_bg_change_scroll.asp' title='How TO - Change Background on Scroll'>How TO &#8211; Change Background on Scroll<\/a><\/li>\n<li>Background Image Content &#8230; <a target=_blank href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a><\/li>\n<\/ul>\n<p>Queue &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=yTapoA5RQyo'>Lulu<\/a> <font size=1>(no, not <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/Android\/NalaLuna.jpg'>the dog<\/a>, this time)<\/font>!<\/p>\n<p>Yes, we&#8217;ve just added &#8220;Interactively&#8221;, we hear you say <font size=1>(just maybe, perhaps, a tad sarcastically, shall we say &#8230; huh?!!!!)<\/font>.  But, it&#8217;s the &#8230;<\/p>\n<ul>\n<li><i><a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable=true<\/a><\/i> HTML div <font size=1>(not new by itself &#8230; but combined with)<\/font> &#8230;<\/li>\n<li>text length calculator logic (using an HTML canvas element&#8217;s <a target=_blank title='Canvas measureText information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/canvas_measuretext.asp'>measureText<\/a> functionality), thanks to <a target=_blank href='https:\/\/stackoverflow.com\/questions\/31305071\/measuring-text-width-height-without-rendering' title='https:\/\/stackoverflow.com\/questions\/31305071\/measuring-text-width-height-without-rendering'>https:\/\/stackoverflow.com\/questions\/31305071\/measuring-text-width-height-without-rendering<\/a> &#8230; calling on &#8230;<\/li>\n<li><a target=_blank title='HTML onkeydown event information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/event_onkeydown.asp'><i>onkeydown<\/i><\/a> logic &#8230; to be a bit savvy regarding the text element width (along with use of <a target=_blank title='Javascropt DOM innerText information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/prop_node_innertext.asp'>innerText<\/a> and the <a target=_blank title='HTML onblur event information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/event_onblur.asp'><i>onblur<\/i><\/a> event logic backup)<\/li>\n<\/ul>\n<p> &#8230; that is all a bit new, at least to us, today, continuing on the recent wonder regarding <i>contenteditable=true<\/i>, mentioned in the recent <a target=_blank title='Animated GIF SVG Quiz Automation Interaction Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-quiz-automation-interaction-tutorial\/'>Animated GIF SVG Quiz Automation Interaction Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-quiz-automation-interaction-tutorial\/'><p>\nAnd did you know, at least for non-mobile platforms, you can set the focus (on non-mobile platforms only, as there are the \u201ckeyboard getting in the way\u201d issues we\u2019re thankful for with mobile platforms which preclude any thoughts of a programmed [element].focus() operation) to one of these \u201ccontenteditable=true style elements\u201d? We\u2019d never been sure, only focussing to HTML input textboxes and textareas up to now, we believe.\n<\/p><\/blockquote>\n<p> &#8230; whereby non-mobile focus to a contenteditable=true HTML div type (innerHTML style) element is possible, adding to the original W3School&#8217;s content ideas swirling around &#8230;<\/p>\n<ul>\n<li>CSS position: fixed; &#8230; for foreground text, in relation to &#8230;<\/li>\n<li>scrolling &#8230; with &#8230;<\/li>\n<li>background image<sub>ry<\/sub><\/li>\n<\/ul>\n<p> &#8230; for topics we hope you find as interesting as we did, in our new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html_GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=myicbios style=\"width:100%;height:900px;\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\"><\/iframe> <\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60859' onclick='var dv=document.getElementById(\"d60859\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/fixed\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60859' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60876' onclick='var dv=document.getElementById(\"d60876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text-shadow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60876' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60879' onclick='var dv=document.getElementById(\"d60879\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60879' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61171' onclick='var dv=document.getElementById(\"d61171\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61171' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61198' onclick='var dv=document.getElementById(\"d61198\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/input\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61198' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61203' onclick='var dv=document.getElementById(\"d61203\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61203' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61221' onclick='var dv=document.getElementById(\"d61221\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/annotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61221' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61238' onclick='var dv=document.getElementById(\"d61238\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61238' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61256' onclick='var dv=document.getElementById(\"d61256\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61256' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61262' onclick='var dv=document.getElementById(\"d61262\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61262' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61269' onclick='var dv=document.getElementById(\"d61269\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61269' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61282' onclick='var dv=document.getElementById(\"d61282\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/commentary\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61282' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61295' onclick='var dv=document.getElementById(\"d61295\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/collaboration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61295' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61339' onclick='var dv=document.getElementById(\"d61339\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/units\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61339' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61373' onclick='var dv=document.getElementById(\"d61373\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-inspector\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61373' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61444' onclick='var dv=document.getElementById(\"d61444\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/crontab\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61444' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s the day further to the recent SVG Shapes Iframe Srcdoc Double Quote Tutorial&#8216;s &#8230; Will we be leaving our SVG Show Some Shapes project with a blog posting titled, weirdly, &#8220;SVG Shapes Iframe Srcdoc Double Quote Tutorial&#8221;? Who&#8217;s to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/svg-shapes-collaboration-tidy-up-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,14,29,37],"tags":[3849,2824,2419,84,3456,1832,4528,85,112,3286,113,4177,4538,151,1604,4486,224,228,4033,1709,3136,2014,272,274,290,1654,297,2444,2276,4508,2365,3186,1833,367,1549,3039,380,385,4532,1929,4077,3951,3330,431,435,4514,452,484,3362,2258,576,577,590,609,652,4227,677,2598,4509,752,3004,760,3861,830,1712,876,2563,894,2255,932,1988,970,997,1040,1043,1053,1991,1071,1072,1893,1105,1111,1866,1572,1586,1133,1137,1138,1159,2398,2506,2902,3331,2615,1226,4511,4510,4513,4331,4530,3889,4443,1254,1675,3945,4196,2167,1298,1299,2996,1319,2231,1899,1345,1369,4529,4531,2099,1411,2257,1456,3276,3098,4512,1480,1496],"class_list":["post-61444","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-operating-system","category-tutorials","tag-404-php","tag-absolute","tag-aesthetics","tag-animation-2","tag-annotate","tag-annotation","tag-annoyance","tag-apache","tag-attribute","tag-attrribute-selector","tag-audio","tag-backslash","tag-backslash-escaping","tag-blog","tag-collaboration","tag-color-picker","tag-colour","tag-colour-picker","tag-commentary","tag-communication","tag-conduit","tag-content-management-system","tag-cron","tag-crontab","tag-data","tag-data-uri","tag-data-url","tag-delete","tag-delimitation","tag-depth","tag-dimensions","tag-double-quote","tag-drop-shadow","tag-dropdown","tag-element","tag-elevation","tag-email","tag-emoji","tag-entities","tag-error","tag-error-404","tag-escape","tag-fill","tag-filter","tag-find","tag-foreignobject","tag-form","tag-geometry","tag-hardcoding","tag-height","tag-html","tag-html-entities","tag-image","tag-input","tag-javascript","tag-korn","tag-korn-shell","tag-line","tag-linear","tag-mathematics","tag-maths","tag-media","tag-mode","tag-navigation","tag-onsubmit","tag-opacity","tag-origin","tag-overlay","tag-percentage","tag-php","tag-position","tag-post","tag-programming","tag-regex","tag-regular-expression","tag-replace","tag-responsive-design","tag-rotate","tag-rotation","tag-schedule","tag-script","tag-search-engine","tag-select","tag-shadow","tag-shape","tag-share","tag-sharing","tag-shell","tag-sms","tag-speech-bubble","tag-src","tag-srcdoc","tag-stroke","tag-superimposition","tag-svg","tag-svg-animation","tag-svg-filter","tag-svg-image","tag-svg-text","tag-svg-viewbox","tag-svgxml","tag-temporary","tag-text","tag-textbox","tag-tidy","tag-tidy-up","tag-title","tag-transform","tag-transformation","tag-transparent","tag-tutorial","tag-uniquifier","tag-units","tag-url","tag-video","tag-viewbox","tag-viewbox-attribute","tag-web-inspector","tag-web-server","tag-width","tag-wordpress","tag-wordpress-blog","tag-wrapper","tag-wrapper-function","tag-xml","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61444"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=61444"}],"version-history":[{"count":20,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61444\/revisions"}],"predecessor-version":[{"id":61494,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61444\/revisions\/61494"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=61444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=61444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=61444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}