schoenberg - think MINI:




SVG: skalierbare Vektorgrafiken in Webseiten einbinden

erstellt am: 11.09.2017 | von: admin | 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

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



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

Beispiel einer ZIP-Anwendung

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Zip-komprimierte Archiv-Dateien sind bereits ......
den ganzen Artikel lesen ...


kleines Ebook zum Thema „Sales Funnel“

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Auf den Begriff --Sales Funnel-- stolpert man ......
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 ...


PHP-Script: Farbfoto und Schwarz-Weiss-Bild nebeneinander

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Bei diesem Fotoeffekt muss man etwas genauer ......
den ganzen Artikel lesen ...


Chatbots: sich mit Roboter-Skripten unterhalten

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Die Aufgabe von Chatbots besteht im wesentlic ......
den ganzen Artikel lesen ...


Softwaretool: Internet Traffic ermitteln

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Nicht nur wenn Sie im Internet surfen wird ei ......
den ganzen Artikel lesen ...


PHP-Script: aus Foto ein Mosaik-Bild erstellen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Dieses PHP-Script erstellt aus einem gewöhnl ......
den ganzen Artikel lesen ...


Softwaretool: offene Ports auf Ihrem PC ermitteln

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Offene Ports stellen zwar nicht grundsätzlic ......
den ganzen Artikel lesen ...


Sugar CRM – „Costumer Relationship Management“-System

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Beinahe alle größeren Unternehmen verwenden ......
den ganzen Artikel lesen ...


Hardware-Daten ermitteln

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Auch viele Hardwaredaten von Ihrem PC lassen ......
den ganzen Artikel lesen ...