**Disclamer:** My review <del>will be short</del> <ins>is longer than I expected</ins> but I will only focus on the function `useData()`. I've read it carefully and did my best to improve it and make it more readable for you. <hr> **Lets get it started!** 1. The first thing that pops in my head is that giant pile of un-indented SVG:<br> <!-- language: lang-php --> $svg = <<<END <svg xmlns="http://www.w3.org/2000/svg" width="137" height="20"> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#bbb" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/> </linearGradient> <mask id="a"> <rect width="137" height="20" rx="3" fill="#fff"/> </mask> <g mask="url(#a)"> <path fill="#555" d="M0 0h62v20H0z"/> <path fill="#$color" d="M62 0h75v20H62z"/> <path fill="url(#b)" d="M0 0h137v20H0z"/> </g> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="31" y="15" fill="#010101" fill-opacity=".3">$text</text> <text x="31" y="14">$text</text> <text x="98.5" y="15" fill="#010101" fill-opacity=".3">$right</text> <text x="98.5" y="14">$right</text> </g> </svg> END; echo $svg; It sure need some indentation. It's a total mess! Consider this: <!-- language: lang-php --> $svg = <<<END <svg xmlns="http://www.w3.org/2000/svg" width="137" height="20"> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#bbb" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/> </linearGradient> <mask id="a"> <rect width="137" height="20" rx="3" fill="#fff"/> </mask> <g mask="url(#a)"> <path fill="#555" d="M0 0h62v20H0z"/> <path fill="#$color" d="M62 0h75v20H62z"/> <path fill="url(#b)" d="M0 0h137v20H0z"/> </g> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="31" y="15" fill="#010101" fill-opacity=".3">$text</text> <text x="31" y="14">$text</text> <text x="98.5" y="15" fill="#010101" fill-opacity=".3">$right</text> <text x="98.5" y="14">$right</text> </g> </svg> END; echo $svg; So much better now! <hr> 2. There's still an useless attribution. Lets fix that too: <!-- language: lang-php --> echo <<<END <svg xmlns="http://www.w3.org/2000/svg" width="137" height="20"> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#bbb" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/> </linearGradient> <mask id="a"> <rect width="137" height="20" rx="3" fill="#fff"/> </mask> <g mask="url(#a)"> <path fill="#555" d="M0 0h62v20H0z"/> <path fill="#$color" d="M62 0h75v20H62z"/> <path fill="url(#b)" d="M0 0h137v20H0z"/> </g> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="31" y="15" fill="#010101" fill-opacity=".3">$text</text> <text x="31" y="14">$text</text> <text x="98.5" y="15" fill="#010101" fill-opacity=".3">$right</text> <text x="98.5" y="14">$right</text> </g> </svg> END; <hr> 3. Alright, much better now. But you have 'stray' variables lost within your SVG. To make it easier to read, consider wrapping the variables in brackets: echo <<<END <svg xmlns="http://www.w3.org/2000/svg" width="137" height="20"> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#bbb" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/> </linearGradient> <mask id="a"> <rect width="137" height="20" rx="3" fill="#fff"/> </mask> <g mask="url(#a)"> <path fill="#555" d="M0 0h62v20H0z"/> <path fill="#{$color}" d="M62 0h75v20H62z"/> <path fill="url(#b)" d="M0 0h137v20H0z"/> </g> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="31" y="15" fill="#010101" fill-opacity=".3">{$text}</text> <text x="31" y="14">{$text}</text> <text x="98.5" y="15" fill="#010101" fill-opacity=".3">{$right}</text> <text x="98.5" y="14">{$right}</text> </g> </svg> END; Way better, isn't it? <hr> 4. But now, you want to change a color. How would you do it? Change everything by hand? I propose the following (partial) code: <!-- language: lang-php --> $colors = array( 'gradient'=>'bbb', 'mask'=>'fff', 'back'=>array('555', 'e05d44'), 'text'=>'010101', 'right'=>'010101' ); if (isset($data['accepted_answer_id']) && $data['accepted_answer_id'] != 0) { $color['back'][1] = '97ca00'; $mode = 'views'; } elseif ($data['answer_count'] >= 1) { $colors['back'][1] = 'ff8000'; $right = $data['score'] . ' score'; $mode = 'answers'; } else { $text = 'reviewing'; $mode = 'score'; } // [...] echo <<<END <svg xmlns="http://www.w3.org/2000/svg" width="137" height="20"> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#{$colors['gradient']}" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/> </linearGradient> <mask id="a"> <rect width="137" height="20" rx="3" fill="#{$colors['mask']}"/> </mask> <g mask="url(#a)"> <path fill="#{$colors['back'][0]}" d="M0 0h62v20H0z"/> <path fill="#{$colors['back'][1]}" d="M62 0h75v20H62z"/> <path fill="url(#b)" d="M0 0h137v20H0z"/> </g> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="31" y="15" fill="#{$colors['text']}" fill-opacity=".3">{$text}</text> <text x="31" y="14">{$text}</text> <text x="98.5" y="15" fill="#{$colors['right']}" fill-opacity=".3">{$right}</text> <text x="98.5" y="14">{$right}</text> </g> </svg> END; Notice that I've removed the color attribution on the variable `$colors` on the `else`, and made it the default color. <hr> 5. You have the following code: <!-- language: lang-php --> if (isset($_GET['mode'])) { $mode = $_GET['mode']; } $data['answers'] = $data['answer_count']; $data['views'] = $data['view_count']; $right = $data[$mode] . ' ' . $mode; Do you smell that? I smell code injection! Please, **always validate your input**. Simply use this `if` instead: if (isset($_GET['mode']) && in_array($_GET['mode'], array('views','answers','score'))) { $mode = $_GET['mode']; } <hr> 6. **This point is purely subjective.** You are blindly trusting that your code has no output before this function. Instead of this: header('Content-type: image/svg+xml; charset=utf-8'); Consider using this: if (!headers_sent()) { header('Content-type: image/svg+xml; charset=utf-8'); } In case you happen to have an error, it will still send the SVG with the previous errors, but at least it won't be an error factory! *Due to it being subjective and not everybody agreeing on it, I've decided to remove it from the final code.* <hr> 7. [As pointed out before][1], you have an useless variable (`$is_answered`). I've removed it as well, since it isn't doing anything there. <hr> 8. A very picky point would be to change `echo <<<END` to `echo <<<SVG`. This shows what the echo is all about and what is that huge block, without reading more than 12 characters. <hr> **Final result:** This is what the code looks like, with additional lines to increase readability: <!-- language: lang-php --> function useData($data) { header('Content-type: image/svg+xml; charset=utf-8'); $is_answered = $data['text']; $text = 'reviewed'; $colors = array( 'gradient'=>'bbb', 'mask'=>'fff', 'back'=>array('555', 'e05d44'), 'text'=>'010101', 'right'=>'010101' ); if (isset($data['accepted_answer_id']) && $data['accepted_answer_id'] != 0) { $color['back'][1] = '97ca00'; $mode = 'views'; } elseif ($data['answer_count'] >= 1) { $colors['back'][1] = 'ff8000'; $right = $data['score'] . ' score'; $mode = 'answers'; } else { $text = 'reviewing'; $mode = 'score'; } if (isset($_GET['mode']) && in_array($_GET['mode'], array('views','answers','score'))) { $mode = $_GET['mode']; } $data['answers'] = $data['answer_count']; $data['views'] = $data['view_count']; $right = $data[$mode] . ' ' . $mode; echo <<<SVG <svg xmlns="http://www.w3.org/2000/svg" width="137" height="20"> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#{$colors['gradient']}" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/> </linearGradient> <mask id="a"> <rect width="137" height="20" rx="3" fill="#{$colors['mask']}"/> </mask> <g mask="url(#a)"> <path fill="#{$colors['back'][0]}" d="M0 0h62v20H0z"/> <path fill="#{$colors['back'][1]}" d="M62 0h75v20H62z"/> <path fill="url(#b)" d="M0 0h137v20H0z"/> </g> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="31" y="15" fill="#{$colors['text']}" fill-opacity=".3">{$text}</text> <text x="31" y="14">{$text}</text> <text x="98.5" y="15" fill="#{$colors['right']}" fill-opacity=".3">{$right}</text> <text x="98.5" y="14">{$right}</text> </g> </svg> SVG; } <hr> **Side-notes:** Before you say anything, this is primarly opinion-based and not objective! <hr> I don't think that `useData` is a good name. I strongly recommend to change it to `lowercase_and_underscore` (a.k.a. `snake_case`). Why is that? If you write `usedata` by mistake, you will have an hard time to look into `"Where in the living fudge is this declared???"` just to notice that you have misspelled the name of the function and that PHP doesn't care about casing in the function name. If you write `USE_DATA`, `Use_Data` or any variation, it is easier to find the name. Implicitly you split the name by the `_` and compare part by part.<br> Try this experiment: 1. Compare `aVeryInterestingMethodWellSpelled` with `averyinterestingmethodwellspelled`. 2. Compare `a_Very_Interesting_Method_Well_Spelled` with `a_very_interesting_method_well_spelled`. Which one is easier to compare? <hr> I disagree with https://softwareengineering.stackexchange.com/questions/196416/whats-the-dominant-naming-convention-for-variables-in-php-camelcase-or-undersc on using `camelCase` for this exact point. Also, PHP itself doesn't follow this! Look at all the function names. <hr> But, even if you change the name to `use_data`, it will be a bad name. Why is that? Well, the name gives the idea that you are trying to use some data to do something. But what is it doing? I don't know, I have to read the whole function to know. My recomendation: `print_svg`.<br> It shows preciselly what the code does: it outputs SVG. Simple. [1]: http://codereview.stackexchange.com/a/95462/53773