SVG Graphiken mittels CSS die Größe ändern und wechselten Graphik Dateien

[petro74]

Möchte unterschiedlich große SVG Graphiken in mein Projekt einbinden und dabei allen eine einheitliche Größe geben.

Das möchte ich mit CSS bewerkstelligen weil es sich um eine größere Menge von Graphiken handelt.

Meine Schwierigkeit ist dass ich nicht klar komme wie ich die Größenänderung mit den wechselnden URLs in CSS und HTML referenzieren kann. Suche seit Tagen nach einer Lösung.

[Matthias Scharwies]

Servus Petro74!

Möchte unterschiedlich große SVG Graphiken in mein Projekt einbinden und dabei allen eine einheitliche Größe geben.

Rastergrafiken haben in ihren Metadaten eine intrinsische Größe, SVGs nicht unbedingt, da man die internen width- und height-Angaben weglässt.

Was ein SVG braucht und meistens auch hat, ist das viewBox-Attribut:

• SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten

So skaliert es den sichtbaren Inhalt.

Eine gute Demo ist dieses hier: sarasoueidan.com/interactive-svg-coordinate-system/

Das möchte ich mit CSS bewerkstelligen weil es sich um eine größere Menge von Graphiken handelt.

SVG mit img einbinden

Du bindest deine Grafiken mit img ein? Dort hast du 2 Möglichkeiten:

• über das width- und height-Attribut.
• Über einen container (div, besser figure), der die Größe des Bildes festlegt.

Hier hatte ich das gleiche Problem: 3 Spalten mit unterschiedlich großen SVGs, die ich aus Wikimedia Commons verlinkt hatte:

Beispiel:SVG-Infografik-1.html (Mit Tab bis Kapitel 6 tabben)

Ich habe erst mit CSS experimentiert, dann aber den unterschiedlich breiten Grafiken einfach feste Höhen und Breiten gegeben:

<figure>
	<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" alt="SVG-Logo" width="150" height="150">
</figure>    
<figure>    
	<img src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg" alt="Selfhtml"  width="150" height="150">
	<figcaption></figcaption>
</figure>  

figure-Elemente und die img innen drin können mit CSS gestylt werden:

HTML/Tutorials/Bilder_im_Internet/Bilder_mit_CSS_formatieren

Meine Schwierigkeit ist dass ich nicht klar komme wie ich die Größenänderung mit den wechselnden URLs in CSS und HTML referenzieren kann. Suche seit Tagen nach einer Lösung.

SVG inline einbinden

• SVG/Tutorials/Einstieg/Einbindung von SVG in Webseiten

Das ist wsl. nicht dein Problem, oder?

Falls doch, melde dich bitte noch einmal, evtl. mit Live-Beispiel.

Herzliche Grüße

Matthias Scharwies

[petro74]

Danke Matthias, habe entscheidendes übersehen! Liegt am Alter nicht an der Bearbeitungszeit, lebe zur Zeit 5 Zeitzonen weiter westlich. Habe ganz vergessen dass ich auch das Ganze als ungeordnete Liste begonnen habe. Derzeit habe ich dazu in meiner externen CSS Datei folgendes notiert

.blu_ball { list-style-image:url('../gif/balls/b_blue.gif'); }

und im Projekt selbst

<ul class="blu_ball">

Da der blaue Ball schon die gewünschte Größe hatte brauchte ich diese nicht erst anpassen. Aber auf die Dauer und im Gesamteindruck war mir das zu Öde.

Und jetzt stellt sich damit das Problem nochmals anders da.

Vielleicht kann mir jemand nochmals behilflich sein.

[Rolf B]

Hallo petro74,

Vielleicht kann mir jemand nochmals behilflich sein.

Vielleicht könntest Du uns einen Link auf die Seite geben, die das Problem zeigt?

Aus deinen Worten entnehme ich, dass Du SVG Bilder hast, die Du als list-style-image einsetzen möchtest. Die Größe dieser Bilder passt aber nicht. Und jetzt wird es schwierig.

Auf MDN wird eine unglaubliche Menge an Optionen für list-style-image erwähnt, aber entweder ist MDN da einem Troll aufgesessen oder die Spec wurde nach Verfassen des Artikels drastisch eingedampft.

Die Ursprungs-Spec erlaubt die Angabe einer URL, als URL(...) Angabe. Die neuere Spec erlaubt noch zusätzlich die Angabe von Gradienten.

Und das war's. Kein Resizing. Eine Skalierung des list-style-image über das ::marker Pseudoelement ist mir nicht gelungen.

Ich würde an dieser Stelle zu einem Trick greifen. Du kannst list-style-type:none setzen und dem li-Element ein Background-Image geben, das Du so platzierst und skalierst, als wäre es der List-Marker. Hier kannst Du deine SVGs einbinden und sie auch skalieren.

Du musst dafür nur das Padding des ul Elements reduzieren und dem li Element etwas linkes Padding geben, um Platz für den handgemachten Marker zu schaffen.

Aber vielleicht hat ja auch noch jemand eine elegantere Idee.

Rolf

[Matthias Scharwies]

Servus petro74,

lebe zur Zeit 5 Zeitzonen weiter westlich.

Neufundland (deswegen blue balls) oder DDR (Deutsche Dominikanische Republik)? 😀duckundwech

Ich würde an dieser Stelle zu einem Trick greifen. Du kannst list-style-type:none setzen und dem li-Element ein Background-Image geben, das Du so platzierst und skalierst, als wäre es der List-Marker. Hier kannst Du deine SVGs einbinden und sie auch skalieren.

Du musst dafür nur das Padding des ul Elements reduzieren und dem li Element etwas linkes Padding geben, um Platz für den handgemachten Marker zu schaffen.

Aber vielleicht hat ja auch noch jemand eine elegantere Idee.

• HTML/Tutorials/Listen/Gestaltung_mit_CSS

a. mit dem ::marker-Selektorr (nicht im IE)

b. mit einem Pseudo-Element li::before (alle Browser)

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

mit li::before kriegt man was hin, ok, man muss aber außer den Padding-Spielereien auch noch mit text-indent die erste Zeile des <li> Elements zurecht schieben. Alternativ positioniert man ::before absolut und schiebt es darüber auf den Platz des list bullets.

Und man muss ein Whitespace-Zeichen in den Content legen, das nicht das normale Space ist (und zwar als CSS Escape-Sequenz: \A0).

Und vor allem muss man auch für das ::before Pseudoelement mit dem background-image arbeiten.

Die content:url(...) Eigenschaft von ::before und ::marker zieht das Bild nämlich wieder in intrinsischer Größe herein, und ich finde keine Möglichkeit, es zu skalieren.

Mit ::marker bin ich nicht weitergekommen, weil da nur wenige CSS Properties zulässig sind.

Es ist alles lääästig.

Rolf

[petro74]

Möchte eigentlich nicht unbedingt mit Unicode weiter machen. Habe ganz bewusst mich für svg Bilder entschieden damit die Site lebhafter werden und auch mehr Übersicht bieten sollen. Da das gesamte Projekt eigentlich nur eine Liste ist sollen die svg`s dieses jetzt auflockern. Bislang hat das jeweilige Kapitel einen blauen Ball vorangestellt bekommen, jetzt sollen es Logos bzw. Wappen sein die den jeweiligen Text symbolisieren.

Muss mich damit wohl mit dieser Vorstellung von der klassischen HTML Liste verabschieden.

[Matthias Scharwies]

Olá!

Möchte eigentlich nicht unbedingt mit Unicode weiter machen. Habe ganz bewusst mich für svg Bilder entschieden damit die Site lebhafter werden und auch mehr Übersicht bieten sollen. Da das gesamte Projekt eigentlich nur eine Liste ist sollen die svg`s dieses jetzt auflockern. Bislang hat das jeweilige Kapitel einen blauen Ball vorangestellt bekommen, jetzt sollen es Logos bzw. Wappen sein die den jeweiligen Text symbolisieren.

Das geht: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Listen/Gestaltung_mit_CSS#SVG_als_Pseudoelement

Du musst den SVG aber die gewünschte Größe als width- und height-Attribut mitgeben. Also alles von Wikimedia runterladen und dann maso menos width="36px" height="24px" in das svg-Element kopieren.

Muss mich damit wohl mit dieser Vorstellung von der klassischen HTML Liste verabschieden.

Nein, alles gut!

Muitas saudações!

Matthias Scharwies

[Matthias Scharwies]

Olá!

Ich habe jetzt anstelle des Listenmarkers (mit list-style:none ausgeblendet) ein Pseudoelement.

Da dieses zwar ein SVG nimmt; die meisten aber kein width- und height-Attribut haben, habe ich das Pseudoelement mit fester Größe definiert und leer gelassen. Und das SVG als Hintergrundbild festgelegt.

Das kannst du über Klassen steuern.

HTML/Tutorials/Listen/Gestaltung_mit_CSS#SVG_als_Pseudoelement

Muitas saudações!

Matthias Scharwies

[Rolf B]

Hallo petro74,

du darfst das HTML Strukturelement "Liste" und das CSS Layout "eingerückt mit Punkten davor" nicht verwechseln.

Wenn deine Daten von ihrer Bedeutung her eine Liste sind, dann ist es absolut richtig, sie auch im HTML als Liste zu markieren.

Und wenn Du den Listenpunkten Bildchen statt dröge Blobs voranstellen willst, dann haben wir ja nun etliche Möglichkeiten vorgestellt, wie man das machen kann. Es geht nur eben nicht mit list-style-image, weil ein mit url(...) hereingezogenes Bild nicht skaliert werden kann. Oder du musst die Bilder vorher vorbereiten und so skalieren, dass die Größe stimmt.

Mittens li:nth-of-type(5n), li:nth-of-type(5n+1), ... kannst Du beispielsweise auch die Bildchen im Fünferrhythmus durchwechseln.

Rolf