Положение кнопки относительно SVG - как настроить согласованное положение

У меня на странице есть базовый SVG. SVG масштабируется в зависимости от размера страницы, чего я и хочу.

SVG должен находиться в теге объекта, поскольку настоящий, с которым я работаю, включает в себя javascript и CSS в файле.

example.svg

   <svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" version = "1.1" id = "Layer_1" viewBox = "246 0 600 430.95">
      <rect width = "100%" height = "100%" fill = "red" />
    </svg>

Я также добавил на страницу раскрывающуюся кнопку. Это тоже масштабируется до размера страницы в результате добавленного мной CSS-класса responsive-width.

Однако я бы хотел, чтобы кнопка всегда отображалась чуть ниже SVG. Мне удалось добиться этого с помощью margin-top: 80%;, когда экран имеет определенный размер.

Однако, когда я изменяю размер браузера (например, если сужаю его), положение кнопки резко меняется и иногда появляется поверх SVG.

У меня вопрос: как сделать так, чтобы кнопка всегда отображалась, например, на 20 пикселей (или заданный процент) ниже SVG?

Вот пример того, как я сейчас пытаюсь этого добиться.

body {
  background-color: #C1C1C1;
}

.responsive-width {
  font-size: 1.5vw;
  text-align: center;
}

.tuner {
  position: absolute;
  left: 50%;
  transform: translateX(-29%);
  margin-top: 5%;
  height: 65%;
}

.dropdownposition {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 80%;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

<object type = "image/svg+xml" data = "example.svg" class = "tuner"></object>

<div class = "dropdown">
  <button class = "btn btn-secondary dropdown-toggle responsive-width dropdownposition" type = "button" id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
    My Dropdown
  </button>
  <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton"></div>
</div>