Ich habe ein Logo als SVG (Vektorgrafik) mit einem kleinen Fehler drin. Die Farbe in der Mitte wird über den ganzen Kreis ausgelegt und verursacht einen 1-2px großen Rand. Dieser Rand ist bei gewissen Icons leider sichtbar, wenn ich es in PNG konvertiere und die Favicons generiere. Am deutlichsten sichtbar ist dieser Rand oben, unten, links und rechts.
Gibt es eine einfache Möglichkeit, diesen Fehler zu beheben? Oder benötige ich dafür Adobe Illustrator? Meine bisherige Lösung ist es, das Bild 2px größer zu konvertieren als es sein müsste und diese 2px dann für das PNG Format auszuschneiden. Jedoch kann ich so niemals die SVG direkt verwenden..
Der transform Wert ist bei allen Ebenen gleich groß.
Code
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3756.09 3756.49"><title>moner.ooo</title><path d="M4128,2249.81C4128,3287,3287.26,4127.86,2250,4127.86S372,3287,372,2249.81,1212.76,371.75,2250,371.75,4128,1212.54,4128,2249.81Z" transform="translate(-371.96 -371.75)" style="fill:#f26821"/><path id="_149931032" data-name=" 149931032" d="M2250,371.75c-1036.89,0-1879.12,842.06-1877.8,1878,0.26,207.26,33.31,406.63,95.34,593.12h561.88V1263L2250,2483.57,3470.52,1263v1579.9h562c62.12-186.48,95-385.85,95.37-593.12C4129.66,1212.76,3287,372,2250,372Z" transform="translate(-371.96 -371.75)" style="fill:#193e4c"/><path id="_149931160" data-name=" 149931160" d="M1969.3,2764.17l-532.67-532.7v994.14H1029.38l-384.29.07c329.63,540.8,925.35,902.56,1604.91,902.56S3525.31,3766.4,3855,3225.6H3063.25V2231.47l-532.7,532.7-280.61,280.61-280.62-280.61h0Z" transform="translate(-371.96 -371.75)" style="fill:#102831"/></svg>