Mit Hilfe der SVG-Technologie können interessante Interaktionen und Animationen auf einer Website realisiert werden. Leider ist der Browser-Support höchst unübersichtlich, denn ob etwas funktioniert oder nicht ist davon abhängig wie die SVG eingebunden wurde und welche Sprache (JavaScript, SMIL, CSS) zur Erzeugung der Animation verwendet wurde. Wir haben daher für die interne Nutzung eine Übersicht erstellt, die wir euch natürlich nicht vorenthalten wollen.
Beitrag zu Ende lesen
Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.
Beitrag zu Ende lesen
SVG-Animationen mit Hilfe von CSS Keyframe-Animationen oder Transitions haben in der letzten Jahren stark an Beliebtheit gewonnen. Das Ein- und Ausblenden von Objekten, Drehungen, Verschiebungen und sonstige Transformationen stellen kein Problem dar. Doch für Morphing musste man auf Technologien wie SMIL oder JavaScript zurück greifen. Nun ist Morphing auch mit CSS möglich.
Beitrag zu Ende lesen
Mit SVG/CSS-Animationen lassen sich ansehnliche Effekte erzeugen. Sehr beliebt ist beispielsweise der sog. »Line-Draw-Effect«, bei dem ein Pfad animiert gezeichnet wird. Um den Effekt herzustellen, behilft man sich einem Trick im Zusammenhang mit gestrichelten Linien. In diesem Beitrag erklären wir das Grundprinzip anhand eines leicht nachvollziehbaren Beispiels.
Beitrag zu Ende lesen
Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken im Browser dargestellt werden. Wie bei Vektor-Grafiken üblich, werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. SVG-Grafiken haben dadurch eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren und mit CSS oder JavaScript animieren oder verändern.
In diesem Artikel fassen wir zusammen, was ihr beim Erstellen von SVGs beachten solltet.
Beitrag zu Ende lesen
Photoshop ist als pixelbasiertes Bildbearbeitungsprogramm nicht die ideale Grundlage für ein Vektor-Format wie SVG. In den neueren Photoshop-Versionen kamen allerdings einige Funktionen hinzu, mit denen es möglich ist in Photoshop »echte« Vektoren zu zeichnen. Und mit Hilfe des Photoshop-Generators oder des »Schnell Exports« ist es möglich Vektor-Formen als SVG-Grafik zu exportieren. Was es dabei zu beachten gibt, haben wir in diesem Beitrag zusammengefasst. Beitrag zu Ende lesen
Das Dateiformat SVG (Scalable Vector Graphic) ist die Zukunft der Grafikformate im Web. Sofern sich SVG gestalterisch anbietet, überzeugt das Vektor-Format mit brillanter Bildqualität auf allen Displaytechnologien (z. B. Retina/HiDPI), stufenloser Skalierbarkeit und verhältnismäßig geringer Dateigröße.
Leider wird SVG in älteren Browsern (< IE8) nicht unterstützt. Bis diese Browser an Relevanz verloren haben, muss also eine Übergangslösung her. Mit Hilfe von Modernizr lässt sich ohne Schwierigkeiten ein sehr wartungsfreundlicher PNG-Fallback herstellen.
Beitrag zu Ende lesen