SVG Datei minimal bearbeiten

Luke

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>

PixelPatron

Heyho,

hier im Forum ist bisher immer Andy der SVG Spezialist gewesen. Ich meine das man SVG Dateien nicht direkt bearbeiten kann.

leon20spr

Moin Luke,

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

PixelPatron

Zitat von leon20spr

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

leon20spr

Zitat von evarioo

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

AI-Dateien sind die Projektdateien von Adobe Illustrator, diese kannst du in jegliche Formate exportieren u.a. SVG. Man kann aber auch SVG-Dateien in Adobe Illustrator laden und bearbeiten.

leon20spr

SVG-Dateien muss man sich in Adobe Illustrator, im Vergleich zu den AI-Dateien, noch etwas auseinandernehmen...

PixelPatron

Ach? Gott sei Dank sind Grafiken nie meins gewesen aber gut zu wissen! Danke für den Input!

aebian

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)

Luke

Zitat von aebian

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

Blacksonny

Wenn ich das jetzt nicht falsch deute könnte vielleicht ein Versuch nicht schaden bei jedem path style „fill-rule:evenodd;“ einzufügen. Das sollte die Überlappung von Formen korrekt interpretieren.

aebian

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;

XML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 3757 3757" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <path d="M3660.47,2471.15C3615.57,2606.18 3555.75,2734.4 3482.98,2853.85L2691.29,2853.85L2691.29,1859.72L1877.98,2673.03L1597.36,2392.42L1597.34,2392.42L1064.67,1859.72L1064.67,2853.86L657.42,2853.86L273.153,2853.93C200.348,2734.44 140.511,2606.19 95.596,2471.12L657.46,2471.12L657.46,891.25L1878.04,2111.82L3098.56,891.25L3098.56,2471.15L3660.47,2471.15Z" style="fill:rgb(242,104,33);"/>
    <g id="_149931032" transform="matrix(1,0,0,1,-371.96,-371.75)">
        <path d="M2250,371.75C1213.11,371.75 370.88,1213.81 372.2,2249.75C372.46,2457.01 405.51,2656.38 467.54,2842.87L1029.42,2842.87L1029.42,1263L2250,2483.57L3470.52,1263L3470.52,2842.9L4032.52,2842.9C4094.64,2656.42 4127.52,2457.05 4127.89,2249.78C4129.66,1212.76 3287,372 2250,372L2250,371.75Z" style="fill:rgb(25,62,76);fill-rule:nonzero;"/>
    </g>
    <g id="_149931160" transform="matrix(1,0,0,1,-371.96,-371.75)">
        <path d="M1969.3,2764.17L1436.63,2231.47L1436.63,3225.61L1029.38,3225.61L645.09,3225.68C974.72,3766.48 1570.44,4128.24 2250,4128.24C2929.56,4128.24 3525.31,3766.4 3855,3225.6L3063.25,3225.6L3063.25,2231.47L2249.94,3044.78L1969.32,2764.17L1969.3,2764.17Z" style="fill:rgb(16,40,49);fill-rule:nonzero;"/>
    </g>
</svg>

Alles anzeigen

Syntafin

Ich möchte mal noch anmerken das es auch Inkscape gibt, das ebenfalls SVG kann war da glaube ich sogar das Standardformat statt eine Insellösung.

Luke

Vielen Dank für die Hilfe und die ausführliche Erklärung. Mein Problem ist damit gelöst

PixelPatron

Falls nicht geschehen kannst du ja noch unter antworten eine festlegen die am hilfreichsten war.

Cool das du hier Hilfe gefunden hast.

PS: Inkscape kannte ich gar nicht und Versuche später Mal mein Logo in Pfade zu wandeln. Mal sehen ... Ich denke ich werde berichten in einem neuen Thema.

Luke 5. Januar 2025 um 09:47