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 viewBoxMaking SVGs Responsive with CSS - TympanusSVG text and Small, Scalable, Accessible Typographic DesignsSVG image element

<svgxmlns="http://www.w3.org/2000/svg"width="100%"height="100%"viewBox="0 0 2000 2000"preserveAspectRatio="none"><imagex="20"y="20"width="132"height="200"xlink:href="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" /><textx="25"y="55"font-family="'Lucida Grande', sans-serif"font-size="32">This is the nose </text><linex1="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.