{"id":43013,"date":"2019-01-16T03:01:56","date_gmt":"2019-01-15T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43013"},"modified":"2019-01-18T19:24:51","modified_gmt":"2019-01-18T09:24:51","slug":"phpjavascript-svg-text-and-group-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-svg-text-and-group-tutorial\/","title":{"rendered":"PHP\/Javascript SVG Text and Group Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/Javascript SVG Text and Group Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/textandgroup.jpg\" title=\"PHP\/Javascript SVG Text and Group Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript SVG Text and Group Tutorial<\/p><\/div>\n<p>It&#8217;s well overdue for us to revisit <a target=_blank title='Excellent SVG tutorials, thanks' href='HTTP:\/\/tutorials.jenkov.com\/svg\/'>SVG<\/a> (Scalable Vector Graphics) &#8230;<\/p>\n<blockquote cite='HTTP:\/\/tutorials.jenkov.com\/svg\/'><p>\nSVG is short for Scalable Vector Graphics. It is a graphic format in which the shapes are specified in XML. The XML is then rendered by an SVG viewer. Today most web browser can display SVG just like they can display PNG, GIF, and JPG.\n<\/p><\/blockquote>\n<p> &#8230; issues last talked about, for us, with <a title='PHP\/Javascript SVG YUI Geometry Tracing Tutorial' href='#php\/jsvgyuigtt'>PHP\/Javascript SVG YUI Geometry Tracing Tutorial<\/a> some time ago.<\/p>\n<p>We first became aware of SVG &#8220;Groups&#8221; by examining the innards of <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> charts.  Many of this great series of online chart functionalities by Google use the SVG <a target=_blank title='Excellent SVG tutorials, thanks' href='HTTP:\/\/tutorials.jenkov.com\/svg\/g-element.html'>g<\/a> elements as a means by which you can conglomerate other SVG graphical bits and pieces into another graphical entity, shall we say, that can have a <a target=_blank title='SVG transformation information' href='HTTP:\/\/tutorials.jenkov.com\/svg\/svg-transformation.html'>transformation<\/a> applied to it (as a whole), if you like, and we like today, allowing for a very rudimentary <a target=_blank title='SVG transformation rotation information' href='HTTP:\/\/tutorials.jenkov.com\/svg\/svg-transformation.html#rotate'>rotation<\/a> option.   All this happened via a newly introduced button labelled &#8220;Group and draw shape(s) above&#8221;.  Cute, huh?!  And a bit <strike>oh, oh<\/strike> O.O.<i>ish<\/i>, as in another approach \u00e0 la &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Overlay blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a><i>ish<\/i> &#8230; and &#8230;<\/li>\n<li><a target=_blank title='Onions of the 4th dimension blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onion'>onions of the 4th dimension<\/a><i>ish<\/i><\/li>\n<\/ul>\n<p>Another new aspect to SVG usage we add into our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\">SVG Primer web application live run<\/a> functionality is the ability to place text, using the <font size=1>&#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a> &#8230; yes, <a target=_blank title='?' data-title='https:\/\/www.google.com\/search?q=longest+president+name&#038;rlz=1C5CHFA_enAU740AU740&#038;oq=longest+president+name&#038;aqs=chrome..69i57j0l2.7815j1j4&#038;sourceid=chrome&#038;ie=UTF-8' href='https:\/\/en.wikipedia.org\/wiki\/Teodoro_Obiang_Nguema_Mbasogo'>Teodoro Obiang Nguema<\/a> &#8230;<\/font> the SVG <a target=_blank title='SVG text element information' href='HTTP:\/\/tutorials.jenkov.com\/svg\/text-element.html'>text<\/a> element.<\/p>\n<p>As far as text goes, in particular, you may find it like holding a hose three quarters of the way up with a heavy stream of water passing through it!  It&#8217;s hard to control exact placement, but who knows whether that is the be all and end all, for you, and its use with SVG you need to apply to a project you have on your plate.<\/p>\n<p>For today&#8217;s work <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php-----GETME' title='SVG_Primer.php'>SVG_Primer.php<\/a> changed in <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php----GETME' title='SVG_Primer.php'>this way<\/a>.<\/p>\n<hr>\n<p id='php\/jsvgyuigtt'>Previous relevant <a target=_blank title='PHP\/Javascript SVG YUI Geometry Tracing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/javascript-svg-yui-geometry-tracing-tutorial\/'>PHP\/Javascript SVG YUI Geometry Tracing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/Javascript SVG YUI Geometry Tracing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dataurisvg.jpg\" title=\"PHP\/Javascript SVG YUI Geometry Tracing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript SVG YUI Geometry Tracing Tutorial<\/p><\/div>\n<p>We came across another great &#8220;Geometry Tracing&#8221; functionality possibility the other day.  It revolved around using the excellent <a target=_blank title='YUI Library information' href='http:\/\/en.wikipedia.org\/wiki\/YUI_Library'>YUI<\/a> (by <a target=_blank title='Yahoo' href='http:\/\/www.yahoo.com'>Yahoo<\/a>) library of Javascript functionality, and we wanted to integrate it into yesterday&#8217;s <a title='PHP\/Javascript SVG Geometry Tracing Tutorial' href='#php\/jsvggtt'>PHP\/Javascript SVG Geometry Tracing Tutorial<\/a> start to our software integration journey of late.  Before going on, we&#8217;d like to thank <a target=_blank href='https:\/\/yuilibrary.com\/yui\/docs\/graphics\/graphics-path-tool.html' title='Graphics: Path Drawing Tool - YUI Library'>Graphics: Path Drawing Tool &#8211; YUI Library<\/a> for the basis in code of today&#8217;s supervised additions in HTML and Javascript and CSS web application components.<\/p>\n<p>To involve Javascript libraries like YUI is more than a Javascript dynamic HTML &#8220;workings&#8221; experience.  Built in, if you choose to access it &#8230; all free, thanks &#8230; are a lot of aesthetically pleasing stylesheet ideas, and this shows with our &#8220;better than usual&#8221; look to our supervised YUI web application components.<\/p>\n<p>What we have now is as below, with the <b>bold<\/b> section new for today&#8217;s work.<\/p>\n<ul>\n<li>the supervising PHP and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\" title='Click picture'>web application<\/a>&#8216;s <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php----GETME' title='SVG_Primer.php'>SVG_Primer.php<\/a> changed in <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php---GETME' title='SVG_Primer.php'>this way<\/a>, today, building on yesterday&#8217;s  <a title='PHP\/Javascript SVG Colour Picker Tutorial' href='#php\/jsvggtt'>PHP\/Javascript SVG Geometry Tracing Tutorial<\/a> &#8230; supervising &#8230;<\/li>\n<li>the supervised <a title='HTML\/Javascript Canvas Geometry Tracing Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-geometry-tracing-game-tutorial\/'>HTML\/Javascript Canvas Geometry Tracing Game Tutorial<\/a>&#8216;s HTML and Javascript <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geometry_tracing.html--GETME' title='geometry_tracing.html'>geometry_tracing.html<\/a> changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geometry_tracing.html--GETME' title='geometry_tracing.html'>this way<\/a> to interface (and integrate) with the supervisor above, via an HTML iframe element arrangement, and the HTML(5) <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element&#8217;s <a target=_blank title='HTML5 canvas drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage()<\/a> method &#8230; as one choice, the second choice being &#8230;<\/li>\n<li><b>the supervised HTML and Javascript <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_path_tool.html_GETME' title='yui_path_tool.html'>yui_path_tool.html<\/a> to interface (and integrate) with the supervisor above, via an HTML iframe element arrangement &#8230; as well as being a separate web application as per this <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_path_tool.html' title='yui_path_tool.html'>live run<\/a> link<\/b><\/li>\n<\/ul>\n<p>We like YUI&#8217;s pencil as the draggable cursor that the user can use to trace around their SVG &#8230; again via &#8230;<\/p>\n<ul>\n<li>?<b>area<\/b>=[parent determined area of SVG element]<\/li>\n<li>&#038;<b>svg<\/b>=[data URI of SVG xml]<\/li>\n<\/ul>\n<p> &#8230; GET call of the YUI magic!<\/p>\n<p>Yesterday&#8217;s work, as well as not working for Firefox (web browser), didn&#8217;t work for Internet Explorer nor Microsoft Edge (so I found out today), so, in order to solve the cross-browser issues once and for all, today, (after we realized that bullets don&#8217;t taste very good) we use the &#8220;data:image\/svg+xml;base64,&#8221; prefixed Data URI for SVGs across the board &#8230; ditching the HTML(5) <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element&#8217;s <a target=_blank title='HTML5 canvas drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage()<\/a> method &#8230; and, instead, instituting a background image (to the canvas (is <i>elem<\/i> below, and <i>ourtowhat<\/i> equates to the base64 headed Data URI for SVG content)) approach as for &#8230;<\/p>\n<p><code><br \/>\n  <i>elem<\/i>.style.backgroundRepeat='no-repeat';<br \/>\n  <i>elem<\/i>.style.backgroundPosition='20px 20px';<br \/>\n  <i>elem<\/i>.style.backgroundImage='url(' + ourtowhat + ')';<br \/>\n<\/code><\/p>\n<p> &#8230; and this started working for Firefox, at least.  Hopefully the Windows browsers as well?!<\/p>\n<hr>\n<p id='php\/jsvggtt'>Previous relevant <a target=_blank title='PHP\/Javascript SVG Geometry Tracing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php\/javascript-svg-geometry-tracing-tutorial\/'>PHP\/Javascript SVG Geometry Tracing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/Javascript SVG Geometry Tracing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dataurisvg.gif\" title=\"PHP\/Javascript SVG Geometry Tracing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript SVG Geometry Tracing Tutorial<\/p><\/div>\n<p>The tutorial today is about software (web application) integration that is value adding but in an optional way.  The software integration is between &#8230;<\/p>\n<ul>\n<li>the supervising <a title='PHP\/Javascript SVG Colour Picker Tutorial' href='#php\/jsvgcpt'>PHP\/Javascript SVG Colour Picker Tutorial<\/a>&#8216;s PHP and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\" title='Click picture'>web application<\/a>&#8216;s <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php---GETME' title='SVG_Primer.php'>SVG_Primer.php<\/a> changed in <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php--GETME' title='SVG_Primer.php'>this way<\/a>, today &#8230; supervising &#8230;<\/li>\n<li>the supervised <a title='HTML\/Javascript Canvas Geometry Tracing Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-geometry-tracing-game-tutorial\/'>HTML\/Javascript Canvas Geometry Tracing Game Tutorial<\/a>&#8216;s HTML and Javascript <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geometry_tracing.html-GETME' title='geometry_tracing.html'>geometry_tracing.html<\/a> changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geometry_tracing.html-GETME' title='geometry_tracing.html'>this way<\/a> to interface (and integrate) with the supervisor above, via an HTML iframe element arrangement<\/li>\n<\/ul>\n<p>We integrate these two in quite a neat way, allowing for the extension of the supervised&#8217;s <b>static arrays<\/b> which go &#8230;<\/p>\n<p><code><br \/>\nvar imageo=[];<br \/>\n<b>var ourareawas=[36213.0, 25382.0, 19608.0, 39366.5, 24471.5, 43679.5, 37633.5, 45130.5, 40987.5, 51842.5];<br \/>\nvar image_array=[\"one_sided.jpg\", \"two_sided.jpg\", \"three_sided.jpg\", \"four_sided.jpg\", \"five_sided.jpg\", \"six_sided.jpg\", \"seven_sided.jpg\", \"eight_sided.jpg\", \"nine_sided.jpg\", \"ten_sided.jpg\"];<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; extended by Javascript&#8217;s [array].<a target=_blank title='Javascript push method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_push.asp'>push<\/a> method (often good for those dynamic Javascript DOM driven extensions of functionality) &#8230; to establish the (communication protocol) ideas for the &#8220;Geometry&#8221; the user can be &#8220;Tracing&#8221; around, by allowing new GET parameters &#8230;<\/p>\n<ul>\n<li>?<b>area<\/b>=[parent determined area of SVG element]<\/li>\n<li>&#038;<b>svg<\/b>=[data URI of SVG xml]<\/li>\n<\/ul>\n<p> &#8230; the latter of which we&#8217;re using for the first time in this project, and want to thank the <a target=_blank title='Data URIs for SVG help, thanks' href='https:\/\/css-tricks.com\/using-svg\/'>Data URI&#8217;s for SVG<\/a> paragraph for great ideas here.  As you do software integration, sometimes you think of it as a slog, and yes, it usually is a bit of a slog.  When the slog is more a neat data efficient form of integration, that <a target=_blank title='Data URI information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>Data URI<\/a>s for <a target=_blank href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp' title='SVG information from w3schools'>SVG<\/a> seems to us to be, then it all seems worthwhile.<\/p>\n<p>However, in this early days integration, we still have to iron out some cross-browser issue aspects that don&#8217;t work in Firefox, for us not working with &#8220;data:image\/svg+xml;base64,&#8221; nor &#8220;data:image\/svg+xml;utf8,&#8221; prefixed Data URI for SVG forms.  Possibly it&#8217;s to do with using it via GET arguments.  Time will tell, we hope.<\/p>\n<p>And so <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dataurisvg.gif\">you can see us<\/a> integrating the display of an SVG piece of geometry to offering the user the (optional) chance to play a game seeing how accurately they can trace around that shape and match the supervisor calculated mathematics (<a target=_blank title='Useful area of a polygon algorithm discussed, thanks' href='http:\/\/www.mathopenref.com\/coordpolygonarea.html'>Area of a Polygon<\/a>) algorithm (we use a lot in various web applications) generated area value.  Value adding, and entertainment adding, we think &#8230; we hope.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-svg-geometry-tracing-tutorial\/'>PHP\/Javascript SVG Geometry Tracing Tutorial<\/a>.<\/p>\n<hr>\n<p id='php\/jsvgcpt'>Previous relevant <a target=_blank title='PHP\/Javascript SVG Colour Picker Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php\/javascript-svg-colour-picker-tutorial\/'>PHP\/Javascript SVG Colour Picker Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\"><img decoding=\"async\" id=\"hjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP\/Javascript SVG Colour Picker Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/colour_picker_input.jpg\" title=\"PHP\/Javascript SVG Colour Picker Tutorial\"  onmouseover=\" document.getElementById('hjspt').src = document.getElementById('hjspt').src.replace('png','PNG').replace('jpg','png').replace('PNG','jpg');     \" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript SVG Colour Picker Tutorial<\/p><\/div>\n<p>Today&#8217;s posting hooks up two <a target=_blank title='HTML5 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTML5'>HTML5<\/a> concepts, as described below &#8230;<\/p>\n<ul>\n<li>The HTML5 specification allows for the display of 2D-graphics via <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_svg.htm' title='SVG information'>SVG HTML tags<\/a> which use graphical applications in XML and the XML is then rendered by a SVG viewer.  SVG stands for Scalable Vector Graphics.<\/li>\n<li>The HTML5 specification added <a target=_blank title='HTML input information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_form_input_types.asp'>some new very useful<\/a> HTML input element types, and today, we&#8217;re talking about the <a target=_blank title='HTML5 input type=color information from w3schools' href='http:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_input_color'><i>type=color<\/i><\/a> element type that brings up a pretty suave colour picker helper, in some browsers<\/li>\n<\/ul>\n<p>There are alternative colour pickers out there, in addition to what HTML5 has given us, and you may want to read <a target=_blank title='YUI UI Colour Picker Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-ui-colour-picker-primer-tutorial\/'>YUI UI Colour Picker Primer Tutorial<\/a> about that.<\/p>\n<p>Today, we&#8217;ll leave you with <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php--GETME'>SVG_Primer.php<\/a> changed from <a target=_blank title='PHP GD and Image Functions Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gd-and-image-functions-primer-tutorial\/'>PHP GD and Image Functions Primer Tutorial<\/a>&#8216;s version in <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php--GETME'>this way<\/a>.  And before you leave, you could create your own SVG elements via this <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php'>live run<\/a> link.<\/p>\n<hr>\n<p id='pjspt'>Previous relevant <a target=_blank title='PHP\/Javascript SVG Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-svg-primer-tutorial\/'>PHP\/Javascript SVG Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/\"><img decoding=\"async\" id=\"hjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP\/Javascript SVG Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.png\" title=\"PHP\/Javascript SVG Primer Tutorial\"  onmouseover=\" document.getElementById('hjspt').src = document.getElementById('hjspt').src.replace('png','PNG').replace('jpg','png').replace('PNG','jpg');     \" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript SVG Primer Tutorial<\/p><\/div>\n<p>The HTML5 specification allows for the display of 2D-graphics via <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_svg.htm' title='SVG information'>SVG HTML tags<\/a> which use graphical applications in XML and the XML is then rendered by an SVG viewer.   SVG stands for Scalable Vector Graphics.<\/p>\n<p>We&#8217;ve talked about the HTML canvas element as another means to come to this end, but the SVG methods are more straightforward in their creation.<\/p>\n<p>For today&#8217;s tutorial we follow the advice at this wonderful <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_svg.htm' title='SVG information'>tutorial<\/a> and wrap it in PHP, so that you can specify your own parameters.   Hope you find it very useful, and easy.<\/p>\n<p>This demonstrates to you that if you have some great static HTML you can keep that great static content and present a dynamic version the user can play around with, and learn from, by adding that PHP server-side content.   For today&#8217;s PHP interface we got the HTML to use an HTML form of the relevant shape&#8217;s characteristics and <i>post<\/i> this data back to the same PHP webpage, analyzing the $_POST[] data to fill in the static HTML parameter values with user-defined parameter alternatives.<\/p>\n<p>Today we have PHP and Javascript programmable source code you could call <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php_GETME'>SVG_Primer.php<\/a> and here is its <a target=_blank title='SVG_Primer.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SVG\/SVG_Primer.php'>live run<\/a>.<\/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='#8614' onclick='var dv=document.getElementById(\"d8614\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8614' 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='#26698' onclick='var dv=document.getElementById(\"d26698\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26698' 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='#d32420' onclick='var dv=document.getElementById(\"d32420\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/software-integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32420' 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='#d32448' onclick='var dv=document.getElementById(\"d32448\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/yui\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32448' 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='#d43013' onclick='var dv=document.getElementById(\"d43013\"); 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='d43013' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s well overdue for us to revisit SVG (Scalable Vector Graphics) &#8230; SVG is short for Scalable Vector Graphics. It is a graphic format in which the shapes are specified in XML. The XML is then rendered by an SVG &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-svg-text-and-group-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":[12,14,37],"tags":[354,513,519,541,1892,652,2428,894,932,997,1072,1226,1254,1299,1319,1366],"class_list":["post-43013","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-dom","tag-google","tag-google-charts","tag-graphics","tag-group","tag-javascript","tag-onion","tag-overlay","tag-php","tag-programming","tag-rotation","tag-svg","tag-text","tag-transformation","tag-tutorial","tag-vector"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43013"}],"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=43013"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43013\/revisions"}],"predecessor-version":[{"id":43078,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43013\/revisions\/43078"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}