How to make SVG icon coloring on hover?

There are two icons: 1st (icon on top) it is normal, but when you hover it should be painted over (the icon at the bottom). How to implement this, and even smoothly, preferably?

P.S. The only option is to create two png icons and replace them with a hover ?

Two icons

<svg xmlns="http://www.w3.org/2000/svg" width="802.38" height="648.026" viewBox="0 0 752.23086 607.52399"><path d="M207.718 580.578C126.42 549.449 64.078 479.287 20.494 369.87c-36.622-91.94-24.36-170.383 38.377-245.493C229.963-80.46 607.95-20.792 659.402 219.174c15.533 72.446-14.758 141.938-87.96 201.792-56.941 46.558-67.889 49.67-167.664 47.662-159.68-3.213-174.019-5.051-156.258-20.03 9.75-8.223 40.053-7.188 78.133 2.668 159.754 41.35 307.357-52.363 307.357-195.14 0-84.984-32.612-142.132-109.233-191.42-110.36-70.99-278.756-63.274-393.314 18.021C.695 174.817-31.78 387.982 90.28 346.49c61.246-20.819 86.754-14.582 117.006 28.608 29.44 42.032 31.74 79.593 6.927 113.112-20.644 27.886 56.107 53.876 160.43 54.326 162.567.7 253.162-66.809 301.046-224.333 23.072-75.9 66.192-88.557 75.151-22.058 14.243 105.72-82.525 235.797-212.444 285.573-90.954 34.847-238.015 34.34-330.677-1.14zm315.109-14.018c86.577-33.16 138.765-77.586 180.795-153.907 33.686-61.17 43.405-138.042 17.453-138.042-8.422 0-20.713 24.521-27.314 54.49-20.941 95.074-76.682 160.325-170.715 199.844-94.718 39.806-164.137 45.14-253.593 19.483-67.633-19.398-187.79-94.55-187.79-117.452 0-8.559 15.88-3.443 35.287 11.37 30.903 23.585 104.612 47.121 78.434 25.044-5.524-4.66-1.84-16.809 8.189-26.999 24.466-24.862-30.793-97.843-65.563-86.59-13.588 4.397-33.763 7.995-44.833 7.995-34.764 0-21.912 82.713 20.34 130.912 82.433 94.03 268.818 127.66 409.31 73.852zM311.312 413.267c-106.2-38.96-127.309-154.547-41.448-226.957 89.585-75.553 208.08-38.693 208.08 64.726 0 54.25-21.448 75.56-86.148 85.592l-43.074 6.68 46.15 1.978c86.03 3.689 139.417-79.57 97.543-152.124-30.498-52.842-115.843-93.666-157.717-75.442-20.837 9.068-39.499 7.83-55.996-3.717-20.101-14.07-24.743-11.867-24.743 11.743 0 38.143-43.369 67.463-81.62 55.18-24.353-7.819-26.104-6.125-8.835 8.546 11.846 10.064 21.537 40.038 21.537 66.61 0 38.992-8.88 51.158-46.045 63.074-90.87 29.137-115.472-12.21-66.308-111.445 16.446-33.195 32.76-47.644 46.002-40.742 13.87 7.23 17.032 3.033 9.76-12.95-14.554-31.986 69.654-89.312 99.996-68.075 15.518 10.861 23.778 6.935 30.41-14.456 9.453-30.484 86.956-42.319 106.096-16.201 5.307 7.242 25.134 9.751 44.06 5.577 18.926-4.174 54.179 3.334 78.338 16.685 147.187 81.333 146.352 284.19-1.383 336.249-71.931 25.347-104.385 25.248-174.655-.53zm187.99-24.85c51.387-22.205 86.772-97.918 76.36-163.386-6.93-43.578-25.71-71.953-70.558-106.616-60.043-46.406-113.308-61.633-113.308-32.391 0 8.163 19.965 22.514 44.366 31.89 89.71 34.472 119.261 139.657 57.76 205.595-68.057 72.968-205.503 40.76-205.503-48.156 0-49.149 35.581-77.325 89.506-70.878 28.958 3.462 39.715 14.26 39.715 39.864 0 19.314-9.691 37.84-21.537 41.17-12.635 3.552-21.537-6.458-21.537-24.217 0-34.297-26.018-40.722-40.047-9.889-13.391 29.431 28.311 70.855 65.184 64.748 44.829-7.425 67.945-45.323 54.73-89.729-33.614-112.95-217.703-58.528-217.703 64.359 0 98.901 139.551 150.792 262.572 97.635zM328.823 310.31c-5.611-12.332-13.898-19.306-18.414-15.497-4.516 3.809-3.1 13.9 3.145 22.423 16.99 23.183 26.92 18.68 15.27-6.926zm-184.972-12.076c1.035-1.006 6.776-19.061 12.756-40.124 7.297-25.705 2.189-44.374-15.536-56.78-34.408-24.084-53.645-6.236-68.952 63.97-11.791 54.083-10.767 55.698 28.811 45.419 22.57-5.862 41.885-11.48 42.92-12.485zm74.9-146.374c13.15-13.362 15.109-29.462 5.369-44.14-13.638-20.552-18.734-19.935-46.123 5.589-16.935 15.782-25.697 35.645-19.471 44.14 15.55 21.22 35.683 19.35 60.226-5.589zm121.356-74.969c0-11.132-10.338-20.24-22.973-20.24-32.026 0-45.144 13.914-34.717 36.829 11.05 24.286 57.69 10.875 57.69-16.589zm333.636 88.836c-5.967-13.115-2.588-30.814 7.51-39.33 26.25-22.139 75.989-1.904 69.131 28.124-7.637 33.448-62.847 41.52-76.64 11.206zm62.644-4.94c0-18.92-20.482-31.503-37.143-22.82-17.82 9.289-2.455 34.929 20.93 34.929 8.917 0 16.213-5.45 16.213-12.11z" fill="#a1a1a1"/></svg>
Author: Vadim Ovchinnikov, 2017-07-29
Source

2 answers

To change the fill color when you hover, use the fill-opacity property and, if necessary, stroke-opacity:

svg {
  display: block;
  width: 200px;
  height: 162px;
  margin: 40px auto;
}

path {
  fill-opacity: 0;
  fill: #f00;
  stroke: #f00;
  transition: all 0.4s linear;
}

svg:hover path {
  fill-opacity: 1;
  stroke-opacity: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" width="802.38" height="648.026" viewBox="0 0 752.23086 607.52399"><path d="M207.718 580.578C126.42 549.449 64.078 479.287 20.494 369.87c-36.622-91.94-24.36-170.383 38.377-245.493C229.963-80.46 607.95-20.792 659.402 219.174c15.533 72.446-14.758 141.938-87.96 201.792-56.941 46.558-67.889 49.67-167.664 47.662-159.68-3.213-174.019-5.051-156.258-20.03 9.75-8.223 40.053-7.188 78.133 2.668 159.754 41.35 307.357-52.363 307.357-195.14 0-84.984-32.612-142.132-109.233-191.42-110.36-70.99-278.756-63.274-393.314 18.021C.695 174.817-31.78 387.982 90.28 346.49c61.246-20.819 86.754-14.582 117.006 28.608 29.44 42.032 31.74 79.593 6.927 113.112-20.644 27.886 56.107 53.876 160.43 54.326 162.567.7 253.162-66.809 301.046-224.333 23.072-75.9 66.192-88.557 75.151-22.058 14.243 105.72-82.525 235.797-212.444 285.573-90.954 34.847-238.015 34.34-330.677-1.14zm315.109-14.018c86.577-33.16 138.765-77.586 180.795-153.907 33.686-61.17 43.405-138.042 17.453-138.042-8.422 0-20.713 24.521-27.314 54.49-20.941 95.074-76.682 160.325-170.715 199.844-94.718 39.806-164.137 45.14-253.593 19.483-67.633-19.398-187.79-94.55-187.79-117.452 0-8.559 15.88-3.443 35.287 11.37 30.903 23.585 104.612 47.121 78.434 25.044-5.524-4.66-1.84-16.809 8.189-26.999 24.466-24.862-30.793-97.843-65.563-86.59-13.588 4.397-33.763 7.995-44.833 7.995-34.764 0-21.912 82.713 20.34 130.912 82.433 94.03 268.818 127.66 409.31 73.852zM311.312 413.267c-106.2-38.96-127.309-154.547-41.448-226.957 89.585-75.553 208.08-38.693 208.08 64.726 0 54.25-21.448 75.56-86.148 85.592l-43.074 6.68 46.15 1.978c86.03 3.689 139.417-79.57 97.543-152.124-30.498-52.842-115.843-93.666-157.717-75.442-20.837 9.068-39.499 7.83-55.996-3.717-20.101-14.07-24.743-11.867-24.743 11.743 0 38.143-43.369 67.463-81.62 55.18-24.353-7.819-26.104-6.125-8.835 8.546 11.846 10.064 21.537 40.038 21.537 66.61 0 38.992-8.88 51.158-46.045 63.074-90.87 29.137-115.472-12.21-66.308-111.445 16.446-33.195 32.76-47.644 46.002-40.742 13.87 7.23 17.032 3.033 9.76-12.95-14.554-31.986 69.654-89.312 99.996-68.075 15.518 10.861 23.778 6.935 30.41-14.456 9.453-30.484 86.956-42.319 106.096-16.201 5.307 7.242 25.134 9.751 44.06 5.577 18.926-4.174 54.179 3.334 78.338 16.685 147.187 81.333 146.352 284.19-1.383 336.249-71.931 25.347-104.385 25.248-174.655-.53zm187.99-24.85c51.387-22.205 86.772-97.918 76.36-163.386-6.93-43.578-25.71-71.953-70.558-106.616-60.043-46.406-113.308-61.633-113.308-32.391 0 8.163 19.965 22.514 44.366 31.89 89.71 34.472 119.261 139.657 57.76 205.595-68.057 72.968-205.503 40.76-205.503-48.156 0-49.149 35.581-77.325 89.506-70.878 28.958 3.462 39.715 14.26 39.715 39.864 0 19.314-9.691 37.84-21.537 41.17-12.635 3.552-21.537-6.458-21.537-24.217 0-34.297-26.018-40.722-40.047-9.889-13.391 29.431 28.311 70.855 65.184 64.748 44.829-7.425 67.945-45.323 54.73-89.729-33.614-112.95-217.703-58.528-217.703 64.359 0 98.901 139.551 150.792 262.572 97.635zM328.823 310.31c-5.611-12.332-13.898-19.306-18.414-15.497-4.516 3.809-3.1 13.9 3.145 22.423 16.99 23.183 26.92 18.68 15.27-6.926zm-184.972-12.076c1.035-1.006 6.776-19.061 12.756-40.124 7.297-25.705 2.189-44.374-15.536-56.78-34.408-24.084-53.645-6.236-68.952 63.97-11.791 54.083-10.767 55.698 28.811 45.419 22.57-5.862 41.885-11.48 42.92-12.485zm74.9-146.374c13.15-13.362 15.109-29.462 5.369-44.14-13.638-20.552-18.734-19.935-46.123 5.589-16.935 15.782-25.697 35.645-19.471 44.14 15.55 21.22 35.683 19.35 60.226-5.589zm121.356-74.969c0-11.132-10.338-20.24-22.973-20.24-32.026 0-45.144 13.914-34.717 36.829 11.05 24.286 57.69 10.875 57.69-16.589zm333.636 88.836c-5.967-13.115-2.588-30.814 7.51-39.33 26.25-22.139 75.989-1.904 69.131 28.124-7.637 33.448-62.847 41.52-76.64 11.206zm62.644-4.94c0-18.92-20.482-31.503-37.143-22.82-17.82 9.289-2.455 34.929 20.93 34.929 8.917 0 16.213-5.45 16.213-12.11z" fill="#a1a1a1"/></svg>
 3
Author: Cheg, 2017-07-29 20:28:47

The easiest way is with two pictures on top of each other and changing the transparency of the top:

div {
  width: 50px;
  height: 50px;
  background: url('https://i.stack.imgur.com/G1BtB.jpg') no-repeat -20px -14px;
  overflow: hidden;
}

.item:hover {
  opacity: 0;
  transition: all 500ms ease;
}

.item-wrapper {
  background-position: -20px -88px;
}
<div class="item-wrapper">
  <div class="item"></div>
</div>
 2
Author: br3t, 2017-07-29 20:19:15