Как сделать четкую рамку при наведении (SVG)?

Изучаю SVG графику. Пытаюсь сделать логотип, хочу что бы при наведении заливка менялась у самого блока и у буквы, это сделать получилось. Так же хотелось, чтобы появлялась обводка у блока, но если делать это средствами SVG, то она получается совершенно не четкая:

Как это можно исправить?

Ответ

В первый ответ добавил красную рамку style="border:1px solid red;"чтобы видно было реальные границы svg Именно столько места 150x150px будет занимать иконка при верстке Html странички, образуя тем самым большие отступы от остальных элементов странички. Нужно расширить viewBox но всего на 6px, чтобы сделать отступы минимальными - 3px
И так: viewBox="-3 -3 56 56"
Ниже полный код. Красную рамку оставил для наглядности:

UPDATE
По замечаниям в комментариях Текст находится на слой выше полигона поэтому экранирует :hover на букве. Для устранения экранирования применим к тексту стиль pointer-events="none", который сделает текст прозрачным для событий мышки.
E