Show ethical design violations on the pyramid (inline SVG)

Customise inline SVG during generation to display ethical design violations.

Code to customise (based on the Ethical Design badge) as originally generated by Sketch (and cleaned up by hand):

<svg width="133px" height="109px" viewBox="0 0 133 109" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Ethical Design Pyramid</title>
    <desc>Shows ethical design violations</desc>
    <defs>
        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
            <stop stop-color="#676767" offset="0%"></stop>
            <stop stop-color="#676767" offset="35.6244701%"></stop>
            <stop stop-color="#B3B3B3" offset="35.7633842%"></stop>
            <stop stop-color="#B3B3B3" offset="66.6242733%"></stop>
            <stop stop-color="#CCCCCC" offset="66.6696948%"></stop>
            <stop stop-color="#E5E5E5" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="pyramid" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M66.5384615,0.5 L133.038462,108.40566 L0.03846154,108.40566 L66.5384615,0.5 Z" id="ethical-design-pyramid" fill="url(#linearGradient-1)"></path>
    </g>
</svg>

(Inline SVG is now widely supported.)