SVG image as a cursor pixcelated - html

Question

I'm using this custom size 64*64 plus icon svg as zoom icon as a cursor in my website. As you can see, it's pixcelated. Specially the white border. Don't know why. Because it's svg it suppose to looks sharp right?
I tried everything.
Increasing border width.
Increasing size.
Set shape-rendering="auto"
None of above working.
Here is my svg code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="64px" height="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-285 377 40 40" style="enable-background:new -285 377 40 40;" xml:space="preserve" shape-rendering="auto">
<style type="text/css">
.st0{fill:none;}
.st1{opacity:0.8;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;enable-background:new ;}
</style>
<title>zoom_icon</title>
<g>
<title>background</title>
<rect id="canvas_background" x="-286" y="376" class="st0" width="12.6" height="12.6"/>
</g>
<g>
<title>Layer 1</title>
<g id="Layer_2_1_">
<g id="Layer_1-2">
<circle id="svg_1" shape-rendering="geometricPrecision" class="st1" cx="-264.8" cy="397.2" r="18"/>
<line id="svg_2" class="st1" x1="-264.8" y1="386.7" x2="-264.8" y2="407.7"/>
<line id="svg_3" class="st1" x1="-254.3" y1="397.2" x2="-275.3" y2="397.2"/>
</g>
</g>
</g>
</svg>
Here is my the svg file: https://svgshare.com/i/H_C.svg
Here is the real world example. Jsfiddle
What course to pixcelated this image?

Answer 1

you can try removing the circle and just use a border:
.plus {
border: solid white 1px;
border-radius: 50%;
}