<!DOCTYPE html>
<html>
<head>
<style>
body {
    border: 2em blue solid;
}
svg {
    background: pink;
}
</style>
</head>
<body>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <circle cx="1" cy="1" r="1" fill="green"></circle>
        <circle cx="7" cy="1" r="1" fill="green"></circle>
    </g>
</svg>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <circle cx="1" cy="7" r="1" fill="green"></circle>
        <circle cx="7" cy="7" r="1" fill="green"></circle>
    </g>
</svg>
<br>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <circle cx="1" cy="1" r="1" fill="green"></circle>
        <circle cx="7" cy="1" r="1" fill="green"></circle>
    </g>
</svg>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <circle cx="1" cy="7" r="1" fill="green"></circle>
        <circle cx="7" cy="7" r="1" fill="green"></circle>
    </g>
</svg>
</body>
</html>
