title: Why does my svg file look worse than my png file?
body: <p>I am going through my image files and replacing them with svg, from png. The problem is that now, when I scale up or zoom in on mobile for example, the images look worse than they did with png. </p>
  
  <p>As I understand, SVG is scalable vector graphics, so you should be able to scale them as big as you like without distortion. </p>
  
  <p>Well, the images have been converted from png to svg so should, in theory, look better, mostly when scaled up. </p>
  
  <p>You can see an example here of png background image at <a href="https://adsler.co.uk/jobs" rel="nofollow noreferrer">https://adsler.co.uk/jobs</a> and svg here <a href="https://adsler.co.uk/dating/" rel="nofollow noreferrer">https://adsler.co.uk/dating/</a></p>
  
  <p>You will see that in jobs (png) the image scales quite high before distortion but in dating (svg) it zooms only a bit before it distorts, whereas it should be the other way around. </p>
  
  <p>So what am I doing wrong and how to fix please? Basically I just want crystal clear images across my site.</p>
  
  <p>On further further inspection, in Chrome this is most definitely the case, but in Firefox, on mobile, it scales quite high before distortion.</p>
  
  <p>Two points then come up.</p>
  
  <ol>
  <li>Why is it distorting at all? It should be infinitely scalable.</li>
  <li>When I  zoom in on an svg in Firefox, does any distortion occur simply because my mobile phone reaches the peak of its display capacity? </li>
  </ol>