kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

SVG Browser-Support für Animationen und Interaktionen

SVG

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

SVG-Grafiken in Websites/HTML-Seiten einbinden

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

Gezeichnete SVG-Pfade mit CSS animieren

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

Jonas Hellwig im Interview zu »Gestaltung & Code«

Im Oktober startet die »WebTech Conference« in München. Im Interview mit dem Journalisten Thomas Wießeckel spricht Webdesigner Jonas Hellwig über Gestaltung und Code, ein Thema, das er auch als Trainer auf der »WebTech Conference« und der »International PHP Conference« umfassend beleuchtet.

Dieses Interview ist zuerst in gekürzter Form bei t3n erschienen. Hier könnt ihr die fehlenden zwei Drittel nachlesen.

Beitrag zu Ende lesen

SVG-Grafiken erstellen, exportieren und einbinden

SVG

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

SVG-Grafiken mit Photoshop speichern/exportieren

SVG mit Photoshop

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