Avoid rendering unnecessarily large, empty SVGs for image labels
Avoid rendering unnecessarily large, empty SVGs for image labels

Summary:
This diff attempts to fix an issue whereby many (all?) of our responsive images with labels were
causing the page to be much wider than it needed to be, allowing users to scroll horizontally into
blank whitespace.

The issue is that, with our responsive images, the underlying Raphael SVG was being rendered at
full-size, even though its container was being shrunk. (The contents of the Graphie were being
scaled down correctly, but the literal `<svg/>` element wasn't having its width reset and was
instead explicitly being set to the box size of the Graphie. This is all despite the fact that the
`<svg/>` is always empty in this case, since for images, we're only using it to render labels which
are done outside of `<svg/>` but still under the auspices of the Graphie.)

My attempted fix is to apply the same responsive width styles to the underlying SVG as we are to
the parent. This seems reasonable, since in `graphie.init`, we set the parent and the SVG to be the
same width and height, but in the Graphie component, we _only_ set the parent to be `100%`/`100%`.

On Asana @ https://app.asana.com/0/132409062806753/159359827442184.

Test Plan:
- Open an exercise with an SVG image and an image with legacy labels ([link](http://localhost:9000/#content=%7B%22question%22%3A%7B%22content%22%3A%22%2A%2AWhich%20point%20is%20located%20at%20%24-7.75%24%3F%2A%2A%5Cn%5Cn%21%5B%5D%28web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fcc41f05404d24470c5a1fcb0f75780fb6e157998%29%5Cn%5Cn%5B%5B%E2%98%83%20radio%201%5D%5D%5Cn%5Cn%5B%5B%E2%98%83%20image%201%5D%5D%5Cn%5Cn%22%2C%22images%22%3A%7B%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fcc41f05404d24470c5a1fcb0f75780fb6e157998%22%3A%7B%22width%22%3A460%2C%22height%22%3A80%7D%7D%2C%22widgets%22%3A%7B%22radio%201%22%3A%7B%22type%22%3A%22radio%22%2C%22alignment%22%3A%22default%22%2C%22static%22%3Afalse%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22choices%22%3A%5B%7B%22content%22%3A%22%24%5C%5CgoldD%7BA%7D%24%22%2C%22correct%22%3Afalse%7D%2C%7B%22content%22%3A%22%24%5C%5CredC%7BB%7D%24%22%2C%22correct%22%3Afalse%7D%2C%7B%22isNoneOfTheAbove%22%3Afalse%2C%22content%22%3A%22%24%5C%5CpurpleC%7BC%7D%24%22%2C%22correct%22%3Atrue%7D%2C%7B%22isNoneOfTheAbove%22%3Afalse%2C%22content%22%3A%22%24%5C%5CtealD%7BD%7D%24%22%2C%22correct%22%3Afalse%7D%5D%2C%22randomize%22%3Afalse%2C%22multipleSelect%22%3Afalse%2C%22displayCount%22%3Anull%2C%22hasNoneOfTheAbove%22%3Afalse%2C%22onePerLine%22%3Afalse%2C%22deselectEnabled%22%3Afalse%7D%2C%22version%22%3A%7B%22major%22%3A1%2C%22minor%22%3A0%7D%7D%2C%22image%201%22%3A%7B%22type%22%3A%22image%22%2C%22alignment%22%3A%22block%22%2C%22static%22%3Afalse%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22static%22%3Afalse%2C%22title%22%3A%22%22%2C%22range%22%3A%5B%5B0%2C10%5D%2C%5B0%2C10%5D%5D%2C%22box%22%3A%5B460%2C80%5D%2C%22backgroundImage%22%3A%7B%22url%22%3A%22http%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fcc41f05404d24470c5a1fcb0f75780fb6e157998.svg%22%2C%22width%22%3A460%2C%22height%22%3A80%7D%2C%22labels%22%3A%5B%7B%22content%22%3A%22125%22%2C%22coordinates%22%3A%5B5%2C5%5D%2C%22alignment%22%3A%22below%22%7D%5D%2C%22alt%22%3A%22%22%2C%22caption%22%3A%22%22%7D%2C%22version%22%3A%7B%22major%22%3A0%2C%22minor%22%3A0%7D%7D%7D%7D%2C%22answerArea%22%3A%7B%22calculator%22%3Afalse%2C%22chi2Table%22%3Afalse%2C%22periodicTable%22%3Afalse%2C%22tTable%22%3Afalse%2C%22zTable%22%3Afalse%7D%2C%22itemDataVersion%22%3A%7B%22major%22%3A0%2C%22minor%22%3A1%7D%2C%22hints%22%3A%5B%5D%7D)).
- Remove the added line.
- Open up on a phone.
- Re-add the line.
    - Verify that the labels remain in the exact same position as before.
    - Verify that the `<svg/>` is only content-width.
    - Verify that the page cannot scroll.

Reviewers: benkomalo, emily, jared

Reviewed By: emily, jared

Differential Revision: https://phabricator.khanacademy.org/D29597

ariabuckles/perseus,ariabuckles/perseus,ariabuckles/perseus,learningequality/perseus,learningequality/perseus,ariabuckles/perseus