zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden SVG als CSS-Hintergrundbild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2019, 13:21
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.322
AndreasB wird schon bald berühmt werden
Standard SVG als CSS-Hintergrundbild

Moin.


Ich finde die Ursache nicht, warum von zwei validen SVG-Bildern

https://borumat.de/-/html-test/header-home.svg
https://borumat.de/-/html-test/header-home-2.svg

das erste bei der Verwendung als CSS-Hintergrundbild dargestellt wird, das zweite jedoch nicht.

HTML-Code:
#logo div {    background-repeat: no-repeat;    background-image: url(https://borumat.de/-/html-test/header-home-2.svg);}
HTML-Code:
<body><div id="page"><header>    <div id="logo">        <div>Foo</div>    </div></header></div></body>
Das erste stammt von einer Grafikerin aus Illustrator.
Das zweite habe ich von Hand geschrieben.
Im Wesentlichen unterscheidet es sich durch die Art der Einbettung des JPGs.

Was mögen die Browser an meinem SVG nicht?

Verstehen sie nur als Base64 kodierte Bilder innerhalb eines SVG?


Ein Test mit einem dritten SVG-Bild, basierend auf Bild header-home-2.svg, wo ich die Angabe
xlink:href="https://borumat.de/-/html-test/header-home.jpg"
durch

xlink:href="data:image/jpeg;base64 ..."
ersetzt habe, legt das nahe.
Denn das funktioniert.



Über euren Rat freue ich mich. Danke.
__________________


Geändert von AndreasB (20.04.2019 um 13:33 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.04.2019, 08:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.976
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Bei mir funktionieren beide Beispiele, ich kann dein Problem also leider nicht nachvollziehen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.04.2019, 09:12
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.322
AndreasB wird schon bald berühmt werden
Standard

@cloned


Meinst Du mit Beispiele die beiden URLs zu den SVG?
Die funktionieren, das ist klar.


Was nicht funktioniert ist https://borumat.de/-/html-test/header-home-2.svg als CSS-Hintergrundbild.


Eine Vermutung habe ich habe ich ja geäußert, aber ich finde bisher keine Infos in den Specs, dass base64 zwingend nötig ist.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 23.04.2019, 12:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.976
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Was ich noch als unterschied sehe: Bei deinem SVG steht noch "<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> " direkt zu Beginn, beim anderen svg ist nur der <svg> ... </svg> Tag vorhanden.
Eventuell stört das? man sieht übrigens auch im netzwerk-tab des browsers dass das Bild zwar geladen aber nicht gerendert wird wenn man auf "Vorschau" für das Bild klickt. Was genau es da hat kann ich dir aber gerade leider auch nicht sagen.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.04.2019, 07:13
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.895
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Was mögen die Browser an meinem SVG nicht?

Verstehen sie nur als Base64 kodierte Bilder innerhalb eines SVG?


Ein Test mit einem dritten SVG-Bild, basierend auf Bild header-home-2.svg, wo ich die Angabe
xlink:href="https://borumat.de/-/html-test/header-home.jpg"
durch

xlink:href="data:image/jpeg;base64 ..."
ersetzt habe, legt das nahe.
Denn das funktioniert.
Was passiert denn, wenn du im ersten Code das Inlinebild mit dem externen Bild ersetzt?
Mit Zitat antworten
  #6 (permalink)  
Alt 25.04.2019, 08:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.976
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Ich frage mich hier ja auch was der Vorteil ist, das bild direkt ins SVG zu integrieren und nicht gleich mit CSS clip-path zu arbeiten. Dann kann das Bild auch einfach ausgetauscht werden und auch an mehreren Stellen angewandt werden.
Auch der Text-Effekt sollte sich doch mit reinem CSS umsetzen lassen denke ich (zumindest in modernen Browsern, IE mal außen vorgenommen)
Mit Zitat antworten
  #7 (permalink)  
Alt 25.04.2019, 08:49
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.322
AndreasB wird schon bald berühmt werden
Standard

@cloned

Die Unterstützung von clip-path im SVG ist gut, in HTML leider schlecht.


Das ist der einzige Grund.


Edit:


@protonenbeschleuniger


Ich habe jetzt 2 Testcases gebaut.
HTML/CSS ist identisch.
SVG ist bis auf die Einbindung des JPGs identisch.


https://borumat.de/-/html-test/heade...t-externem-jpg
https://borumat.de/-/html-test/heade...mit-inline-jpg
__________________


Geändert von AndreasB (25.04.2019 um 09:45 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 29.04.2019, 12:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.976
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Hier kann man wohl nur durch ausprobieren und testen auf die Lösung kommen, wirklich wissen tut es hier keiner.

https://stackoverflow.com/questions/...ine-svg-in-css Hier noch etwas, was das Thema im Ansatz behandelt, eine weitere Möglichkeit dein SVG einzubinden. So wie ich das sehe wirst du um das kodieren des Bildes nicht herumkommen.

Bezüglich der schlechten Unterstützung: Ja, im IE (und Safari) funktioniert es nicht so gut, Edge wird funktionieren, wenn sie auf webkit umgestellt haben. Da ist die Frage, wie wichtig das aussehen in den Browsern ist oder ob hier Abstriche gemacht werden können. Muss dort zB der Effekt nicht zwingend angezeigt werden dann kann clip-path doch verwendet werden. Muss der Designerin halt erklärt werden
Bzw. dort wird als Fallback dann das kodierte Bild der Designerin eingebunden.
Das aber nur am Rande, wenn die SVG Lösung verwendet werden muss dann ist es klar dass das anders nicht geht.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Inspiration - Sammlung von Links emti Ressourcen 8 01.12.2009 18:02
Doctype und CSS Problem tech CSS 3 29.05.2009 20:16
CSS Problem mit Hintergrundbild runner CSS 2 10.03.2009 17:38
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39
Hintergrundbild über css wird nicht in mozilla angezeigt? toby CSS 2 15.08.2005 17:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:43 Uhr.