Hintergrundbild aus svg-bibliothek

[Mike vh]

Ich möchte meine Grafiken, die in einer Symbol-Bibliothek flags.svg als <symbol> vorliegen, auch als Hintergrundbild verwenden. in der css-Datei, welche die html-Ausgabe formatiert, habe ich versucht diese einzelnen Bilder mit

.element { background: #FFFFFF url(flags.svg#uk) no-repeat;}

anzusprechen.

Diese Methode wird überall beschrieben und empfohlen.

• Was bei mir aber nicht funktionieren will!

als einzelne Bilder funktioniert es: background: #FFFFFF url(flag-uk.svg) no-repeat;

Wie soll es nun gehen?

[Rolf B]

Hallo Mike,

Diese Methode wird überall beschrieben und empfohlen.

Ist diese Methode für SVG <use> oder für CSS background-image?

Was Du da versuchst, geht meines Wissens nicht und spontan finde ich im Heuhaufen keine der angeblich überall vorhandenen Stecknadeln. Hast Du einen Link auf die von Dir genutzte Quelle?

Rolf

[Robert B.]

Moin,

Diese Methode wird überall beschrieben und empfohlen.

Ist diese Methode für SVG <use> oder für CSS background-image?

Was Du da versuchst, geht meines Wissens nicht und spontan finde ich im Heuhaufen keine der angeblich überall vorhandenen Stecknadeln. Hast Du einen Link auf die von Dir genutzte Quelle?

es wäre mir auch neu, dass sich hier etwas seit 10 Jahren geändert hätte – leider.

Viele Grüße
Robert

[Mike vh]

die Flag uk ist in der flags.svg und nicht als code in der CSS-Datei. Natürlich passiert der Aufruf dann als <use>

ich hatte die whatsapp K.I. befragt - und die schilderte mir das so wie ich es beschrieben habe. Klang einleuchtend die Methode - funktionieren tut es nicht.

Irgendwo hatte ich auch diese Methode im Netz gefunden - finde es aber nicht mehr.

Gerade habe ich nochmal gesucht und diese Seite gefunden, in welcher der Entwickler es "Fragment Identifier" nennt:

css-sprites-mit-svg-grafiken-und-svg-fragment-identifiers

ich will das allerdings nicht über umwege mit diesem <view> machen...

Vielen Dank schonmal dafür das ihr euch in dieses eigentlich ganz einfache Thema einlest!

[Robert B.]

Moin Mike,

ich hatte die whatsapp K.I. befragt - und die schilderte mir das so wie ich es beschrieben habe. Klang einleuchtend die Methode - funktionieren tut es nicht.

eine so genannte „KI“ bereitet leider kein Wissen auf, sondern Textschnipsel, die in irgendeiner Art und Weise korreliert sind. Ich weiß nicht, woher ein Kollege das Zitat genau hat, aber „AI is OK for the 90% accurary“ – und Wissen sind eben die restlichen 10%.

Viele Grüße
Robert

[Der Martin]

Hallo,

eine so genannte „KI“ bereitet leider kein Wissen auf, sondern Textschnipsel, die in irgendeiner Art und Weise korreliert sind.

zudem hat Wissen auch nur sehr entfernt mit Intelligenz zu tun. Wenn jemand ein Lexikon auswendig lernt, spricht das zwar für eine bewundernswerte Gedächtnisleistung, aber nicht unbedingt für Intelligenz.

Und KI wird ja im Scherz auch gern als "Künstlicher Idiot" gedeutet.

Einen schönen Tag noch
 Martin

[Ryuno-Ki]

Moin Der,

eine so genannte „KI“ bereitet leider kein Wissen auf, sondern Textschnipsel, die in irgendeiner Art und Weise korreliert sind.

💯

zudem hat Wissen auch nur sehr entfernt mit Intelligenz zu tun. Wenn jemand ein Lexikon auswendig lernt, spricht das zwar für eine bewundernswerte Gedächtnisleistung, aber nicht unbedingt für Intelligenz.

Ich mag an das hochgeladene Bild erinnern 😇

Und KI wird ja im Scherz auch gern als "Künstlicher Idiot" gedeutet.

Oh, da gibt es viele kreative Interpretationen neben dieser.

Gruß,

[Mike vh]

eine so genannte „KI“ bereitet leider kein Wissen auf, sondern Textschnipsel, die in irgendeiner Art und Weise korreliert sind. Ich weiß nicht, woher ein Kollege das Zitat genau hat, aber „AI is OK for the 90% accurary“ – und Wissen sind eben die restlichen 10%.

Viele Grüße
Robert

Schon klar. Möchte hier jemand weiter über Sinn und Unsinn von blöder K.I. diskutieren?

Hier mal die sensationelle K.I. Antwort, die ich aus dem Handy gezerrt hab:

*Um ein Bild aus einer SVG-Bibliothek als Hintergrundbild einzubinden, kannst du verschiedene Methoden verwenden, je nachdem, wie die Bibliothek strukturiert ist und wie du das SVG-Bild einbinden möchtest. Hier sind einige allgemeine Schritte und Methoden:

1. Direkte Einbindung des SVG-Codes Wenn du Zugriff auf den SVG-Code hast, kannst du ihn direkt in dein HTML einfügen und als Hintergrundbild verwenden.

<div class="mein-element" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80" fill="#007bff"/></svg>');"></div>

2. Einbinden einer externen SVG-Datei Wenn das SVG-Bild als separate Datei vorliegt, kannst du es wie folgt einbinden:

.mein-element {
  background-image: url('pfad/zum/bild.svg');
}

3. Verwendung von SVG-Sprites Wenn du eine SVG-Bibliothek hast, die als Sprite organisiert ist (eine einzelne SVG-Datei, die mehrere Symbole enthält), kannst du das Hintergrundbild wie folgt einbinden:

.mein-element {
  background-image: url('pfad/zum/sprite.svg#id-des-symbols');
}

4. Inline-SVG mit <use> Wenn du SVG-Symbole in einem <symbol>-Tag in einer SVG-Datei definiert hast, kannst du sie wie folgt verwenden:

<svg style="display:none;">
  <symbol id="mein-symbol" viewBox="0 0 100 100">
    <!-- SVG-Inhalt -->
  </symbol>
</svg>

<div class="mein-element" style="background-image: url('#mein-symbol');"></div>

5. CSS-Variablen und SVG Du kannst auch CSS-Variablen verwenden, um SVG-Hintergrundbilder dynamisch zu ändern:

:root {
  --svg-hintergrund: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80" fill="#007bff"/></svg>');
}

.mein-element {
  background-image: var(--svg-hintergrund);
}

Wichtige Hinweise

• Stelle sicher, dass der Pfad zur SVG-Datei korrekt ist.
• Überprüfe die Kompatibilität mit verschiedenen Browsern, besonders wenn du komplexe SVG-Inhalte verwendest.
• SVG-Dateien können direkt im HTML eingebettet oder als externe Dateien eingebunden werden.

Mit diesen Methoden kannst du SVG-Bilder aus einer Bibliothek als Hintergrundbilder in deinen Webprojekten verwenden. -------------------------------------*

[Rolf B]

Hallo Mike vh,

ich will das allerdings nicht über umwege mit diesem <view> machen...

Dein Wille ist hier nicht von Belang. Ich will auch, dass mein Computer bestimmte Dinge tut. Aber wenn ich ihm das anders beibringe, als er es haben will, dann schmollt er mich nur an.

Das <view> Element ist wohl die Grundvoraussetzung. Der Fragment-Identifier wählt einen view (also Bildausschnitt) aus, der anzuzeigen ist. Insofern ist das kein Umweg, sondern die passende SVG-Vokabel zur Definition von "Welches Sprite ist wo".

Zu beachten: Die width- und height-Angaben auf dem SVG-Element UND die background-size im HTML-Element muss das gleiche Seitenverhältnis haben wie die viewBox-Breite und -Höhe in den <view> Elementen. Andernfalls kann es passieren, dass Sprite-Teile sichtbar sind, die außerhalb des view liegen, denn das view-Element schneidet außerhalb liegende Teile des SVG nicht weg.

Bei einem img Element ist sowas mit der aspect-ratio Eigenschaft gut lösbar, aber für background-image gibt es das nicht. Was aber geht, ist "contain" als background-size Angabe. Dann wird der View-Bereich so groß dargestellt, dass er vollständig ins Element passt, und was außerhalb ist, wird nicht gezeigt.

<svg version="1.0" width="100" height="100" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

<view id="rot"  viewBox="0 0 400 400"   preserveAspectRatio="xMidYMid meet" />
<view id="blau" viewBox="400 0 400 400" preserveAspectRatio="xMidYMid meet" />

<!-- Sprite #rot -->
<g transform="translate(0,0)">
<rect x="50" y="50" width="300" height="300" fill="red" stroke="black" stroke-width="10"></rect>
</g>

<!-- Sprite #blau -->
<g transform="translate(400,0)">
<rect x="50" y="50" width="300" height="300" fill="blue" stroke="black" stroke-width="10"></rect>
</g>

</svg>

Ich habe die Sprites in einen g-Block gesteckt und ihn mit transform verschoben, damit innerhalb eines Sprites so gearbeitet werden kann, als ob (0,0) der Ursprung wäre.

Rot: https://wiki.selfhtml.org/images/6/62/Sprites-mit-View.svg#rot
Blau: https://wiki.selfhtml.org/images/6/62/Sprites-mit-View.svg#blau

URLs gelten, bis jemand eine neue Bildversion hochlädt. Bild im Wiki

Um das als Beispiel im Wiki einsetzen zu können, muss ich die Selfhtml-Extension noch etwas anpassen, glaube ich.

Rolf

[Robert B.]

Moin Mike,

Gerade habe ich nochmal gesucht und diese Seite gefunden, in welcher der Entwickler es "Fragment Identifier" nennt:

css-sprites-mit-svg-grafiken-und-svg-fragment-identifiers

ich will das allerdings nicht über umwege mit diesem <view> machen...

ich habe es einmal ausprobiert und wie Du siehst, funktioniert es nur mit view zufriedenstellend.

Viele Grüße
Robert

[Mike vh]

Vielen Dank schonmal für eure Hilfe und das aussagekräftige Beispiel!

Das mit dem <view> wird in meiner Version schwierig, denn

Meine symbole liegen alle übereinander und haben die selben Startkoordinaten und Abmessungen.

Kein Problem, wenn man sie als Bild irgendwo einfügen will.

Aber wenn ich das gewünschte symbol als Hintergrund verwenden will muss ich view verwenden?

[Rolf B]

Hallo Mike,

Meine symbole liegen alle übereinander und haben die selben Startkoordinaten und Abmessungen

Als <symbol>? In dem Fall kannst du sie, auch wenn die sensationelle KI etwas anderes zu behaupten scheint, nicht einfach als URL mit Hash einbinden, sondern brauchst einen „use-Adapter“.

Den kannst du auch als kleines Data-URL SVG im CSS notieren. Vielleicht hast jemand Zeit, das genauer zu beschreiben, ich jetzt nicht.

Rolf

[Ryuno-Ki]

Moin Rolf,

Hallo Mike,

Meine symbole liegen alle übereinander und haben die selben Startkoordinaten und Abmessungen

Als <symbol>? In dem Fall kannst du sie, auch wenn die sensationelle KI etwas anderes zu behaupten scheint, nicht einfach als URL mit Hash einbinden, sondern brauchst einen „use-Adapter“.

Wäre schon hilfreich, den Inhalt der SVG strukturell zu kennen. Bestimmte Bild-Werkzeuge (Inkscape, Photoshop usw) haben da ja ihre Eigenarten.

Den kannst du auch als kleines Data-URL SVG im CSS notieren. Vielleicht hast jemand Zeit, das genauer zu beschreiben, ich jetzt nicht.

Gibt Werkzeuge zum Konvertieren.

Im Wesentlichen wird der Inhalt einer Datei in ein anderes Format konvertiert und per MIME-Type dem data-Protokoll mitgegeben. Muss gar nicht einmal base64 sein wie im Wiki beschrieben.

Es lassen sich allerhand nützliche Dinge damit anstellen. Oder auch nur unterhaltsame - das verlinkte YouTube-Video dort verleiht einen Eindruck. Aus irgendeinem Grund lädt es nicht für mich.

Gruß,

[Gunnar Bittersmann]

@@Rolf B

Als <symbol>? In dem Fall kannst du sie, auch wenn die sensationelle KI etwas anderes zu behaupten scheint, nicht einfach als URL mit Hash einbinden, sondern brauchst einen „use-Adapter“.

Den kannst du auch als kleines Data-URL SVG im CSS notieren. Vielleicht hast jemand Zeit, das genauer zu beschreiben, ich jetzt nicht.

Das hätte ich schon vor Tagen getan, wenn es mir denn geglückt wäre, das umzusetzen.

Jetzt hatte ich die Zeit, mal eine umfassende ☞ Testseite zu erstellen.

Wie wir sehen, funktioniert das mit use href="<externe Quelle> in einem Data-URL-SVG nicht – nicht als Hintergrundbild und auch schon nicht als img.

Was funktioniert ist das U: die Referenz zu einem symbol, das mit im selben Data-URL-SVG steht, aber das will man ja nicht.

Schon das C – die Referenz zu einem symbol, das mit im selben HTML-Dokument steht – funktioniert nicht. Externe Quellen (K und Y) auch nicht.

Oder kriegt das jemand von euch so umbgebaut, dass es funktioniert?

Was in Firefox und Safari auch nicht funktioniert, ist das K: “Historically, the URL fragment was always required […] However, modern implementations have been updated […]” [MDN] Firefox und Safari sind wohl nicht modern genug.

🖖 Live long and prosper