en.javascript.info/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="233" height="156" viewBox="0 0 233 156"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="field.svg"><image id="Screen-Shot-2017-02-25-at-23.45.22" width="224" height="150" x="4" y="3" opacity=".7" xlink:href="data:image/png;base64,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"/><text id="(0,0)" fill="#AA2D0A" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="45" y="60">(0,0)</tspan></text><circle id="Oval" cx="15.5" cy="15.5" r="4.5" fill="#EE6B47"/><text id="clientWidth" fill="#AA2D0A" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="73" y="114">clientWidth</tspan></text><path id="Line-9" fill="#EE6B47" fill-rule="nonzero" d="M39.748 33.084L54.61 45.293l-1.904 2.318-14.864-12.21-5.078 6.183-8.651-19.401 20.711 4.719-5.077 6.182z"/><path id="Line-10" fill="#EE6B47" fill-rule="nonzero" d="M34 126h163v-8l19 9.5-19 9.5v-8H34v8l-19-9.5 19-9.5v8z"/></g></g></svg>