y3.vtx9c.pw.html,adobe photoshop - Convert png into svg and then use it in html between svg tag - Gr...

I have web portfolio with images for the websites I worked on. For responsiveness I think SVG would be a better choice so that it does not lose any quality when browser is resized. For that reason I try to convert png images into svg using photoshop. Now there are several ways to use svg in html. One to use in img tag. Second object and third embed.

I tried above but images still get distorted and thus does not serve the purpose I am looking for. If I use svg tag put paths generated by photoshop might work better and scale better without losing any quality of images. Now the problem is that when I convert that image into svg using photoshop it does not give me svg tag with paths into. When I open that svg in browser and check source, I see below:

tspan { white-space:pre }

I am aware that there are alternative approaches too which are srcset and picture tag however for these I have create several images for the same image to keep the quality while the browser is scale up and down.

SVG seems to be better fit by using only one image and it will scale up and down with no or less distortion and images will look sleek on the browser.

So the question is how can I create svg so it has paths and then use it in html for better responsiveness while images still look sleek?