Matthias Scharwies: SVG im SELFWiki: XML-Attribute oder CSS-Eigenschaften?

SELF-Forum

SVG im SELFWiki: XML-Attribute oder CSS-Eigenschaften?

Matthias Scharwies
– Informationen zu den Bewertungsregeln

Servus!

In MathML ist mir das aufgefallen: MathML hat wie HTML und SVG (XML)-Attribute, die in der Spec vorkommen, in den Browsern aber nur unvollständig angekommen sind. Dort setzt man wohl mehr auf CSS-Eigenschaften, die in HTML, MathML und SVG gleichermaßen wirken.[1]

Warum fang' ich damit an?

In SVG gibt es viele XML-Attribute, die jetzt auch Präsentationsattribute sind, die man in CSS notieren kann. Wo soll man solche Eigenschaften besprechen? - In CSS-Eigenschaften oder wie gehabt in SVG/Attribut?

Casus Knaxus: Manche der Präsentationsattribute gibt es für HTML und CSS gleichermaßen - die Seiten stellen eine Dopplung dar. Manche wie das r-Attribut (oder rxun d ry) gibt es nur in SVG. [2]

Zwischenfazit: Ich würde die bisherige Trennung aufrecht erhalten, aber …

  • aus CSS heraus auf die SVG-Präsentationsattribute verlinken (alles was die [2] als Referenz erhält)
  • in SVG gut erkennbar kennzeichnen.

Meine Frage ist jetzt wie kann man das erreichen?

Aufgefallen ist mir das bei einer Änderung von @MatthiasDD am viewBox-Attribut:

Dort gibt es in der Referenz-Vorlage einen Parameter animierbar, der sich (im CSS-Original) auf CSS-animations bezieht. Hier müsste …

  1. zuerst die bestehende Tabelle durch eine dl ersetzt werden, wie es in der CSS-Eigenschaftsreferenz schon geschehen ist.

  2. dann ein Parameter Präsentationseigenschaft gesetzt werden

  3. Wenn dieser ein ja als Wert hat, den Punkt animierbar einblenden

  4. Abgesehen davon gab es den Wunsch das == Siehe auch == sichtbarer anzuzeigen. Sollte man dort ein gelbes Post-It analog zur Vorlage:Text-Info verwenden?

    • Mögliches Problem: Die Linktexte sind oft länger als die 15em Breite des aside für die anderen Attribute/ Eigenschaften.

Ich bitte um viele Vorschläge / Ideen und Anregungen!

Herzliche Grüße

Matthias Scharwies

BTW

Das müsste auch noch in den Artikel zu SVG/Wertetypen, den MatthiasDD angefangen hat:

Ein paar Sachen wie Kaskade, var() oder calc() gehen natürlich nur im CSS.

Das ist klar und ein Fall für einen kleinen Abschnitt im SVG-Tutorial.

--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

  1. Ausnahme ist z. B. CSS-display (viele Werte) und MathML-display-Attribut (nur inline und block) ↩︎

  2. Theoretisch sollten CSS-Eigenschaften wie fill und stroke irgendwann ja auch bei HTML gelten, obwohl background-color und color aus Legacy-Gründen weiterhin gültig bleiben müssten. ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. SVG im SELFWiki: XML-Attribute oder CSS-Eigenschaften?

    MatthiasDD (Versionen)
    +1 Informationen zu den Bewertungsregeln

    Hallo Matthias,

    zu 4.: Das == Siehe auch == hieß früher (2004) mal Beschreibung als Link.

    Bitte nicht noch mehr Boxen erstellen. Heute würde ich ausführliche Beschreibung oder Anleitung schreiben und es als Überschrift lassen.

    Viele Grüße --MatthiasDD

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. SVG im SELFWiki: XML-Attribute oder CSS-Eigenschaften?

      Matthias Scharwies (Versionen)
      – Informationen zu den Bewertungsregeln

      Guten Morgen!

      zu 4.: Das == Siehe auch == hieß früher (2004) mal Beschreibung als Link.

      In der alten Doku hatten wir:

      1. Beschreibung mit Browserunterstützung
      2. Beispiel
      3. Erläuterung
      4. Beachten Sie

      Im Wiki haben wir:

      Das sollen ja Kurz-„Referenzen für den schnellen Überblick“ sein.

      Bitte nicht noch mehr Boxen erstellen. Heute würde ich ausführliche Beschreibung oder Anleitung schreiben und es als Überschrift lassen.

      Das "Siehe auch" und die "Weblinks" haben wir so aus der Wikipedia übernommen.

      Ich persönlich finde es eigentlich intuitiv und übersichtlich. Unter "Siehe auch" verlinken wir auf weiterführende Tutorials. Hier gab es Kritik, dass man …

      a. das "Siehe auch" nicht fände

      b. die Linktexte der Tutorials zu kryptisch wären und man evtl. einen Teaser hinzufügen könnte, der etwas über den Inhalt preisgibt.

      Was meint ihr?

      Präsentationsattribut

      Ich habe einen Parameter Präsentationsattribut hinzugefügt und animierbar zu " mit CSS animierbar" geändert.

      Was meint ihr?

      Falls, das so bleibt, müsste man alle Präsentationsattribute entsprechend anpassen.

      Herzliche Grüße

      Matthias Scharwies

      --
      Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. SVG im SELFWiki: XML-Attribute oder CSS-Eigenschaften?

        MatthiasDD
        – Informationen zu den Bewertungsregeln

        zu 4.: Das == Siehe auch == hieß früher...

        In SELFHTML 8 (es war 2001) war die Attribute-Referenz nur eine Tabelle. Der Verweis auf die Anleitung hieß "siehe 📖 Beschreibung", das meinte ich: SELFHTML8/html/referenz/attribute.htm#img "Siehe auch" erzeugt den Eindruck diese Seite sei unvollständig und ist in der Wikipedia nicht gern gesehen.

        Präsentationsattribut

        Das würde ich nicht in der Definitionsliste anzeigen, denn es steht doch schon in dem aside für die anderen Attribute, und auch in der Beschreibung ganz am Anfang wie z. B. bei SVG/Attribut/cx.

        Problem cx, cy, r

        Diese Attribute gibt es auch bei radialGradient. Dort sind es keine Präsentationsattribute und haben einen anderen Standardwert.

        • Vorschlag 1: nur den Link aus radialGradient entfernen.
        • oder Vorschlag 2: einen neuen Artikel cx, cy, r anlegen?
        • Beides in den bestehenden Artikeln zu erwähnen macht es sehr unübersichtlich.

        Ist der Hinweis bei Geometrieattributen zu Firefox überholt? In SVG funktioniert es im FF ohne "px", aber in CSS muss eine Einheit angegeben werden: w3.org

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. SVG im SELFWiki: XML-Attribute oder CSS-Eigenschaften?

          Matthias Scharwies (Versionen)
          – Informationen zu den Bewertungsregeln

          Servus!

          zu 4.: Das == Siehe auch == hieß früher... In SELFHTML 8 (es war 2001) war die Attribute-Referenz nur eine Tabelle. Der Verweis auf die Anleitung hieß "siehe 📖 Beschreibung", das meinte ich: SELFHTML8/html/referenz/attribute.htm#img

          "Siehe auch" erzeugt den Eindruck diese Seite sei unvollständig und ist in der Wikipedia nicht gern gesehen.

          Ah ok! Dann müssen wir da mal hirnen, was man als klar erkennbare Alternative verwenden könnte. Ich werde das heute abend auf dem Stammtisch (Du bist eingeladen!) mal ansprechen.

          Präsentationsattribut

          Das würde ich nicht in der Definitionsliste anzeigen, denn es steht doch schon in dem aside für die anderen Attribute, und auch in der Beschreibung ganz am Anfang wie z. B. bei SVG/Attribut/cx.

          Stimmt! Ist damit aber klar, dass es bei allen Elementen verwendet werden darf?

          Problem cx, cy, r

          Diese Attribute gibt es auch bei radialGradient. Dort sind es keine Präsentationsattribute und haben einen anderen Standardwert.

          • Vorschlag 1: nur den Link aus radialGradient entfernen.
          • oder Vorschlag 2: einen neuen Artikel cx, cy, r anlegen?

          Ja, das stimmt! Das Problem haben wir ähnlich bei HTML/Attribute/type...

          Legst du einen an? Danke im Voraus!

          • Beides in den bestehenden Artikeln zu erwähnen macht es sehr unübersichtlich.

          Ist der Hinweis bei Geometrieattributen zu Firefox überholt? In SVG funktioniert es im FF ohne "px", aber in CSS muss eine Einheit angegeben werden: w3.org

          Leider nicht! Firefox stellte SVG von Anfang an dar (als der IE bis zur Version 8 noch einen externen Viewer benötigte). In XML-Attributen ist es klar, dass ein Wert in dimensionslosen Größen notiert wird.

          Als x,y und width zu GeometrieAttributen wurden, konnte man in Chrome und Safari konsequenterweise diese dimensionslosen Größen verwenden; der Firefox benötigt eine Angabe in Pixel. Wir wollten schon mal einen Bug-Report schreiben, da gab es schon einen, aber die Spec ist wohl nicht so eindeutig.

          Herzliche Grüße

          Matthias Scharwies

          --
          Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Verläufe in SVG

            Matthias Scharwies
            – Informationen zu den Bewertungsregeln

            Servus!

            Problem cx, cy, r

            Diese Attribute gibt es auch bei radialGradient. Dort sind es keine Präsentationsattribute und haben einen anderen Standardwert.

            • Vorschlag 1: nur den Link aus radialGradient entfernen.
            • oder Vorschlag 2: einen neuen Artikel cx, cy, r anlegen?

            Ja, das stimmt! Das Problem haben wir ähnlich bei HTML/Attribute/type...

            Legst du einen an? Danke im Voraus!

            Ich habe jetzt doch die einzelnen Referenz-Artikel angepasst.

            Daneben bin ich durch das Tutorial: SVG/Farben/Verläufe gegangen. Das stand seit 2015 so da.

            Referenz-Artikel geben einen schnellen Überblick über die möglichen Attribute und deren Werte.

            Tutorials fangen bei 0 an und erklären einen Sachverhalt, geben viele Beispiele und entwickeln dann idealerweise ein Anwendungsbeispiel. Dabei verlinken sie konsequent bei jeder Erwähnung eines neuen Elements oder Attributs auf die Referenz.

            Bis auf das Anwendungsbeispiel ist das jetzt drin. Anstelle unserer SELF-Farben habe ich bei radialGradient das kontrastreichere yellow und bluegenommen.

            Rolf hatte dort schon für Bsp. 8 den Startkreis und Brennkegel gekennzeichnet, das habe ich jetzt für alle angelegt.

            spreadMethod ist psychedelisch - bitte nicht auf „richtigen“ Webseiten einsetzen.

            gradientTransform finde ich suspekt; trotzdem gibt es jetzt ein Beispiel.

            Wie gesagt, es fehlt der Use Case und Verläufe in SVG sind sperrig. SVG-Filter sind durch die CSS-Funktionen, die den gleichen Algorithmus benutzen und sowohl in HTML als auch SVG nutzbar sind, viel handlicher! Hoffentlich kommt das auch für Verläufe mal - ich habe aber nix dazu gefunden 😉

            Schaut mal drüber

            Herzliche Grüße

            Matthias Scharwies

            --
            Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln