nicht angemeldet
Matthias ScharwiesServus 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:
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
Das ist wsl. nicht dein Problem, oder?
Falls doch, melde dich bitte noch einmal, evtl. mit Live-Beispiel.
Herzliche Grüße
Matthias Scharwies
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
Rolf B