Create a picture counter

Hello! Today I will tell you how to create a dynamic image like the one above using PHP. All probably wondered how to implement this. It seems to me that if it is very good to think, then a new technology will come to our mind that is being introduced, especially with the advent of HTML5. This, as probably many have already guessed - SVG . For those who do not know, in fact, this is just an ordinary picture, but recorded in the form of similarity XML. You can get a picture in two ways: draw yourself for example in Inkscape or download a ready-made one. I will use the second method, since I have neither time nor artistic talent. I will do the example of personal messages / mail, so I need two pictures, the first - no messages, the second - we have a certain number of new messages. Download pictures here . old.svg - no messages, new.svg message is.

So, we proceed to the implementation. We will need:

• Some knowledge of PHP and HTML
• Understanding what template is
• Understanding what is SVG

We download from here template engine.
How does templating work? It works quite easily. We specify the template for the class, initialize the variables, the parsim, we get the code ready for output.
If in code, it works like this:

require_once('template.php'); //   $var = "Text"; $tpl->get_tpl('file.html'); $tpl->set_value('Var',$var); $tpl->tpl_parse(); 

In the same way we will work with our pictures. To begin, open a new.svg karinka for example in a notebook. Find at the very end of the file line:

 <tspan sodipodi:role="line" id="tspan5273" x="71.75" y="11.791">1</tspan> 

And change to:

 <tspan sodipodi:role="line" id="tspan5273" x="71.75" y="11.791">{MSG}</tspan> 

With these actions, we added a variable to the template. Now that we have a picture template, we go to the function itself. Before writing, you need to realize that we have two pictures and we need to think about what to derive depending on the value of the variable. Then substitute this value into the template and get a simple code:

  //   require_once('template.php'); //   $number = 1; if ($number == 1){ //   $tpl->get_tpl('imgs/new.svg'); $tpl->set_value('MSG',$number); $tpl->tpl_parse(); echo $tpl->html; } else{ //   $tpl->get_tpl('imgs/old.svg'); $tpl->tpl_parse(); echo $tpl->html; } 

We take into account that the pictures are in the imgs sub-directory, and the templating engine is next to the script in which it is included.
That's all! A simple solution, a simple problem.
PS: Sorry for the picture new.svg. I can not draw, if you do not like correct.