Veröffentlicht am

Selektiver SVG-Export mit Affinity Designer

Vielleicht hast du auch schon die neue Alternative zu Adobe Illustrator, den Affinity Designer, getestet und ein paar coole Features entdeckt. Viele meiner SVG-Dateien entstehen zunächst als Zeichnung in Illustrator. Dort habe ich immer die Möglichkeit vermisst, einzelne Objekte einer Zeichnung als SVG zu exportieren. Es kommt häufig vor, dass ich eine komplexere Zeichnung um weitere Elemente ergänzen möchte, während ich schon im Prozess der Animation im Code-Editor bin. In Illustrator bedeutete das, dass ich mir nach einem SVG-Export immer das oder die entsprechenden SVG-Elemente aus der Textdatei suchen und anschließend kopieren musste.

Export – Auswahl ohne Hintergrund

Im Programm Affinity Designer kannst du einfach das bzw. die gewünschte(n) Elemente oder Gruppierungen markieren und dann exportieren. In der folgenden Abbildung habe ich die gruppierten Elemente des Hinterrades markiert.

Auswahl der Gruppe Hinterrad
Auswahl der Gruppe Hinterrad

Möchtest du jetzt nur dieses Hinterrad als SVG-Datei exportieren, wählst du einfach aus dem Menü Datei | Exportieren… (Shortcut: ⌥⇧⌘S) und es öffnet sich folgendes Dialogfenster: „Selektiver SVG-Export mit Affinity Designer“ weiterlesen

Veröffentlicht am

P210 – Volvo Duett

Volvo Duett - P210

Zum Einstieg in meine neue Kategorie P210 habe ich heute mal einen Volvo Duett – P210 gezeichnet. Bei diesem Fahrzeug handelt es sich um die 2. Baureihe dieses legendären Schwedenklassikers mit ungeteilter Frontscheibe auf Basis des PV544, allerdings mit Leiterrahmen und B18 Motor.

Die Zeichnung sieht dem Beitragsbild zwar ganz ähnlich, ist aber eine Vektorgrafik, die sich frei skalieren lässt (kein Qualitätsverlust). Die Zeichnung habe ich mit Hilfe eines Fotos in Adobe™ Illustrator™ CS 5.5 erstellt und als SVG Datei exportiert.

Volvo Duett - P210 als SVG-Datei

 

Volvo Duett – P210 als Vektorgrafik (SVG)

Der Volvo Duett  animiert

Außerdem lassen sich SVG-Dateien auch ganz leicht animieren. Hier siehst du ein Beispiel wie man dem Duett ein bisschen Leben in der digitalen Welt einhauchen kann.

Mit einem Rechtsklick auf die Grafik kannst du die SVG-Datei in einem neuen Tab öffnen. Dort kannst du dir dann den Quelltext ansehen.

Die Animationen habe ich in Chrome, Safari und Firefox getestet. Firefox hat ein paar Probleme mit Mustern (Pattern) in SVG. Das in Falu Rödfärg gestrichene Haus ist dort transparent.

Volvo Duett - P210 animiert

Volvo Duett – P210 animiert 

Um die Animation erneut zu starten klicke bitte auf das Bild und anschließend auf den Tankdeckel

Veröffentlicht am

Geplante Obsoleszenz – HP 2840

Es ist schon eine Pest mit der geplanten Obsoleszenz in unserer wirtschaftspolitisch geprägten und auf stetigen Gewinn ausgerichteten Gesellschaft.

Vor einigen Jahren kaufte ich mir einen HP 2840 Multifunktionsdrucker. Mit einigen Scherereien gelang es mir bisher immer wieder das Gerät auch unter Mac OS X zu betreiben. Der Support seitens HP war immer dürftig. Selbst als das Gerät gerade erst ein Jahr alt war. Der Nachfolger stand bereits bei HP auf der Verkaufsliste.

Nun habe ich vor einiger Zeit vier neue Toner Cartridges (selbstverständlich nicht von HP) gegönnt und ein paar hundert Seiten später meldet der Drucker:

„Der optische Fotoleiter muss ausgetauscht werden!“

und verweigert fortan komplett den Dienst.

Heute habe ich es mal geschafft ein wenig im Netz zu recherchieren und siehe da, es gibt eine Lösung für dieses „Problem“. Hiermit hat es bei mir ganz einfach geklappt: (http://www.fixyourownprinter.com/forums/printer/60138). Eine Gewähr kann ich für diese Lösung selbstverständlich nicht übernehmen, aber ein Versuch ist es auf jeden Fall wert.

Lösung – Chiptausch Bildtrommel HP 2840

Die Lösung habe ich im folgenden YouTube Video von Gustav Ludewig kommentiert:

Veröffentlicht am

SVG Pattern – Flechtwerk

SVG Pattern Flechtwerk animiertSonntagabend und wieder ein neues SVG-Pattern. Die Konstruktion ist recht einfach. Auf einem 150 x 150 Pixel großen Pattern wird ein Quadrat von 150 x 150 Pixeln angelegt. Dieses Quadrat bildet den Vordergrund. Auf dem Quadrat werden vier weitere Quadrate von 25 x 25 Pixeln angelegt. Diese vier Quadrate bilden den Hintergrund. Die darüber gezeichneten Linienelemente (Breite: 2px) deuten die Kreuzungen des Musters an. Die Linien, die auf auf dem Rand des Musters liegen sind in doppelter Strichstärke (4px) angelegt. Die Dreiecke mit der gleichen Farbe der Linien und einer Deckung von 30% (opacity=“0.3″) verstärken den dreidimensionalen Effekt des Musters.

SVG Pattern Flechtwerk

Veröffentlicht am

SVG Pattern – Flechtmuster Wabe

In diesem Beitrag siehst du ein typisches Wabenflechtmuster eines Stuhls. Ich habe mir das Muster angesehen und danach ein Pattern in SVG konstruiert. Das dargestellte Muster habe ich in der linken Abbildung auf 50% verkleinert und damit das Quadrat gefüllt. Im rechten Quadrat habe ich die Transparenz auf 50% reduziert und das originale Pattern im Quadrat platziert.

SVG Pattern Wabenmuster

Wenn du dir das Muster ansehen möchtest, kannst du dir Abbildung mit rechten Maustaste in einem neuen Tab oder Fenster ansehen und dort in den Quelltext schauen.

Beispiel auf Codepen.io

See the Pen Comb seamless repeating pattern by Norbert Mesch (@itsnorbat) on CodePen.

Veröffentlicht am

SVG Pattern – 3D Webmuster

Im dargestellten Beispiel siehst du das durch die Animation herausgehobene 3D Webmuster, das sich nahtlos wiederholt. Weiter unten habe ich das Muster mit Hilfe des transformPattern-Attributes und der Funktion rotate() gedreht und mit anderen Farben gefüllt. Das Muster ist darüber hinaus mit der Funktion scale() im transformPattern-Attribute um den Faktor 2 von 120x80px auf 240x160px vergrößert.

SVG 3D weaving pattern

Hinweis: Mit einem Rechtsklick auf die Abbildung kannst du die SVG-Datei in einem eigenen Tab öffnen und dir dort den Quelltext des Musters ansehen.

Farbvariationen mit Drehungen/Skalierungen [transformPattern=“rotate(x) scale(x)“]

 

SVG 3D weaving pattern red 90°

SVG 3D weaving pattern yellow 270°

Beispiel auf Codepen.io

In meinem Beispiel auf codepen.io habe ich zwei Slider implementiert. Dort kannst du das Muster über zwei Slider rotieren und/oder skalieren.

See the Pen SVG 3D seamless weaving pattern by Norbert Mesch (@itsnorbat) on CodePen.