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:

Softwaretool – Videofilter

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wie in vorherigen Artikel bereits beschrieben ......
den ganzen Artikel lesen ...


Softwaretool: Elektronik Widerstandstabelle

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


Bildschirmaufzeichnungstool für Windows und MAC

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


Videobilder erstellt mit den Tools unter der Kategorie ‚Foto editieren‘

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Unter der Kategorie "Foto editieren" habe ich ......
den ganzen Artikel lesen ...


Softwaretool, dass ein Foto wie gemalt aussehen lässt

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Im vorherigen Artikel habe ich ein PHP-Script ......
den ganzen Artikel lesen ...


einfaches WordPress UTF8-Plugin

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Dies ist nur ein Beispiel eines sehr einfache ......
den ganzen Artikel lesen ...


kurze Anleitung – Ausdrucken eines Zahnrades mit einem 3D-Drucker

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Das Ausdrucken von Gegenständen mit einem 3D ......
den ganzen Artikel lesen ...


kostenloser Google-SiteMap-Generator

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Auch auf der Seite (https://www.google.com/we ......
den ganzen Artikel lesen ...


JavaScript: Bilder und Texte auf der Webseite verschieben, Größe ändern und Textinhalt ändern

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wie unten im Rahmen eingefügt, habe ich ein ......
den ganzen Artikel lesen ...


Softwaretool: Projekte und Termine planen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Ein Termin- bzw. Projektplaner gehört im Ber ......
den ganzen Artikel lesen ...