Как сохранить пропорции текста?

Question

Мне нужно создать адаптивный SVG с постоянной высотой. Моя попытка здесь: JSFIDDLE

HTML:

<div style="width: 100%">
  <svg width="360" 
        height="200" 
        viewBox="0 0 360 200" 
        preserveAspectRatio="none" 
        style="width:100%">
    </svg>
</div>

Это сработало. Но пропорции символов меняются, когда ширина браузера уменьшается. Помогите, пожалуйста, сделать пропорции символов постоянными