try shape-rendering=crispEdges in SVG boards

public/images/board/svg/blue.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
-     viewBox="0 0 8 8" shape-rendering="geometricPrecision">
+     viewBox="0 0 8 8" shape-rendering="crispEdges">
 <rect width="8" height="8" fill="#8ca2ad"/>
 <g id="a">
   <g id="b">

public/images/board/svg/brown.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
-     viewBox="0 0 8 8" shape-rendering="geometricPrecision">
+     viewBox="0 0 8 8" shape-rendering="crispEdges">
 <rect width="8" height="8" fill="#b58863"/>
 <g id="a">
   <g id="b">

public/images/board/svg/green.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
-     viewBox="0 0 8 8" shape-rendering="geometricPrecision">
+     viewBox="0 0 8 8" shape-rendering="crispEdges">
 <rect width="8" height="8" fill="#86a666"/>
 <g id="a">
   <g id="b">

public/images/board/svg/purple.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
-     viewBox="0 0 8 8" shape-rendering="geometricPrecision">
+     viewBox="0 0 8 8" shape-rendering="crispEdges">
 <rect width="8" height="8" fill="#7d4a8d"/>
 <g id="a">
   <g id="b">