title: how to make the positions of lines in svg responsive
body: <p>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.</p>
  <p>So for this I trying to use <code>svg</code> however, the position of the line is somehow not responsive. After reading a couple of questions here (like <a href="https://stackoverflow.com/questions/30717551/how-to-make-svg-responsive">this</a>) and blog posts (like <a href="https://css-tricks.com/scale-svg/" rel="nofollow noreferrer">this</a>) I changed all the values to <code>%</code> and also added the  <code>viewBox</code> attribute But for some reason the arrow is only in the correct position with my current browser screen 1920x1200. If I resize the browser window the arrow is at an incorrect position. My code:</p>
  <p>html:</p>
  <pre><code>&lt;div id=&quot;a&quot;&gt;
  This is the nose
  &lt;/div&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 2000 2000&quot; preserveAspectRatio=&quot;none&quot;&gt;
    &lt;line x1=&quot;9%&quot; y1=&quot;9.5%&quot; x2=&quot;23%&quot; y2=&quot;6%&quot; marker-end=&quot;url(#triangle)&quot; stroke=&quot;black&quot; stroke-width=&quot;0.2%&quot;/&gt;
    
  &lt;/svg&gt;
  &lt;img src=&quot;http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg&quot; /&gt;
  </code></pre>
  <p>css:</p>
  <pre><code>#a{
  position: absolute;
  margin-top: 8%;
  
  }
  svg{
    position: absolute;
    z-index:2;
    
  }
  img{
    margin-left: 20%;
    position:relative;
    z-index:1;
  }
  </code></pre>
  <p>Here is a <a href="https://jsfiddle.net/o2fphns4/1/" rel="nofollow noreferrer">fiddle</a></p>
  <p>Anyone an idea why this is not working?</p>
  <p>Is svg the even the right attempt here or should I use something else?</p>