Snap.svg: jQuery für animierte und interaktive Vektorgrafiken

Snap.svg: Für lange Zeit war Flash der Standard für vektorbasierte Animationen im Internet. Doch als die mobilen Endgeräte aufkamen, wurde Flash immer mehr von CSS3 und HTML5 verdrängt. Durch das SVG-Format, das inzwischen von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne PlugIn im Browser dargestellt werden. Snap.svg, die JavaScript-Bibliothek des Unternehmens Adobe, ermöglicht es jetzt auch, Animationen mit SVG-Grafiken zu erstellen.

Snap-svg

Snap.svg

Mit Snap.svg hast du eine tolle Möglichkeit, auflösungsunabhängige und interaktive Vektorgrafiken zu erstellen. Diese Grafiken werden bei allen Bildschirmgrößen sehr gut aussehen. Die JavaScript-Bibliothek wurde entwickelt, um dir die Arbeit mit SVG-Grafiken so einfach wie möglich zu machen.

Snap.svg für moderne Browser

Snap.svg wurde für moderne Browser entwickelt und unterstützt die neuesten SVG-Features wie Clipping, Maskierung, volle Verläufe, Muster, Gruppen und vieles andere. Mit einem einfachen Event-Handling und einer eigenen Animations-Bibliothek bringt die JavaScript-Bibliothek Snap.svg die SVG-Grafiken zum Leben.

Snap.svg ist dafür geeignet, die Grafiken vollständig skriptseitig zu gestalten. Die JavaScript-Bibliothek kann aber auch mit externen SVG-Dateien, aus Programmen wie Inkskape, Adobe Illustrator oder Sketch zusammenarbeiten.

Snap.svg: So wird der Einstieg leicht gemacht

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Dir werden die wichtigsten Fähigkeiten und Arbeitsweisen von Snap in einem kurzen Einführungsvideo verständlich und Schritt für Schritt näher gebracht. Wer lieber liest, findet mit dem interaktiven Tutorial einen perfekten Einstieg in das Thema. Es gibt außerdem eine ausführliche Dokumentation zu Snap.svg, die dem Nutzer online zur Verfügung steht. Diese Dokumentation ist für erweiterte Einsatz-Szenarien geeignet.

Das „jQuery“ für die Manipulation der SVG-Grafiken

Mit etwas JavaScript und der JavaScript-Bibliothek Snap.svgerzielst du schnell beeindruckende Ergebnisse bei der Arbeit mit SVG-Grafiken. Die hilfreiche Dokumentation liefert dir viele anschauliche Beispiele und Ressourcen. So kannst du aus der Bibliothek die nötigen Ergebnisse herausholen. Die Arbeit mit Snap.svg wird dir mit Sicherheit sehr viel Spaß machen.

Auf der offiziellen Internetseite von Snap.svg findest du weitere Informationen über die kostenlose SVG-Bibliothek und auf GitHub.

author avatar
Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur / WordPress Agentur Wolkenhart® und freier Dozent an der Dualen Hochschule Baden-Württemberg.

4 thoughts on “Snap.svg: jQuery für animierte und interaktive Vektorgrafiken

  1. Jan König

    Snap ist definitiv ein interessantes Gimmick. Obwohl es das schon seit längerem zu geben scheint, ist es irgendwie komplett an mir vorbeigezogen. Ich denke, es lohnt sich definitiv sich weiter mit Snap zu beschäftigen und ggf. Gimmicks in die Websites einzubauen. Ein ganz gutes Beispiel ist http://pbskids.org (welches als Beispiel auf der Snap Website angegeben wurde).

    1. Mika Gustavson Post author

      Hi Jan,

      ich kenne es schon seit ca. einem Jahr hatte mich aber zu der Zeit nicht damit beschäftigt. Ich denke man kann schon sehr cooles damit erreichen.

      Gruß Mika

  2. Rosa

    Ich kenne mich nicht optimal mit allen Technikdingen aus, sodass mir auch dieses Gimmick bisher gänzlich unbekannt war. Das macht aber nichts, weil ich es ja jetzt durch diesen tollen Blog kennen lernen durfte.

Comments are closed.