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


Virenfrei und Zertifizierung: Alle Tools auf dieser Webseite sind virengeprüft (unter https://www.virustotal.com/ mit 47 Virenscanner) und ausserdem habe ich als Urheber und verifizierter Herausgeber der Softwaretools ein Zertifikat (dieses können Sie abrufen, wenn Sie das jeweilige Softwaretool mit der rechten Maustaste als Administrator starten und dann mit 'Details anzeigen' das Sicherheitszertifikat abrufen). Hinsichtlich dieser Webseiten, Artikeln, Skripte, Tools, Ebooks, usw. gilt vollständiger Haftungsausschluss. Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank 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:

Raspberry Pi: Leuchtdioden per Android Smartphone ansteuern

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


kostenloses Datensicherungstool (Backup)

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Um Datenverluste zu vermeiden sollte die Date ......
den ganzen Artikel lesen ...


HTML5: online Spiele erstellen mit JavaScript und PHP

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Noch vor einigen Jahren wurde als Plattform z ......
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 ...


PHP-Skript: Farbfilter in beliebiges Foto einfügen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wenn man ein Foto z.B. für ein Werbeplakat o ......
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: Sound Editor

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Oft ist es nötig Audiodateien nachzubearbeit ......
den ganzen Artikel lesen ...


Ebooks – Videomarketing, Emailmarketing, Mobile Marketing, ..

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Im Bereich Internet-Werbung gibt es in Bezug ......
den ganzen Artikel lesen ...


Testtool für IBAN-Nr.

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Vorrausichtlich noch 2014 werden die Kontonum ......
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 ...