Komischer Typ und Köter
AW: Richtiger Nutzen von SVG in responsive Design
Hallo liebe Leute,
ich sitze - bei bestem Wetter - in meiner Bude und versuche ein Problem zu lösen an dem ich seit gestern Nacht sitze. Und so langsam verzweifle ich zunehmend. Ich brauch jetzt mal Hilfe von jemandem, der sich damit richtig auskennt
Worum gehts? Um den korrekten Einsatz von SVG-Grafiken in responsiven bzw. fluiden Layouts.
Ich versuche nun seit Stunden eine SVG Grafik als Logo zu platzieren, die sich dann je nach Bildschirmgröße mitskaliert, also auch entsprechend kleiner wird. Bis zu einem gewissen Grad funzt das auch, aber sobald man den Bildschirm ganz klein zieht, dann hab ich zwischen Logo und dem nachfolgenden Container massig viel Platz.
Das folgende Bild zeigt mein Problem deutlich:
Gelöst ist es derzeit so: Eine IMG-Datei (transparentes PNG) liegt in einem Container, das SVG als Background-Grafik via CSS.
Scheinbar aber kann ich die größe der transparenten Grafik nicht so sauber relativ steuern, wie gedacht...
Was ist nun mein Problem?? Der Abstand unten...eigentlich sollte das beim kleiner ziehen immer so aussehen wie in dem rechten Screenshot, heisst, der Inhalt soll quasi immer genau unter der Grafik stehen....
Ich habe dazu auch mal ein kurzes Video gemacht, das euch vllt mein Problem besser verdeutlicht:
KEINE SORGE NUR 12MB gross!!!!!!
Natürlich könnte ich all diese Probleme umgehen, wenn ich dem SVG feste Pixelwerte vergebe. Aber das will ich so einfach derzeit nicht akzeptieren, der Trick beim SVG ist ja gerade, dass es sich verlustlos skalieren lässt.
Also muss das Ganze ja auch mit relativen Werten funktionieren.
Ich freue mich über jede Hilfe. Und natürlich gerne auch über eine anregende Diskussion zum Thema Responsive / Fluid und korrekter Einsatz von SVG-Grafiken.
Die Beispielwebseite zum nachvollziehen findet ihr hier:
VIELEN VIELEN DANK!!!!
Gruss Whykiki
Ich habs nun selbst gelöst.....der Trick ist die transparente Grafik in den richtigen Abmessungen zu erzeugen.
Hallo liebe Leute,
ich sitze - bei bestem Wetter - in meiner Bude und versuche ein Problem zu lösen an dem ich seit gestern Nacht sitze. Und so langsam verzweifle ich zunehmend. Ich brauch jetzt mal Hilfe von jemandem, der sich damit richtig auskennt
Worum gehts? Um den korrekten Einsatz von SVG-Grafiken in responsiven bzw. fluiden Layouts.
Ich versuche nun seit Stunden eine SVG Grafik als Logo zu platzieren, die sich dann je nach Bildschirmgröße mitskaliert, also auch entsprechend kleiner wird. Bis zu einem gewissen Grad funzt das auch, aber sobald man den Bildschirm ganz klein zieht, dann hab ich zwischen Logo und dem nachfolgenden Container massig viel Platz.
Das folgende Bild zeigt mein Problem deutlich:
Gelöst ist es derzeit so: Eine IMG-Datei (transparentes PNG) liegt in einem Container, das SVG als Background-Grafik via CSS.
Scheinbar aber kann ich die größe der transparenten Grafik nicht so sauber relativ steuern, wie gedacht...
Code:
<header id="logo-header">
<img src="/joomla31/templates/template-less-v2/images/trans.png" />
</header>
Code:
#logo-header{
width: 100%;
height:100%;
display:block;
float:left;
}
#logo-header img{
max-width: 960px;
max-height: 300px;
width: 100%;
display:block;
background:url(../images/logo.svg) no-repeat;
background-size: contain;
background-position: top center;
margin: 0 auto;
}Ich habe dazu auch mal ein kurzes Video gemacht, das euch vllt mein Problem besser verdeutlicht:
KEINE SORGE NUR 12MB gross!!!!!!
Natürlich könnte ich all diese Probleme umgehen, wenn ich dem SVG feste Pixelwerte vergebe. Aber das will ich so einfach derzeit nicht akzeptieren, der Trick beim SVG ist ja gerade, dass es sich verlustlos skalieren lässt.
Also muss das Ganze ja auch mit relativen Werten funktionieren.
Ich freue mich über jede Hilfe. Und natürlich gerne auch über eine anregende Diskussion zum Thema Responsive / Fluid und korrekter Einsatz von SVG-Grafiken.
Die Beispielwebseite zum nachvollziehen findet ihr hier:
VIELEN VIELEN DANK!!!!
Gruss Whykiki
Ich habs nun selbst gelöst.....der Trick ist die transparente Grafik in den richtigen Abmessungen zu erzeugen.
Zuletzt bearbeitet von einem Moderator:
