SVG Fixed Sized Element Position Relatively within Viewbox

HTML

<svg style="display: none;">
        <defs>
            <path id="country-PT" class="country" stroke="#141414" stroke-opacity="1" stroke-width="1" stroke-linecap="miter" stroke-linejoin="miter" fill="#4F4F4F" fill-opacity="1" fill-rule="evenodd" d="M93 531L101 527L101 532L119 530L119 534L124 536L115 544L117 555L114 557L116 560L114 565L108 565L115 574L110 583L113 586L115 586L109 595L110 601L104 604L96 602L92 603L94 596L93 582L95 583L95 581L89 583L90 579L86 578L87 569L91 566L95 546z"></path>
            <symbol id="pin" class="pin-container" viewBox="0 0 10px 10px">
                <circle cx="0" cy="0" r="5px" fill="red" />
            </symbol>
        </defs>
    </svg>

    <div class="container">
        <svg class="svg-container" viewBox="85 525 43 83" >
            <!-- Country -->
            <rect class="outline" x="85" y="525" width="43" height="83" />
            <use href="#country-PT"/>
            <!-- Marker -->
            <a href="#goToA">
              <use x="85" y="574" href="#pin"/>
            </a>
        </svg>
    </div>

    <div class="container container-2">
        <svg class="svg-container" viewBox="85 540 21.5 41.5" preserveAspectRatio="xMidYMid meet">
            <!-- Country -->
            <rect class="outline" x="85" y="525" width="43" height="83" />
            <use href="#country-PT"/>
            <!-- Marker -->
            <a href="#goToA">
              <use x="85" y="574" href="#pin"/>
            </a>
        </svg>
    </div>

    <div class="container container-3">
        <svg class="svg-container" viewBox="85 540 20 40" preserveAspectRatio="xMidYMid meet">
            <!-- Country -->
            <rect class="outline" x="85" y="525" width="43" height="83" />
            <use href="#country-PT"/>
            <!-- Marker -->
            <a href="#goToA">
              <use x="85" y="574" href="#pin"/>
            </a>
        </svg>
    </div>

CSS

svg {
            background-color: khaki;
            border: solid 1px #9C9C9C;
        }

        .container {
            background-color: #9ecae1;
            border: solid 1px #2C3E50;
            margin-top: 20px;
            width: 200px;
            height: 150px;
        }

        .container-2 {
            width: 400px;
            height: 150px;
        }

        .container-3 {
            width: 250px;
            height: 300px;
        }

        .svg-container {
            width: 100%;
            height: 100%;
        }

        .outline {
            fill: #9C9C9C;
        }

        .pin-container {
            overflow: visible;
        }
        .pin-container circle {
            display: block;
            position: static;
            overflow: visible;
            height: 10px;
            width: 10px;
        }