Создаем счетчик-картинку

Всем привет! Сегодня я расскажу Вам, как создавать динамически такую картинку, как выше с использованием PHP. Все наверное задумывались, как такое реализовать. Мне кажется, если очень хорошо подумать, то нам на ум придет новая технология, которая сейчас внедряется, особенно с приходом HTML5. Это, как наверное многие уже догадались — SVG. Для тех, кто не знает, по сути, это — всего-лишь обыкновенная картинка, но записанная в виде подобия XML. Картинку можно получить двумя способами: нарисовать самому например в Inkscape или скачать уже готовую. Я воспользуюсь вторым методом, так как ни времени, ни художественного таланта у меня нет. Я буду делать на примере личных сообщений/почты, поэтому мне понадобяться две картинки, первая — сообщений нет, вторая — мы имеем некоторое количество новых сообщений. Скачаем картинки вот тут. old.svg — сообщений нет, new.svg сообщение есть.

Итак, перейдем к реализации. Нам понадобиться:

• Некоторые знания PHP и HTML
• Понимание, что такое шаблонизатор
• Понимание, что такое SVG

Качаем вот отсюда шаблонизатор.
Как работает шаблонизатор? Работает он довольно легко. Указываем классу шаблон, инициализируем переменные, парсим, получаем готовый к выводу код.
Если в коде, то работает примерно так:

require_once('template.php'); // Подключаем шаблонизатор
$var = "Text";
$tpl->get_tpl('file.html');
$tpl->set_value('Var',$var);
$tpl->tpl_parse();

Таким же образом мы и будем работать с нашими картинками. Для начала откроем каринку new.svg например в блокноте. Найдем в самом конце файла строки:

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

И поменяем на:

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

Этими действиями мы добавили переменную в шаблон. Теперь, когда у нас есть шаблон картинки, мы переходим к самой функцией. Перед написанием, нужно осознавать, что у нас две картинки и нам нужно подумать какую вывести в зависимости от значения переменной. Потом подставить это значение в шаблон и получим простенький код:

		// Подключаем шаблонизатор
		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;
		}

Учтем, что картинки лежат в поддериктории imgs, а шаблонизатор рядом со скриптом, в котором он подлючается.
Вот и все! Простое решение, простой проблемы.
P.S: Простите за картинку new.svg. Рисовать не умею, если не понравиться подправьте.