picard: Skalierbare Grafiken - der beste Weg ..?

Hallo,

Ich würde gern ein frei skalierbares Design für meine neue Webseite basteln.
Was ich damit meine ist das Text nach Belieben vergrößert werden kann, ohne dass das Layout dabei auseinander gesprengt wird.

Allerdings soll nicht nur Text, sondern auch Grafiken sich ohne Probleme vergrößern lassen.

Mein erster Versuch war große Grafiken einzubinden und diese im Standarddesign kleiner darzustellen.
Auf dem Safari werden die Grafiken ganz gut runter skaliert. Im Firefox und IE allerdings sieht es sehr seltsam und unschön aus und Text auf Grafiken wird stellenweise verzerrt oder falsch dargestellt.

Danach dachte ich, ich könnte es mal mit Vektorgrafiken probieren und habe svg-Dateien eingebunden.
Doch auch diese sehen runter skaliert auf eine kleinere Größe sehr hässlich aus im IE und Firefox (versteh ich nicht ganz - sind es doch Vektorgrafiken, die in jeder Größe gleich scharf aussehen sollten).

Gibt es da irgendwelche Tricks um Grafiken auf allen Größenstufen gut aussehen zu lassen?

  1. Auf dem Safari werden die Grafiken ganz gut runter skaliert. Im Firefox und IE allerdings sieht es sehr seltsam und unschön aus und Text auf Grafiken wird stellenweise verzerrt oder falsch dargestellt.

    Kommt auf die Version des Browsers an - der IE7 skaliert schon recht brauchbar, der IE8 imho extrem gut.

    Doch auch diese sehen runter skaliert auf eine kleinere Größe sehr hässlich aus im IE und Firefox (versteh ich nicht ganz - sind es doch Vektorgrafiken, die in jeder Größe gleich scharf aussehen sollten).

    Dass Vektorgrafiken in jeder Größe "scharf" sind, halte ich für ein Gerücht.

    Gibt es da irgendwelche Tricks um Grafiken auf allen Größenstufen gut aussehen zu lassen?

    Nimm eine kleine Grafik und überwache mit JavaScript die Bildgrößen, wenn diese einen bestimmten Schwellwert überschreiten, ersetze das Bild durch ein größeres seiner selbst.