Bild mit SVG-Graphik überlagern

[epross]

Hallo zusammen,

ich möchte gern ein Bild mit einer Strichgraphik, die als SVG-Datei vorliegt, überlagern.
Dieser überlagernde Teil sollte transparant, skalierbar und drehbar sein.

Als Beispiel habe ich eine SVG-Datei linie.svg generiert. Die Graphikfarbe ist normalerweise schwarz (in SVG stroke:black), könnte aber auch teilweise eine ander Farbe sein (bspw. in SVG stroke:red), sogar weiß (in SVG stroke:white).

Es sollte dann so ähnlich aussehen wie in den Punkten 8. und 9. (hurricanes, faces) von
http://io9.com/5985588/15-uncanny-examples-of-the-golden-ratio-in-nature


Viele Grüße

Erhard

 

[Stefan_G.]

AW: Bild mit SVG-Graphik überlagern

Hallo Erhard,

soll das Ergebnis so aussehen?:

Oder kann es auch so aussehen?:

Im ersteren Fall wurde Dein png-File "transparent gemacht" und über das Originalbild eingefügt.
Das letztere ist ein Screenshot aus dem FF-eigenen Dialog Ausschneiden, in dem die Markierung "Goldener Schnitt" eingestellt wurde (FF hat auch noch weitere Markierungs- und Ausschneidemöglichkeiten u.a. die Goldene Spirale mit eingebaut).


Gruß
Stefan

 

[epross]

AW: Bild mit SVG-Graphik überlagern

Hallo Stefan,

...
soll das Ergebnis so aussehen?:
...

Oder kann es auch so aussehen?:
...

Im ersteren Fall wurde Dein png-File "transparent gemacht" und über das Originalbild eingefügt.
Das letztere ist ein Screenshot aus dem FF-eigenen Dialog Ausschneiden, in dem die Markierung "Goldener Schnitt" eingestellt wurde (FF hat auch noch weitere Markierungs- und Ausschneidemöglichkeiten u.a. die Goldene Spirale mit eingebaut).

Gruß
Stefan

danke erst einmal für die Mühe. Das erstere ist gemeint.
Ich möchte diesen Rahmen aber auch skalieren und drehen können.

Goldener Schnitt und Goldenen Spirale ist zwar denkbar, aber ich brauche eine gewisse Variabilität (s. Face-Beispiel) bei der Graphik, die ich händisch mit SVG-Befehlen generiere.

Wie ist denn der beste Weg SVG -> PNG, denn ich brauche ja definitiv ein transparentes Rasterbild.

Viele Grüße

Erhard

 

[Mecki14]

AW: Bild mit SVG-Graphik überlagern

Mit dem Programm Inkscape kann man SVG-Dateien bearbeiten und exportieren in diverse Formate, u.a. in das PNG-Format.

 

[Stefan_G.]

AW: Bild mit SVG-Graphik überlagern

Hallo Erhard,

Dein Workflow müsste wie folgt aussehen:

1. Export der svg-Grafik nach png
2. Transparenz der png-Grafik erzeugen (in FF über "Maskieren" und anschl. "Bild & Maske"/"Maskiertes Bild speichern als ....") und abspeichern.
3. Originalbild in FF laden.
4. Gewünschte Lage, Größe, Drehung und Transparenz kann mit FF-Funktion "Logo einblenden" eingestellt werden, wobei das Logo das transparent abgespeicherte png-Bild aus Punkt 2 ist.
5. OK klicken, fertig

Es sieht dann z.B. so aus:

Gruß
Stefan

 

[epross]

AW: Bild mit SVG-Graphik überlagern

Hallo Harald,

Mit dem Programm Inkscape kann man SVG-Dateien bearbeiten und exportieren in diverse Formate, u.a. in das PNG-Format.

danke, mit Inkscape hatte ich meine SVG-Datei standardkonform gemacht und auch den PNG-Export genutzt.

Zunächst dachte ich, es ginge nur ein Export der ganzen DIN-A4-Seite. Aber gerade habe ich im Exportdialog gesehen, das dieser doch sehr variabel ist.

Vielen Dank

Erhard

 

[epross]

AW: Bild mit SVG-Graphik überlagern

Hallo Stefan,

Hallo Erhard,

Dein Workflow müsste wie folgt aussehen:

1. Export der svg-Grafik nach png
2. Transparenz der png-Grafik erzeugen (in FF über "Maskieren" und anschl. "Bild & Maske"/"Maskiertes Bild speichern als ....") und abspeichern.
3. Originalbild in FF laden.
4. Gewünschte Lage, Größe, Drehung und Transparenz kann mit FF-Funktion "Logo einblenden" eingestellt werden, wobei das Logo das transparent abgespeicherte png-Bild aus Punkt 2 ist.
5. OK klicken, fertig

...
Gruß
Stefan

danke. Es hat genau so funktioniert, wie ich mir das vorgestellt habe.

Die Möglichkeiten von Logo einblenden kannte ich so noch nicht.

Viele Grüße

Erhard

 

[epross]

AW: Bild mit SVG-Graphik überlagern

... sogar die weiße Linie aus der SVG-Graphik ist wie gewünscht - zwischenzeitig war es wie Weißer Adler auf weißem Grund ;-) - gekommen.

Erhard

 

[Mecki14]

AW: Bild mit SVG-Graphik überlagern

Der von Stefan beschriebene Weg ist natürlich in Ordnung, vor allem wenn man dem PNG-Bild selbst noch Transparenz verleihen möchte. Ist dies nicht geplant, funktioniert auch

• In Bild & Maske "Maskierten Ausschnitt kopieren"
• Maskendialog beenden und Originalbild laden
• Retusche aufrufen und "Quelle klonen" einstellen
• Im Kontextmenü des linken Bildes "Zwischenablage als Objekt einfügen" wählen
• Jetzt kann die Größe angepasst und über das mittige weiße Rechteck gedreht werden
• Der Abschluss erfolgt über Klick mit der rechten Maustaste

Übrigens, eine aus Inkscape zum PNG-Format exportierte SVG-Datei hat bereits die gewünschte Transparenz. Beim Laden der PNG-Datei in FixFoto öffnet sich automatisch der Maskierungsdialog.

 

[epross]

AW: Bild mit SVG-Graphik überlagern

Hallo Harald,

Der von Stefan beschriebene Weg ist natürlich in Ordnung, vor allem wenn man dem PNG-Bild selbst noch Transparenz verleihen möchte. Ist dies nicht geplant, funktioniert auch

• In Bild & Maske "Maskierten Ausschnitt kopieren"
• Maskendialog beenden und Originalbild laden
• Retusche aufrufen und "Quelle klonen" einstellen
• Im Kontextmenü des linken Bildes "Zwischenablage als Objekt einfügen" wählen
• Jetzt kann die Größe angepasst und über das mittige weiße Rechteck gedreht werden
• Der Abschluss erfolgt über Klick mit der rechten Maustaste

Das ist genau der Ablauf, wie es im Thema Bild zerreißen http://www.ffsf.de/showthread.php?t=16717 schon beschrieben wurde.

Übrigens, eine aus Inkscape zum PNG-Format exportierte SVG-Datei hat bereits die gewünschte Transparenz. Beim Laden der PNG-Datei in FixFoto öffnet sich automatisch der Maskierungsdialog.

Das hatte ich auch schon freudig zur Kenntnis genommen, dass ich hier keine eigene Maske generieren musste.

Danke noch einmal für deine und Stefans schnelle und kompetente Unterstützung.

Erst gestern wurde das Problem von einer Bekannten an mich herangetragen - und schon heute ist die perfekte Lösung da. Tolles Forum.

Viele Grüße

Erhard

 

[HeiM]

AW: Bild mit SVG-Graphik überlagern

Ich habe mir zwar den Link angesehen, aber mir erschließt sich der Sinn des Ganzen nicht.
Wozu soll so etwas am Ende gut sein?

 

[epross]

AW: Bild mit SVG-Graphik überlagern

Lieber Heinz,

Ich habe mir zwar den Link angesehen, aber mir erschließt sich der Sinn des Ganzen nicht.
Wozu soll so etwas am Ende gut sein?

eine Bekannte will eine Projektarbeit im Mathe-Kurs über Goldenen Schnitt und Fibonaccische Folgen schreiben.

Hierzu sollen auch Beispiele aus der Natur, Biologie und Architektur herangezogen werden.

Für die Bildüberlagerung muss dabei das entsprechende Bild mit einer solchen zweidimensionalen Graphik überlagert werden, um diese harmonisch - im goldenen Schnitt befindlichen - angeordneten Grundformen (Quadrate, Rechtecke oder Spiralen) zu veranschaulichen.

Viele Grüße

Erhard

Übrigens Heinz, ich denke immer an das Alte Rathaus in Leipzig, wenn mir der goldenen Schnitt einfällt.

 

[R. Steichele]

AW: Bild mit SVG-Graphik überlagern

Hallo Erhard,

da wäre das Einfachste gewesen, den goldenen Schnitt in FixFoto einzublenden und dann einen Screenshot zu machen

 

[epross]

AW: Bild mit SVG-Graphik überlagern

Hallo Robert,

Hallo Erhard,

da wäre das Einfachste gewesen, den goldenen Schnitt in FixFoto einzublenden und dann einen Screenshot zu machen

sorry, aber ganz so einfach ist das Anliegen nicht.

Bei einem Bild kommen ggf. unterschiedliche ein- und zweidimensionale Muster zum Einsatz, wie

• ein oder mehrere Rechtecke mit Seitenlängen im Verhältnis des goldenen Schnittes
• eine Strecke geteilt im Verhältnis des goldenen Schnittes
• spiralförmig angeordnete Quadrate, die die Seitenlänge der Fibonaccischen Zahlen haben
• Graphikelemente in unterschiedlichen Farben und beliebigen Rotationswinkeln
• fünfzackiger Stern, wo das Verhältnis des goldenen Schnittes mehrfach auftaucht
• ...

Deswegen bin ich ja von der vorgeschlagenen Lösung so begeistert, weil sie mir all diese Möglichkeiten erlaubt.

Viele Grüße

Erhard

PS: Die Fibonaccische Folge ist 1, 1, 2, 3, 5, 8, 13, ... (jede Zahl ergibt sich als die Summe der zwei Vorgänger).
PSS: Der Grenzwert der Quotienten benachbarter Fibonaccischen Zahlen ist das Verhältnis des goldenen Schnittes. Woher die Natur nur all dieses weiß?

 

[HeiM]

AW: Bild mit SVG-Graphik überlagern

Eberhard,
interesant und nun auch klar - danke, wobei GS, Spirale etc. keine Unbekannten sind.