css - Why is this SVG image blurry when scaled down? -

i making responsive web page using bootstrap 3 framework. have image want use logo on page.

i started off saving full size (788 x 1098) image png. custom css makes sure image has max-width of 280px , of course bootstrap's css scale down image appropriately device. when viewed responsive web page on desktop pc looked ok though had been scaled down 197 x 280. when viewed on mobile image looked blurry , wasn't @ all.

so heard svg images , thought i'd give go. downloaded inkscape mac, opened full size png in inkscape , re-saved svg image. unexpectedly svg image looks when view web page on mobile phone looks blurry , bad when viewed on desktop pc.

why this? thought whole point of svg images can scaled without loss or blurriness?

i've made codepen demonstrate: http://codepen.io/theclarkofben/pen/wvdkgm

<p>svg 20%</p> <img src="http://www.clarkben.com/img/cv.svg" alt="a" style="height: 20%; width: 20%;"/> <p>svg 100%</p> <img src="http://www.clarkben.com/img/cv.svg" alt="a" /> 

your "svg" svg containing single raster (png) image, nothing scalable; see <image … in view-source:http://www.clarkben.com/img/cv.svg.

you can control rendering of such raster bit css (either using image-rendering or forcing gpu handle via transform, result woudn't perfect either. anyway, was vector image, rendering a4 cca 300 screen pixels wide box not "readable" well, in oppinion.