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:

persönlich mit Ihrem Namen signierte Ebooks

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Auch mit PHP lassen sich PDF-Dokumente bearbe ......
den ganzen Artikel lesen ...


SEO – WordPress-Plugin

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wenn ein Webseitenbesucher auf die eigene Web ......
den ganzen Artikel lesen ...


Anwendungsbeispiel für SQL-Datenbanken

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wenn man von einer Software aus auf einem PC ......
den ganzen Artikel lesen ...


Blockchain: einfaches Beispiel mit PHP erstellt

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Der Begriff "Blockchain" bedeutet ins Deutsch ......
den ganzen Artikel lesen ...


WordPress-Plugin – SiteMap.xml erstellen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Selbst Google empfiehlt, vom eigenen WordPres ......
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 ...


Softwaretool: Bildteil von Foto nach unten spiegeln

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Häufig sieht man bei Präsentationsbildern, ......
den ganzen Artikel lesen ...


PHP-Script: Foto in Malbuch-Bild umwandeln

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Wie darunter dargestellt, habe ich ein kleine ......
den ganzen Artikel lesen ...


3D-Icons erstellen für Logos, usw.

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Oft ist es notwendig, dass man ein individuel ......
den ganzen Artikel lesen ...


ein 3D-Modell mit WebGL laden

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! 3D-Programme zur Erstellung von 3D-Modellen v ......
den ganzen Artikel lesen ...