Perspective: Positioning and sizing SVGs within flex containers


I’m having trouble with using SVGs and positioning/sizing them within flex containers.

This is what I have so far for a Flex View:

I tried both embedding the SVG and saving it and linking, both with disappointing results. In the screenshot, the embedded version is on the left (grey) for both the symbols and the save/linked versions are on the right (red).
I couldn’t get the symbol to resize and positioned in the centre (to centre it I could put it inside its own flex container)

Save and Link
The size is good and it’s centred, however the colouring (tinting) is horrible as it produces a poorly rendered raster image:
The agitator symbol turned out far better than the valve for some reason. The agitator is pretty good in terms of the tinted edge quality (I can’t tell the difference).

I’d prefer to use the embedded version as then I have access to other properties. How can I get the embedded symbols to resize and to display in the centre?