Scalable Vector Graphics Chart with PHP Variables

It's going to be a simple example of how to make PHP variables work inside SVG image. There is one catch to it thou. I'm going to change the SVG file format to PHP so all the SVG related code is actually inside a PHP document.


I'm going to start with drawing the chart in Inkscape. It's going to be a bar chart with the bars being exactly 100 pixels long. Why 100? Because it's going to be a chart about the percentages so it will be much easier for me to change those values if the maximum value is 100 pixels. It means that 1 pixel is equal to 1 percent on my chart.

The first image is simple. All of the five bars are 100 pixels long and text values are set to 111 to 555. At this stage I'm also going to change the SVG file format to PHP, open the file in text editor and remove the XML heading of the file so that the file starts with SVG tags. I'm also going to change width to 100% and height to auto.



Now it's time to start entering the variables. You can include variables separate from the SVG PHP document but as this just an example version for me I'm going to add the variables right on top of the document.



After the variables are defined I'm going to add them to the chart simply by using <?php echo "$variable"; ?>. I'm going to insert the PHP code in place where the value or text is supposed to be. And the result is here.



I don't like the size of the font. But it's all good because I can change it directly inside the PHP (formerly SVG) document. So I'm going to search the place inside the SVG code where the font size is defined.



One more thing. Just go and resize the web browser window to see how the formerly SVG now PHP image is reacting to it. I'm going to build my next chart now and I hope this post was useful to you. It's just a simple example of using PHP inside SVG. You can go much deeper with that. Good luck!

Last update: 2018-04-30 (Y,M,D)

Read similar posts

2018-10-08 Creating a template for a vector based design applications
2018-09-26 Creating a multi-use footer template for all my websites
2018-09-13 I made a HTML and Javascript only replica of a popular WordPress template
2018-09-11 Best webpages for royalty-free stock photos
2018-04-30 Scalable Vector Graphics Chart with PHP Variables
2018-04-30 PHP Echo and Variable Inside SVG
2017-03-06 How to create custom sounds using audio editor