SVG Datei minimal bearbeiten

  • 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>
  • Moin Luke,

    ich bearbeite meine Vektorgrafiken immer mit Adobe Illustrator und habe bisher keine bessere Möglichkeit gefunden.

    Moment. SVG Dateien oder AI Dateien? AI wird exportiert zu SVG. SOWEIT ich das weiss. :) bitte belehre mich eines besseren

    WEBDEVELOPMENT WITH <3 - EVARIOO

    Private note? Visit prvtnte.de

    Einmal editiert, zuletzt von evarioo (3. Januar 2025 um 12:19)

  • SVG Dateien kann man dennoch editieren, sind ja quasi Grafiken in mathematischer Form damit diese ohne qualitaetsverlust Skalierbar sind.
    Einen Illustrator braucht es da auch nicht unbedingt, ist jedoch vom Vorteil ein Vektor-Program zu haben. Illustrator ist Industry-Standard, Alternativen sind z,B. die Serif Produkt-Familie mit Afifnity Designer 2.

    Die genannte Datei des TE's sieht dort so aus:


    Kann das Problem nicht nachvollziehen, anbei eine exportierte PNG davon. (Falls es schon geloest wurde hab ich das dann wohl uebersehen)

  • SVG Dateien kann man dennoch editieren, sind ja quasi Grafiken in mathematischer Form damit diese ohne qualitaetsverlust Skalierbar sind.

    Ganz genau, aber die Quellcode bearbeitung bekomme ich nicht hin, der Zahlensalat ist zu riesig..

    Die AI Datei steht mir auch zur Verfügung. Ich habe mich mal dran gewagt und wie ich es mir dachte, das M ist ein Dicker Kreis im Hintergrund, daher auch der 1-2px große Rand/Linie.

    Gibt es da eine einfache Methode, dass zu verhindern? Oder muss ich mir das M nachzeichen?

    Hex-Farben:
    Oben: #193e4c
    Mitte: #f26822
    Unten: #102831

  • Ach jetzt verstehe ich was du meinst.

    Anbei die behobene Version. Ich habe das M nun als M und nicht als Kreis in die SVG gepackt.
    Falls jemand wissen will wie das einfach geht:

    1) Oberen und unteren Layer duplizieren (COMMAND + J)
    2) Via "Layer >> Geometry >> Subtract" die beiden Layer aus dem M-Kreis entfernen
    3) Danach musste ich noch ein paar Curves separieren weil das M nicht komplett alleine da stand.

    Da man hier keine SVGs hochladen kann: https://groupfiles.nethavn.group/f/8f1c2f2834ed4efaac15/

    SVG Code der Datei;

    Musician, Programmer, Linux Geek and what not. more...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!