Openlayers 4 shows only 1/4 of SVG image - svg

Question

I'm trying to mark a coordinates with SVG icon in Openlayers 4.3.3:
import ControllerRecordIcon from '../icons/entypo/controller-record.svg';
vector.setStyle(new Style({
image: new IconStyle({
scale: 0.5,
src: ControllerRecordIcon
})
}));
map.addLayer(vector);
Icon is from Entypo package and this is the code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
You can see the problem in the attached image. There is only top left quarter of icon visible and it's not centered on coordinates (red dot marks the coordinates). Scaling doesn't help, icon gets smaller but still shows only 1/4 of image and is not centered.
I tried multiple params from Icon API, but they either make no difference or icon disappears completely.

Answer 1

<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='20' height='20' xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
use this one