Convert 3 PNG images into SVG for a website + be able to change them with CSS

I have 3 images in PNG. 1. I want them to look better, smoother. I think they need to be drawn all over again, but they are quite simple. 2. I already used a PNG to SVG converter online, but the edges of the shapes are not good. 3. The sizes (ratio between the sizes) need to be 100% the same. 4. The HEX color of all blue is #00AEF4. 5. We need to be able to change the above blue color with CSS with the fill attribute in the SVG 6. If you are going to make this in AI, we need the AI file as well. Image 1 The borders have a lot of pixels and are not smooth. It needs to be the same shape, but with smooth corners. With CSS we need to change the color if necessary . Image 2 We want to be able to change the width (thickness) of the blue border. Is this possible? It needs to be 2 webpixels width, but we want to be able to change this to for example 1px or 4px with CSS. It is very important that the white shape is a little bit higher than the blue line just like in the example in the attachment. Image 3 The notch needs to be transparent. Process: We start with image 2. If we are happy with it, you can also make the other images and possibly more in the future. PS: The SVG files in the attachment are done with [login to view URL] and are examples.