Pixelfans

20 Feb 2011

@media in SVG

Immer mehr Seiten nutzen SVG zur Darstellung von Diagrammen. Das hat einen großen Vorteil, lassen sich doch SVG's direkt aus Datenbanken erzeugen. Das ist zwar nach meiner Meinung bisher nur ein Bruchteil, was damit machbar ist, aber ein typisches Problem wird jetzt schon deutlich: Die Ausgabe der Grafik an verschiedene Ausgabegeräte.

Hier zeigt sich ein weiterer Vorteil des Formates - @media-Regeln werden interpretiert.

Ebenso, wie bei HTML ist es dazu nötig, innerhalb des CSS z.B @media print zu formulieren. Verwirrend ist es vielleicht, das CSS in SVG nicht ganz so mächtig ist. Viele Stile lassen sich auch als Atrribute formulieren, was typischerweise die älteren Programme zur Erstellung von SVG-Grafiken nutzen. Ein fill="red" ähnelt style="fill:red". Stile überschreiben die Attribute, wie

dieses Beispiel

illustriert. Filter, Farben usw. lassen sich bequem über Styles zuweisen und damit zwischen Druckansicht und Bildschirmansicht differenzieren.

Diese Geschenkebox

zeigt, wie so etwas aussehen könnte. In Verbindung mit media-queries sind hier auch unterschiedliche Größen der Grafik in Abhängigkeit vom Endgerät vorstellbar.

geschrieben von Pawel


Kommentare

Kommentar verfassen

Dieser Eintrag kann nicht mehr kommentiert werden.