Frage zum Wiki-Artikel „SVG/Farben“

[Matthias Scharwies]

Guten Morgen!

Aufgrund der Diskussionen über noch nicht eingeführte SVG 2-Features bin ich über SVG/Farben gestolpert. Es erinnert teilweise noch an die alten Eigenschaftsseiten und doppelt so die Referenz; teilweise sind nicht implementierte oder sogar entfernte Features gelistet.

Die Spec behandelt das Thema in:

• Chapter 13: Painting: Filling, Stroking and Marker Symbols
• CSS Fill and Stroke Module Level 3

Alle Tutorials und Wikibooks konzentrieren sich nur auf fill und stroke; @Rolf B hatte schon mal das Beispiel zu paint-order ausgebaut.

Ich würde das neu aufbauen wollen und habe ein paar Fragen/Thesen:

1. Neuer Titel "Painting in SVG" oder so lassen, damit man keine Links ändern muss
2. Eher beschreiben, was heute geht, als Eigenschaften zu beschreiben, die eben gar nicht implementiert sind, bzw. nie werden (context-stroke (geht wohl in Firefox), fill-image und fill-position, etc)
3. color eher hinten bei den Farben des Markers einführen - es macht keinen Sinn color-interpolation, etc vor fill einzuführen.
4. Marker in diesen Kurs integrieren, die werden halt im Grafikobjekt gezeichnet, deshalb gehören sie schon dazu.
5. Dieses Bild so lassen oder die Marker wirklich durch marker realisieren? (Für die Bezierkurven könnte man die Linien ja lassen?)

Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

5. Dieses Bild so lassen oder die Marker wirklich durch marker realsieren? (Für die Bezierkurven könnte man die Linien ja lassen?)

Ist das zu bunt?

Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich würde das neu aufbauen wollen und habe ein paar Fragen/Thesen:

Ich hab auch Fragen: Wer ist das Zielpublikum? An vielen Stellen hab ich den Eindruck, die SELFHTML-Doku wendet sich an Anfänger.

An anderen Stellen (wie dieser) ackert man sich an Themen ab, mit denen kaum ein Fortgeschrittener in Berührung kommt.

Meine These: Nach all den Jahren ist immer noch nicht klar, wer das Zielpublikum ist.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Ich würde das neu aufbauen wollen und habe ein paar Fragen/Thesen:

Ich hab auch Fragen: Wer ist das Zielpublikum? An vielen Stellen hab ich den Eindruck, die SELFHTML-Doku wendet sich an Anfänger.

Auf jeden Fall!

An anderen Stellen (wie dieser) ackert man sich an Themen ab, mit denen kaum ein Fortgeschrittener in Berührung kommt.

Genau das muss jetzt bereinigt werden. Nicht implementierte Sachen raus und auf den Anfänger-Artikel einen für Profis draufgesetzt.

Meine These: Nach all den Jahren ist immer noch nicht klar, wer das Zielpublikum ist.

🖖 Живіть довго і процвітайте

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen!

Ich habe SVG/Farben neu sortiert:

1. Painting - wie wird in SVG „gemalt“?

• sehr kurze Einführung
• nur 3 Bsp. zu fill, fill-rule und fill-opacity

2. SVG/Farben/Kontur

• gleich geblieben
• unten 2 Bsp zu paint-order und vector-effect (neu)

3. SVG/Farben/Markierungen

• völlig neu aufgebaut - das hatte ich 2015 auf die Schnelle gemacht, da gab es einiges zu tun
• 1. Bsp erklärt markerUnits
• Interessant wird's bei context-fill_und_context-stroke. Werft mal euren Firefox an, wenn ihr den noch auf der Platte habt und schaut euch das an. (BTW: Ohne schließenden body-Tag stürzt Frickl ab! Hatte 10min gesucht, warum - immerhin hatte der W3C- Validator nicht gemeckert.)

Fazit: Markierungen sind wie Verläufe mächtige Werkzeuge, jeodch eben deshalb im Alltag nicht zu gebrauchen Das galt für SVG-filter genauso, die Umsetzung der Algorithmen in CSS finde ich genial, wenn man das bei marker doch auch so machen könnte:

polyline {
marker-knockout-left:  10px circle;
marker-knockout-right: 10px circle;
}

Es lag wohl an Rendering-Problemen bei gekrümmten Pfaden, dass das nicht implementiert wurde. (Oder jemand hat sch an den 10px für dimensionsloe Einheiten gestoßen)

Und dieses „Icon“ habe ich gleich bei den Cards weiterverwendet:

Was haltet ihr davon? So können wir Icons und mehr Links oder einen längeren Linktext kombinieren.

Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch!

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen!

Gestern am Stammtisch besprochen

Und dieses „Icon“ habe ich gleich bei den Cards weiterverwendet:

Was haltet ihr davon? So können wir Icons und mehr Links oder einen längeren Linktext kombinieren.

Vorteil gegenüber den großen Cards

• benötigt nur ein Icon
  • Icon aus Tutorial haben ein -float:right, das muss hier entfernt werden
• Unterseiten als Liste verlinkt
  • muss Liste überhaupt in div geschachtelt werden? - Ja, wenn „Überschrift“ dabei ist.
• Man könnte die (Über)-Schrift (.cards-container a b{font-size:1.5em} größer darstellen. Dann müsste aber evtl. man die langen Überschriften kürzen.
  • Die Überschrift "Datenvisualisierung" wäre in 1.5em länger als der Platz und würde das Icon über den rechten Rand hinausschieben.
  • Ich hatte grad überlegt, ob man dann nur die langen Überschriften über die ganze Breite ziehen soll → dann wären die Icons aber nicht in der gleichen Höhe.
  • Sollte man alternativ alle Überschriften in eine eigene Zeile und nur die Listen und das Icon in das kleine grid {1fr 120px}packen?
• Evtl noch ein p.teaser, der mit cards-container .teaser { grid-column: 1 / -1;}über die ganze Breite geht.

Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch!

War schön gestern.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen,

so langsam kommt es mir wie ein Selbstgespräch vor (soll ja aber therapeutisch wirken):

.card {
  display: grid;
  grid-template-columns: 1fr 80px;
}
.card a b {
  font-size: 1.2em;
}

Die Icons wären immer noch zu erkennen.

Die Überschrift ist 1.2em groß und fett → also deutlich erkennbar, hat in Kombination mit dem kleineren Icon aber doch mehr Platz.

Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

so langsam kommt es mir wie ein Selbstgespräch vor

ja, sorry. Meine Zeit ist im Moment knapp bemessen. Heute ist ein Regentag, da geht's mal.

Wie heißt's so schön: nit zusammejeschisse is jenuch jelobt 😉. Aber ein paar Kotbröckchen hätte ich. Abgesehen von einem großen Lob für die Fleißarbeit und Kreativität, mit der Du das angegangen bist.

Das Layout für die Karten braucht noch ein bisschen Feintuning, find ich, in "Standalone SVGs" ist z.B. eine große Lücke zwischen Überschrift und Rest. Das liegt daran, dass es kein Template für die rows gibt. Ich hab mal in den DevTools ein "grid-template-rows: auto 1fr" eingesetzt, dann sieht es besser aus.

Sollte man nicht auch versuchen, ein einheitliches Layout für die Karten zu haben? Du hast jetzt Cards, wo die Überschrift eine Spalte belegt, und andere, wo sie so breit ist, dass sie 2 Spalten braucht. Das steuerst Du mit der teaser-Klasse - eine schlechte Namenswahl für diesen Zweck.

Also:

• template-rows sollte verwendet werden
• Die Cards sollten über eine Vorlage generiert werden
• Layout-Optionen dann per Vorlagenparameter.

Ich stelle mir das so vor:

{{card |titel=Kartenvorlage |titel_breit=Kartenvorlagenüberschrift |bild=kartenbild.svg |alt=Ein Kartenbild |Text Text Text Text Text Text |footer=Kartenfooter-Text, der über die ganze Breite geht }}

titel oder titel_breit wird alternativ verwendet. Der footer ist ebenfalls optional. Bild und vor allem der alt-Text für's Bild sind Pflicht

Ich frage mich dann auch, ob Grid das richtige Layoutmodell ist. Ich fände es eigentlich besser, wenn das Bild gefloatet würde, damit der Kartentext im Zweifelsfall um das Bild herumfließen kann. Ich bastele mal ein bisschen, aber jetzt muss ich erstmal wieder vom PC weg.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

so langsam kommt es mir wie ein Selbstgespräch vor

ja, sorry. Meine Zeit ist im Moment knapp bemessen. Heute ist ein Regentag, da geht's mal.

Bei uns 36° - regnen tut's erst heut' nach um 5 und da wsl. nur woanders.

Wie heißt's so schön: nit zusammejeschisse is jenuch jelobt 😉. Aber ein paar Kotbröckchen hätte ich. Abgesehen von einem großen Lob für die Fleißarbeit und Kreativität, mit der Du das angegangen bist.

Das Layout für die Karten braucht noch ein bisschen Feintuning, find ich,

Ja!

in "Standalone SVGs" ist z.B. eine große Lücke zwischen Überschrift und Rest.

Problem ist wohl die Anordnung - jede Reihe legt die Höhe fest und die große Text in SVG-Card in Kombination mit den Unterseiten „sprengt“ das Layout. (Da will ich bis Mittwoch ein kleineres Icon erstellen und dann alles einheitlich haben.

Dann wird es aber trtzdem kleinere Cards mit nur 2 Unterseiten und längere haben (Im CSS-Bereich haben Flexblox und Grid 8 -Unterseiten)

Das liegt daran, dass es kein Template für die rows gibt. Ich hab mal in den DevTools ein "grid-template-rows: auto 1fr" eingesetzt, dann sieht es besser aus.

Sollte man nicht auch versuchen, ein einheitliches Layout für die Karten zu haben? Du hast jetzt Cards, wo die Überschrift eine Spalte belegt, und andere, wo sie so breit ist, dass sie 2 Spalten braucht. Das steuerst Du mit der teaser-Klasse - eine schlechte Namenswahl für diesen Zweck.

Der ist eigentlich für einen längeren Text unten gedacht. @TS hatte ja an einen kleinen attention-getter a la "Was die Browserhersteller iIhnen nicht zeigen wollen" "Wie sie Ihre Elemente tunen können".

Wenn man die Icons nur 80px und die (Über)-schrift/ den Titel (.card a b) "nur" 1.2em groß macht, müsste es auch so gehen.

Also:

• template-rows sollte verwendet werden
• Die Cards sollten über eine Vorlage generiert werden
• Layout-Optionen dann per Vorlagenparameter.

Nein! Dann muss man immer wieder mit Parametern operieren - wenn dann sollte alles optional sein - auch wenn die Kombo Titel und Icon gesetzt scheint. Ob dann 2-8 Unterseiten als Liste oder einen Teasertext, müsste man eben sehen.

Beispielsweise sollte man sowohl beim HTML-Einstieg als auch bei der "Trennung von ..." keine Unterseiten anzeigen (HTML#weitere_Tutorials)

Ich stelle mir das so vor:

{{card |titel=Kartenvorlage |titel_breit=Kartenvorlagenüberschrift |bild=kartenbild.svg |alt=Ein Kartenbild |Text Text Text Text Text Text |footer=Kartenfooter-Text, der über die ganze Breite geht }}

titel oder titel_breit wird alternativ verwendet. Der footer ist ebenfalls optional. Bild und vor allem der alt-Text für's Bild sind Pflicht

Ja, aber imho eben ohne Vorlage, sondern eben über HTML und dann in Klassen im CSS

Ich frage mich dann auch, ob Grid das richtige Layoutmodell ist. Ich fände es eigentlich besser, wenn das Bild gefloatet würde, damit der Kartentext im Zweifelsfall um das Bild herumfließen kann.

Könnte man ja auch mit

.card img {
  width: 80px;
  float:right;
}

erreichen.

Wenn man dann die Bilder floatet, könnte man auf alles HTML innerhalb von

<div class="card"> ... </div>

verzichten.

Ich bastele mal ein bisschen, aber jetzt muss ich erstmal wieder vom PC weg.

Wir könnten das ja am Mittwochabend besprechen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ja, super. Jetzt fällt mir auf: In solchen Bildeinbettungen

[[Datei:Foo.svg|link=Some/Wiki/Page]]

funktionierte der SVG-Replacer nicht. Weil das a Element kein class="image" bekommt, wenn der Link-Parameter angegeben ist. Jetzt selektiere ich nicht mehr a.image > img, sondern a[href] > img[src][srcset]. Mal gucken, wann ich damit reinfalle.

Ich glaube, ich muss Mediawiki doch mal bei dreckstool.de nominieren 😉

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

ja, super. Jetzt fällt mir auf: In solchen Bildeinbettungen

[[Datei:Foo.svg|link=Some/Wiki/Page]]

funktionierte der SVG-Replacer nicht. Weil das a Element kein class="image" bekommt, wenn der Link-Parameter angegeben ist. Jetzt selektiere ich nicht mehr a.image > img, sondern a[href] > img[src][srcset]. Mal gucken, wann ich damit reinfalle.

Ich glaube, ich muss Mediawiki doch mal bei dreckstool.de nominieren 😉

Ja, was mich heute genervt hat: [[Datei:....|right| ]] erzeugt ja ein div um den Link um das Bild - komplizierter geht's nicht.

Jetzt kommen ganz dunkle Wolken, wir gehen aber doch mit den Nachbar'n auf ein Kaltgetränk zur Kirchweih (der 3. in diesem Monat in 1km Umkreis)

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Ich versuche mal den Stand der Diskussion zusammenzufassen - evt. wird ein Blog-Artikel draus:

Problem/ Ausgangslage

Wir haben auf den Portalseiten eine Vielzahl von Tutorials, die in 3 Spalten gelistet sind. Fettgedruckte Unterüberschriften gliedern zusammengehörendes - aber nicht alles lässt sich kategorisieren.

Auf der Seite Wie fange ich an? sollen Cards die wichtigsten Tutorials prominent hervorheben.

Allerdings haben die großen Cards mehrere Nachteile:

• Neben den Icons aus der FAQ und in den Kursen benötigen wir eine mehr oder weniger aufwendige zusätzliche Card-Grafik.
• Es wäre gut, wenn zusätzlich zur Card Unterseiten oder ein Teaser gelistet werden könnten.
• Irgendwie gehören die Texte nicht zu den Cards, bzw. wird die ganze Seite zu lang.

Lösung / aktueller Stand

SVG/Tutorials

Eine Card besteht aus einem div:

<div class="card">
[[SVG/Tutorials/Einstieg|'''Einstieg in SVG''']] 
[[Datei:SVG Logo.svg||alt=Logo-SVG|link=SVG/Tutorials/Einstieg]]
* [[SVG/Tutorials/Einstieg#Warum_SVG_nutzen.3F|Warum SVG nutzen?]]
* [[SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen|SVG mit CSS stylen]]
* [[SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren|SVG mit CSS animieren]]
* [[SVG/Tutorials/Einstieg/barrierefreie_SVGs|barrierefreie SVGs]]

Step by step eigene SVGs erstellen
</div>

Dabei können wir aus den Kursen die Links zu den Unterseiten und das Icon wiederverwenden.

Ein Teaser-Text müssen wir uns überlegen, können ihn aber auch später hinzufügen.

Das CSS ist einfach:

.card a b {font-size: 1.15em;}
.card img {width: 80px; float: right;}
.card .teaser img {width: 100%}

Finetuning

Das Layout für die Karten braucht noch ein bisschen Feintuning, find ich,

Ja!

in "Standalone SVGs" ist z.B. eine große Lücke zwischen Überschrift und Rest.

Wie groß soll die Schriftgröße des Titels sein? Jetzt sind es 1.15em und fett - reicht das?

Mit dem gefloateten Bild oben rechts müssen wir schauen, wie groß das sein darf. Jetzt sind es 80px (vorher 120px). Ich würde es am Stammtisch morgen schrittweise hochdrehen. Bei gewissen Größen rutscht das Bild nach unten.

• Möglichkeit 1: Unter dieser Größe bleiben
• Möglichkeit 2: Das Icon im Markup nach oben setzen.

Lasst uns morgen drüber reden und dann abstimmen.

Cards mit anderem Hintergrund.

Problem 1: Im Dark Mode müssen dann die Farben „von Hand“ geändert werden.

Problem 2: Der Text geht im Augenblick bis an den Rand. Bei einem padding würde der verfügbare Platz für Text weniger.

Schaut mal hier, ob das trotzdem geht: HTML#Tutorials

Umsetzung

Die Icons im Test-Wiki sind weitgehend für den Dark Mode vorbereitet - im Prod-Wiki wären sie teilweise unsichtbar.

Nicht für alle Tutorials gibt es gute Icons, nicht alle Tutorials sind vorzeigbar. Da müsste man mal drüber reden.

Ich würde mich freuen, wenn morgen Abend wieder ein paar SELFER da wären.

Herzliche Grüße

Matthias Scharwies