nicht angemeldet
Sprite einbauen und Größe ändern
Tabellenkalk
Gunnar Bittersmann
Matthias Scharwies
Matthias Apsel
Der Martin
marctrixHey ich versuche gerade ein icon aus einem Sprite einzubauen
Jedoch ist dieses wie auf dem Bild zu sehen viel kleiner als es sein sollte ... versuche ich es jz über width oder height zu vergrößern wird es nicht vergrößert, sondern die anliegenden Sprite.images dazu angezeigt... kann ich das icon (das btw in einem Button liegt) vergrößern? Danke schonmal für die Hilfe
-
Hallo,
sondern die anliegenden Sprite.images dazu angezeigt... kann ich das icon (das btw in einem Button liegt) vergrößern?
vielleicht musst du dann zugleich das gesamte Sprite mitvergrößern.
Gruß
Kalk-
Danke ... dass problem hierbei ist leider, dass ich andere icons eingebaut habe die die perfekte greöße haben Gruß zurück
-
-
@@Jan Luca
Hey ich versuche gerade ein icon aus einem Sprite einzubauen […] die anliegenden Sprite.images dazu angezeigt...
Oje, Sprites von anno dazumals? Für diese Technik gibt es heute keine Notwendigkeit mehr. Für Icons verwendet man am besten SVG. Ich hab da mal eine Art Tutorial geschrieben: Teil 1, Teil 2.
Danke schonmal für die Hilfe
Ohne Link zur problematischen Seite ist keine Hilfe möglich.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Eine andere Technick ist aus Konventionsgründen leider nichtanwendbar... und einen link kann ich auch nicht senden da die Seite nciht online ist td danke 😀
-
Live Long and Prosper 🖖
-
-
Tach!
Ich gestatte mir mal, den Thread in eigener Sache zu kapern.
Oje, Sprites von anno dazumals? Für diese Technik gibt es heute keine Notwendigkeit mehr. Für Icons verwendet man am besten SVG.
Sind SVGs immer noch die beste Wahl, wenn man ca. 2400 Pixelgrafik-Bilder benötigt?
Die Anwendung soll zudem als PWA laufen, also auch offline. Ein Service Walker agiert dabei als Network-Proxy und verwaltet einen Cache für schnelles Starten und auch für Offline-Fall. Dazu muss er die 2400 Bilder aber erstmal in seinen Cache bekommen.
Ist es sinnvoll, die herkömmliche Sprite-Technik mit SVG nachzuahmen? Ich las, dass man alle Bilder in der SVG-Datei übereinanderlegt und mittels CSS standardmäßig alle versteckt und das gewünschte anzeigen lassen kann. Dazu müssten aber alle Bilder einzeln und Base64-kodiert in der SVG-Datei zu liegen kommen. Das heißt, jedes Bild hat seinen eigenen Overhead plus Base64, und dazu noch der SVG-Code für den Container. Außerdem müsste man noch den Rechenaufwand vergleichen von SVG und herkömmlicher Sprite-Technik, nicht nur den im eigenen Script, sondern auch den versteckten im Browser (für Parsen von SVG und Dekodieren des Base64).
Auch die Frage nach den Tools für das Managen ist wichtig. Wie verwaltet man die Pixel-Bilder? Wenn im SVG alle übereinanderliegen, dient das nicht gerade der Übersichtlichkeit. Im herkömmlichen Sprite sind sie alle schön nebeneinander angeordnet. Aber man muss sich die Position in der Datenhaltung merken. Welche Programme (unter Windows) und/oder welche Vorgehensweisen bieten sich für den SVG-Weg an? Gibt es alternative Techniken zu SVG-Sprites?
dedlfix.
-
@@dedlfix
Ich gestatte mir mal, den Thread in eigener Sache zu kapern.
Un. Er. Hört.
Sind SVGs immer noch die beste Wahl, wenn man ca. 2400 Pixelgrafik-Bilder benötigt?
Wenn man Icons mit Farbverläufen hat, ist sicher JPEG die beste Wahl. Hat man bei Icons aber i.d.R. nicht.
Wenn man 2400 Pixelgrafik-Icons hat, ist SVG vielleicht die beste Wahl, aber nicht unbedingt die sinnvollste. Der Aufwand, jetzt 2400 SVGs neu zu erstellen (neu heißt: man hat die Icons nicht als Vektorgrafiken), lohnt den Nutzen wohl nicht. Man benötigt aber keine 2400 Icons.
Icons sind ja dazu da, vom Nutzer mit einer bestimmten Funktion assoziiert zu werden. „Ich erkenne alle 2400 Funktionen, die die verschiedenen Icons symbolisieren.“ — kein Nutzer, jemals. Man hat eher 24 Icons (so als Größenordnung).
Ist es sinnvoll, die herkömmliche Sprite-Technik mit SVG nachzuahmen?
Nein.
Ich las, dass man alle Bilder in der SVG-Datei übereinanderlegt und mittels CSS standardmäßig alle versteckt und das gewünschte anzeigen lassen kann. Dazu müssten aber alle Bilder einzeln und Base64-kodiert in der SVG-Datei zu liegen kommen.
?? Mit „Bildern“ meinst du Rastergrafiken? SVG als Container für Rastergrafiken zu verwenden ist sicher keine sinnvolle Technik.
Oder meintest du mit „Bildern“ Vektorgrafiken?
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Tach!
Sind SVGs immer noch die beste Wahl, wenn man ca. 2400 Pixelgrafik-Bilder benötigt?
Wenn man Icons mit Farbverläufen hat, ist sicher JPEG die beste Wahl. Hat man bei Icons aber i.d.R. nicht.
Es handelt sich nicht um Icons zur Benutzerführung. Die Anwendung verwaltet Items, und zu jedem Item gibt es ein Bild, in dem es iconisiert dargestellt ist.
Wenn man 2400 Pixelgrafik-Icons hat, ist SVG vielleicht die beste Wahl, aber nicht unbedingt die sinnvollste. Der Aufwand, jetzt 2400 SVGs neu zu erstellen (neu heißt: man hat die Icons nicht als Vektorgrafiken), lohnt den Nutzen wohl nicht.
Eben. Aber wenn es für die Sprites-Technik von anno dazumals heute keine Notwendigkeit mehr gibt, SVG aber auch nicht sinnvoll sind, welche Möglichkeiten gibt es dann noch?
Man benötigt aber keine 2400 Icons.
Doch, doch, in meinem Fall schon.
?? Mit „Bildern“ meinst du Rastergrafiken? SVG als Container für Rastergrafiken zu verwenden ist sicher keine sinnvolle Technik.
Ja, ich meinte Rastergrafiken. Den Begriff wollte ich eigentlich zur näheren Klassifizierung der Art der Bilder verwenden, habs dann aber offensichtlich vergessen.
dedlfix.
-
@@dedlfix
Es handelt sich nicht um Icons zur Benutzerführung. Die Anwendung verwaltet Items, und zu jedem Item gibt es ein Bild, in dem es iconisiert dargestellt ist.
Also keine Icons, sondern Thumbnails?
Aber wenn es für die Sprites-Technik von anno dazumals heute keine Notwendigkeit mehr gibt, SVG aber auch nicht sinnvoll sind, welche Möglichkeiten gibt es dann noch?
Möglicherweise ist die Sprites-Technik von anno dazumals für diesen Anwendungsfall immer noch sinnvoll. (Ich nehme an, das Zusammenfassen der 2400 Bildchen zu einer Datei geschieht automatisiert?)
Möglicherweise ist man mit HTTP/2 aber auch gut dran, die kleinen Bildchen als einzelne Ressourcen auszuliefern. Testen.
Und 2400 Bildchen passen nicht auf einmal in den Viewport. Wenn’s einzelne Ressourcen sind, bietet sich lazy loading an.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Tach!
Es handelt sich nicht um Icons zur Benutzerführung. Die Anwendung verwaltet Items, und zu jedem Item gibt es ein Bild, in dem es iconisiert dargestellt ist.
Also keine Icons, sondern Thumbnails?
Nein, eigentlich nicht. Ein Thumbnail ist ein verkleinertes Vorschaubild eines großen Bildes. Icons sind stilisierte Abbilder von Dingen. Das Icon vom Firefox symbolisiert zum Beispiel das Programm, ist aber kein Vorschaubild.
(Ich nehme an, das Zusammenfassen der 2400 Bildchen zu einer Datei geschieht automatisiert?)
Teilweise. Das Extrahieren der Icons ist nur zum Teil automatisierbar. Einige müssen nachbearbeitet werden, bevor sie ins Sprite eingefügt werden können, beziehungsweise verwendet werden können. Ist aber nicht weiter von Belang, denn das müsste auch getan werden, wenn die Icons in einzelnen Dateien abgelegt würden.
Möglicherweise ist man mit HTTP/2 aber auch gut dran, die kleinen Bildchen als einzelne Ressourcen auszuliefern. Testen.
Und 2400 Bildchen passen nicht auf einmal in den Viewport. Wenn’s einzelne Ressourcen sind, bietet sich lazy loading an.
Da war aber noch die Sache mit der PWA und der Anforderung, dass alle Icons auch offline im Cache vorhanden sein sollen. Da müsste ich ja bei jedem Anwendungsstart erstmal alle Icons einzeln requesten, um sie garantiert im Cache zu haben. Eine große Sprite-Datei ist in der Hinsicht einfacher, egal ob herkömmlich oder als SVG.
dedlfix.
-
-
-
-
-
Hallo @@Gunnar Bittersmann,
Oje, Sprites von anno dazumals? Für diese Technik gibt es heute keine Notwendigkeit mehr. Für Icons verwendet man am besten SVG. Ich hab da mal eine Art Tutorial geschrieben: Teil 1, Teil 2.
Du warst damals bereit, das in einen Blog-Artikel zu gießen. Hättest Du noch Lust?
Mittlerweile würde es auch mit href-Attribut gehen; das ist seit Safari 12.1 drin.
Herzliche Grüße
Matthias Scharwies
--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
-
-
Hallo,
Ganz ohne Sprites oder SVG, sondern: »
Gruß
Kalk-
Gute Idee ist mir auch schon gekommen... jedoch sieht es so verdammt unschön aus :D 🖖
-
Hallo,
jedoch sieht es so verdammt unschön aus
Das liegt daran, dass diese Art der Anführungszeichen im Deutschen unüblich ist.
Gruß
Kalk-
@@Tabellenkalk
Das liegt daran, dass diese Art der Anführungszeichen im Deutschen unüblich ist.
Wollen wir mal in ein Buch schauen?
(»Die unendliche Geschichte« von Michael Ende)
Auf Totholz ist diese Art der Anführungszeichen alles andere als unüblich.
LLAP 🖖
PS: In der Schweiz zeigen wie Anführungszeichen andersrum: nach «außen», wie im Französischen. Im Gegensatz zum Französischen aber ohne Leerzeichen.
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Hallo,
Das liegt daran, dass diese Art der Anführungszeichen im Deutschen unüblich ist.
Wollen wir mal in ein Buch schauen?
Ich sollte dringend mal wieder ein Buch lesen…
Anführungszeichen andersrum
Das meinte ich doch! 😉
Gruß
Kalk -
@@Gunnar Bittersmann
nach «außen»
Ups, da passt was nicht zusammen. Finde den Fehler!
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Hallo,
Finde den Fehler!
hm, du hast „wie“ statt „die“ geschrieben!
Gruß
Kalk-
@@Tabellenkalk
Finde den Fehler!
hm, du hast „wie“ statt „die“ geschrieben!
Hihi. Das war aber schon vorher.
Ich meinte schon das darauffolgende Posting.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
-
-
Hallo Gunnar Bittersmann,
nach «außen»
Ups, da passt was nicht zusammen. Finde den Fehler!
Stimmt, es muss »innen« heißen.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
-
@@Matthias Apsel
nach «außen»
Ups, da passt was nicht zusammen. Finde den Fehler!
Stimmt, es muss »innen« heißen.
»innen« stimmt auch, aber es muss nicht so heißen. 😝
«innen» und »außen« sind auch stimmig. Nur bei «außen» stimmt was nicht.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
-
-
Hallo Gunnar,
nach «außen»
Ups, da passt was nicht zusammen. Finde den Fehler!
easy: Der Schweizer an sich schreibt «aussen».
Ciao,
Martin--
Ich stamme aus Ironien, einem Land am sarkastischen Ozean.-
@@Der Martin
nach «außen»
Ups, da passt was nicht zusammen. Finde den Fehler!
easy: Der Schweizer an sich schreibt «aussen».
EbenT!!! Nach außen zeigende Anführungszeichen und ß passen nicht zusammen.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
-
-
-
-
-
Hej Jan,
Gute Idee ist mir auch schon gekommen... jedoch sieht es so verdammt unschön aus :D 🖖
Die einen sagen so, die anderen so. Oder anders ausgedrückt: das ist kein Problem, so lange es richtig aussieht.
Im Übrigen ist CSS dafür da, es so aussehen zu lassen, wie du möchtest…
Marc
--
Ceterum censeo Google esse delendam
-
-
