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:

Informationsgrafiken, engl. Infographics

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Die wesentliche Aufgabe von Informationsgrafi ......
den ganzen Artikel lesen ...


Software für animierte GIF-Bilder

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Auf Webseiten sind animierte GIF-Bilder sehr ......
den ganzen Artikel lesen ...


Softwaretool: WHOIS-Daten ermitteln

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wenn Sie z.B. wissen möchten, wem eine besti ......
den ganzen Artikel lesen ...


Anwendungsbeispiel der Softwaretools von dieser Webseite

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Darunter habe ich 2 Beispielfotos zusammenges ......
den ganzen Artikel lesen ...


PHP-Script: Bildteile freistellen (vereinfacht)

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Unter diesem Link (https://schoenberg.co.at/b ......
den ganzen Artikel lesen ...


nützliche Tastenkürzel für Windows

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Das Windows-Betriebssystem beinhaltet viele T ......
den ganzen Artikel lesen ...


Softwaretool: Computer bereinigen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Am PC sammeln sich mit der Zeit immer mehr Da ......
den ganzen Artikel lesen ...


vom PC die Hardware-ID, … auslesen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! In manchen Situationen (z.B. wenn man beweise ......
den ganzen Artikel lesen ...


Software – in Blogs Kommentare eintragen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wenn Sie eine gute Positionierung bei der Suc ......
den ganzen Artikel lesen ...


Videoclips mit HTML und JavaScript

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Sie haben sicherlich schon öfters Videos ode ......
den ganzen Artikel lesen ...