How To Make The Positions Of Lines In Svg Responsive

I have a text and an image side by side with a little margin in the middle. I want to draw an arrow to a specific point on the image. So for this I trying to use svg however, the p

Solution 1:

SVG viewBox
Making SVGs Responsive with CSS - Tympanus
SVG text and Small, Scalable, Accessible Typographic Designs
SVG image element

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000" preserveAspectRatio="none">
    <image x="20" y="20" width="132" height="200" xlink:href="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" />
    <text x="25" y="55" font-family="'Lucida Grande', sans-serif" font-size="32">This is the nose </text>
    <line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/> 
</svg>

Solution 2:

I found one solution, not sure if this is a good one, please correct me.

First of all I removed the viewBox attribute. Then I made the image also responsive by giving it a relative width and height: auto;. Lastly I also made the font-size responsive in the css through:

body{
 font-size: 12pt;
}
a{
 font-size: 1.5vh; 
}

Works when I resize the browser. Here the fiddle . Please correct me if I'm wrong.