SVG auf Smartphone: Wird als Bild-Widget angezeigt, nicht jedoch als Hintergrundbild

  • Zeta Produver 14.2.0. Business

    Layout: Clean Style Responsive default.html 50773 2017-07-31 06:58:37Z sseiz $


    Hallo Zusammen,


    ich verwende für ein Projekt ein SVG als Hintergrundbild. Soweit (fast) alles gut. Nur ein Phänomen, zu dem ich mir Hinweise wünsche:


    1) SVG wird auf dem Desktop angezeigt. Auch, wenn Devices simuliert werden wie z.B. Smartphone-Display.

    2) SVG wird "in echt" auf dem Test-Smartphone nicht im Hintergrund angezeigt.

    3) Dasselbe SVG wird jedoch auf dem Smartphone dargestellt, wenn ich es als Bild-Widget einbinde. Kann also nicht am Telefon liegen.


    Hat jemand eine Idee? Wird wohl tief im Zeta Producer liegen, weil SVG als Bildformat ja schon eine längere Geschichte hat.


    Viele Grüße & Danke, Jochen

  • Hallo Jochen,


    wenn ich mir die Release-notes zur Version 14 ansehe, ist SVG als zulässiges Format für Bilder überhaupt erst mit der 14 eingeführt worden. Ein erstes Update gab es dann zur Verwendung im Header. Scheint mir so, als ob SVG als Hintergrundbild noch auf die Liste "Wünsche für kommende Versionen" gesetzt werden muss.

    Freundliche Grüße


    Thomas Lilienthal
    Vereinswebmaster
    Homepage: hanabi-pirna.de

    Unsere Vereinsarbeit unterstützen: Spenden
    Zeta-Blogs: SEO, .htaccess,

    Hinweis: Die Blogbeiträge Google-Datenschutz und zur DSGVO entsprechen dem Gesetzesstand bei Veröffentlichung.

    PS: Du musst das Internet nicht ausdrucken, unbestätigten Gerüchten zufolge sollen einige Webmaster die Dreistigkeit besitzen, auch nach dem 25. Mai noch Inhalte online anzubieten.

  • Hallo Hanabi,


    das meinte ich mit "längere Geschichte". Ich kann mich an die Diskussionen hier vor ein oder zwei Jahren erinnern :)


    SVG als Hintergrundbild funktioniert ja bereits . . . auf dem Desktop, auch wenn da ein beliebig schmaler Viewport emuliert wird. Nur auf dem Smartphone nicht.


    Wie auch immer, ich hoffe noch auf eine Lösung hier im Forum.


    Wenn nicht ist es auch halb so schlimm: Ich kann den Hintergrund ja immer noch durch ein JPG ersetzen.

  • Wenn es auf dem Desktop angezeigt wird, hört sich das für mich eher nach einem Browserbug an. Interessant wäre eine Testseite und zu wissen um welches OS und Browser es sich beim Smartphone handelt.

  • Peinlich peinlich . . .


    . . . das Problem saß vor dem Bildschirm, dumm gelaufen.


    Das Smartphone hatte das SVG sehr wohl als Hintergrundbild angezeigt. Es wurde nur so saublöd skaliert, dass das gesamte Display des Telefons von einem transparenten Bildausschnitt gefüllt war. Daraus entstandenes Missverständnis: Siehe #1.


    Ursachenforschung:


    1) Das Tema "Viewport" hat's in sich. Die Simulation eines LG G4 auf dem Desktop ist nun mal nicht das physische Telefon. In der Simulation war der Hintergrund falsch skaliert.


    2) SVG-Bilder zur Verwendung im Internet haben im Gegensatz zu Bitmaps keine Dimensionen, also keine Höhe oder Breite. Bei Adobe Illustrator ist das z.B. die SVG-Option "Responsive". Die entfernt alle Seitenmaße und Seitenverhältnisse in der erzeugten Datei.


    3) Ein dimensionsloses SVG als background-image wird automatisch bildschirmfüllend gerendet. Kommt jedoch irgendwie irgendeine Maßangabe in's Spiel, wird das SVG sofort behandelt wie ein JPG oder PNG d.h. als hätte es eine gegebene Höhe oder Breite. Dazu reicht scheinbar schon ein background-size contain oder cover. Mit Ergebnissen, die ich nicht durchschaue . . .


    4) Einen ähnlichen Effekt hat background-attachment fixed, wenn der Hintergrund nicht mitscrollen soll: Das SVG wird (mit welchen Werten auch immer) skaliert. Das lässt sich durch ein background-size 100% problemlos korrigieren.


    Gelernt: Zeta Producer kann bereits SVG als Hintergrundbild. Sorry für den Anfangsverdacht "Wird wohl tief im Zeta Producer liegen", Sie machen einen Klasse-Job.

  • Hallo Stefan S, Sie haben geantwortet, während ich an meinem Beitrag getippt habe.


    Dann geht der Dank an das Zeta-Team jetzt namentlich an Sie: Vielen Dank dafür, wie geduldig und konstruktiv Sie mit den Beiträgen hier im Forum umgehen. Das alleine empfinde ich bereits als Alleinstellungsmerkmal für Ihre Software und Ihr Unternehmen.