**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