I'm trying to figure out how to properly edit SVG files. I have the following code:
<svg width="80" height="50" viewBox="0 0 80 50" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="80" height="50" rx="4" fill="#497284" fill-opacity="0.09"/><path d="M70 11.8092V11.5C70 8.42972 68.2774 6 64.6107 6C60.8949 6 59 8.38554 59 11.5663C59 14.6145 61.1409 17 64.66 17C66.8993 17 68.9172 15.9618 70 14.1727L68.1298 13.2229C67.2931 14.4598 66.3826 15.2329 64.6846 15.2329C62.5682 15.2329 61.2394 13.5763 61.2148 11.8092H70ZM61.3378 10.3072C61.6085 8.82731 62.8881 7.72289 64.6107 7.72289C66.3826 7.72289 67.5145 8.76104 67.7852 10.3072H61.3378Z" fill="#586D8C"/></svg>it creates a box with a letter 'e' in the corner. I want to change the letter to be some sign (in my case - the logical operator 'NOT' sign). I found out that I could use the text tag as follows:
<svg width="80" height="50" xmlns="http://www.w3.org/2000/svg"><g><title>background</title><rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/></g><g><title>Layer 1</title><rect x="0.114941" y="0.229882" id="svg_1" fill-opacity="0.09" fill="#497284" rx="4" height="50" width="80"/><path id="svg_2" fill="#586D8C" d="m57.5,34c4.1421,0 7.5,-3.3579 7.5,-7.5c0,-4.1421 -3.3579,-7.5 -7.5,-7.5c-3.803,0 -6.9451,2.8306 -7.434,6.5l-37.066,0l0,3l37.2697,0c0.8752,3.1711 3.7808,5.5 7.2303,5.5z" clip-rule="evenodd" fill-rule="evenodd"/><text transform="matrix(1.6882815594622569,0,0,1.3037036829424493,-58.03884193994182,9.82972205136589) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_7" y="10.069448" x="66.18055" stroke-width="0" fill="#586D8C">¬</text></g></svg>But I prefer not to. I'm trying to figure a way to create that symbol with the path tag. The wanted final result should be:
What is the proper way to achieve it?