schoenberg - think MINI:




SVG: skalierbare Vektorgrafiken in Webseiten einbinden

erstellt am: 11.09.2017 | von: PRIVAT | Kategorie(n): Allgemein, HTML5, HTML5-Animation, JavaScript


Lieber XING-Kontakt, vielen Dank für Ihren Besuch!

Die Bezeichnung SVG ist die Abkürzung von „Scalable Vector Graphics“ und bedeutet auf Deutsch skalierbare Vektorgrafik. Damit lassen sich Vektorgrafiken auch in den derzeit gängigsten Webbrowsern darstellen.

Auch Animationen können z.B. mit JavaScript sehr einfach umgesetzt werden. Grafische Elemente wie Kreis, Ellipse, Rechteck, Pfad, Linie, Texte, usw. dienen dabei als Grundelemente (grafische Primitive), die beliebig kombiniert werden können.

Zu den wesentlichen Vorteilen zählen die Möglichkeit zur größeren Darstellung von Grafiken möglichst ohne Qualitätseinbußen.

Es gibt dazu auch zahlreiche JavaScript Bibliotheken wie z.B. Velocity, SnapSVG, usw. Mit diesen können skalierbare Vektorgrafiken zumeist deutlich einfacher in Webseiten eingebunden, sowie auch animiert werden.

Da es aber auch schon einige solcher JavaScript Bibliotheken gegeben hat, die es mittlerweile nicht mehr gibt bzw. nicht mehr aktualisiert werden, kann es auch hierbei sinnvoll sein, die notwendigen Skripte für Animationen, usw. selbst zu erstellen.

Darunter habe ich ein einfaches Beispiel einer solchen selbst erstellten und animierten skalierbaren Vektorgrafik erstellt.

und hier wie immer ein Glitze-Kleines-Bisschen Werbung :-(

schoenberg - think MINI


Tools, Software & Programme aufgrund DSGVO leider nicht mehr verfügbar !! Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank für Ihr Verständnis und Ihnen schöne Grüße,

Christian Schönberg (privater Blogartikel)

XING.com - Netzwerk für Beruf und Leben     Facebook     Twitter



andere Besucher, die diesen Artikel gelesen haben, fanden auch diese Blogbeiträge interessant:

Google+ API Anwendungsbeispiel

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Auch für die Social Media Plattform Google+ ......
den ganzen Artikel lesen ...


HTML-Editor Miniversion

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wenn man den HTML-Quelltext seiner Webseite s ......
den ganzen Artikel lesen ...


Windows Phone App: Hipstamatic ähnlicher Fotoeffekt

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Hipstamatic ist eine Smartphone App (Android, ......
den ganzen Artikel lesen ...


Windows Store App: Foto mit Instagram ähnlichem Effekt

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Eine wesentliche Neuerung von Windows 8 sind ......
den ganzen Artikel lesen ...


SEO-Tool: Verhältnis von Text zu Content ermitteln

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Eine wichtige Kennzahl im SEO (Suchmaschineno ......
den ganzen Artikel lesen ...


Software zum Passwörter speichern

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Damit man im Internet sicher ist, sollte man ......
den ganzen Artikel lesen ...


JavaScript: eigene Bilder laden und beliebig verschieben, skalieren, usw.

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Im letzten Artikel, habe ich ein JavaScript p ......
den ganzen Artikel lesen ...


WordPress-Plugin – Ticketsystem

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wenn man ein eigenes Produkt (Ebook, Software ......
den ganzen Artikel lesen ...


Softwaretool: Emails empfangen und senden

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Zu den gebräuchlichsten Emailprogrammen unte ......
den ganzen Artikel lesen ...


Windows Phone App: Instagram ähnlicher Fotoeffekt

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Vielleicht kennen Sie die iPhone und Android ......
den ganzen Artikel lesen ...