Grafik

Scalable Vector Graphics und WordPress

SVG (Abkürzung für “Scalable Vector Graphics”) ist ein menschenlesbares Format, das mit einem einfachen Texteditor bearbeitet werden kann. Man kann es durchsuchen und komprimieren, man kann es automatisiert erstellen und verändern, es kann, unter (X)HTML gemischt, ein integraler Bestandteil einer Webseite sein, man kann es animieren, es kann zum Erstellen von Desktopumgebungen verwendet werden – oder aber, natürlich, um damit fantastische Kunstwerke zu erstellen.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels “Scalable Vector Graphics und WordPress” schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

SVG ist ein freies, quelloffenes, standardisiertes Dateiformat für Vektorgrafiken. Es wird vom W3C (World Wide Web Consortium), der wichtigsten internationalen Standardisierungsinstanz für das Internet, entwickelt und gepflegt.

Was wir tun

Wir helfen Unternehmen, Marken und ihren Werbeagenturen, XR-Erlebnisse zu schaffen, die helfen, den Umsatz zu steigern.
Charakterdesign / Maskottchen

Gerne unterstützen wir Sie bei der Planung, Durchführung und Optimierung Ihrer 3D Projekte. Beliebte Schlüsselworte: Skulpturen, Maskottchen, Low Poly, Natur und Weltraum.
Machen Sie Ihr nächstes 3D-Projekt zu einem Erfolg! ✓schnell ✓professionell ✓unkompliziert.

W3C (World Wide Web Consortium)

Das World Wide Web Consortium (W3C) ist ein internationales Konsortium, in dem Mitgliedsorganisationen, ein fest angestelltesTeam, und die Öffentlichkeit gemeinsam daran arbeiten, Web-Standards zu entwickeln. Ziel des W3C ist:

Dem World Wide Web dadurch seine vollen Möglichkeiten zu erschließen, dass Protokolle und Richtlinien entwickelt werden, die ein langfristiges Wachstum des Web sichern.

W3C entwickelt Web-Standards und Richtlinien

W3C verfolgt seine Ziele vor allem durch die Entwicklung von Web-Standards und Richtlinien. In den ersten zehn Jahren seiner Arbeit hat das W3C mehr als 80 W3C Recommendations herausgegeben. Das W3C engagiert sich auch in Ausbildung und Verbreitung der Standards, entwickelt Software und dient als offenes Diskussions-forum über das Web. Damit das Web sein volles Potential erreichen kann, müssen die fundamentalen Web-Technologien kompatibel untereinander sein und mit jeder beliebigen Hard- und Software, die eingesetzt wird, um auf das Web zuzugreifen, zusammen arbeiten. Das W3C bezeichnet dieses Ziel als “Web Interoperabilität”. Durch das Veröffentlichen von offenen (nicht-proprietären) Standards für Web-Sprachen und -Protokolle versucht das W3C, eine Marktfragmentierung –und damit eine Fragmentierung des Web– zu vermeiden.

Beispiel

Scalable Vector Graphics und WordPress 1

<svg version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 2784 4079" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Copyright 2016 blog.r23.de -->

<rect width="2784" height="4079" fill="#FFFFFF" />
<path id="Polygon_1_1" fill="#FFE000" stroke="#FFE000" stroke-width="1" d="M97.00,97.00 L515.49,97.00 L515.49,106.16 C516.00,107.69 518.04,105.15 518.55,106.16 C519.06,107.18 519.57,111.26 521.60,3979.53 L521.60,3982.58 L97.00,3982.58 L97.00,97.00 Z "/>
....

Wie leicht aus einer Grafik skalierbare Vektoren werden können, überrascht doch immer. Ich verwende hierbei eine leichte, vollautomatisierte Methode, die trotzdem noch Einstellungsmöglichkeiten zulässt. Stimmt: die Umsetzung ist hier nicht immer perfekt, aber es entsteht eine brauchbare Basis, die sich leicht von Hand in Inkscape optimieren lässt.

Inkscape

Inkscape ist eine freie, plattformunabhängige Software zur Bearbeitung und Erstellung zweidimensionaler Vektorgrafiken. Das Programm eignet sich zum Erstellen einseitiger Dokumente wie Logos, Vektorkunst, technischen Diagrammen, Landkarten, Stadtplänen, Flugblättern, CD-Motiven, Postern, Schriftzügen, Comics usw.

Arbeitsdateien werden in einem Format, welches auf dem quellenoffenen, auf XML-basierenden Scalable Vector Graphics W3C-Standard basiert, gespeichert. Aufgrund dessen lassen sich Arbeitsdateien ohne Konvertierung in vielen Bildbetrachtern darstellen.

Vector Art

Zukünftig biete ich euch Vektor Art an. Aus deinem Foto erstelle ich dir ein Vector Art Bild. Ich freue mich auf diese neue ART Cartoon in meinem Atelier. Aus deinen Fotos (JPG-Dateiformat) erstelle ich in Handarbeit Vector Art (SVG-Dateiformat). Auf dieser Seite zeige ich zurzeit eine vollautomatisierte Methode, die ich für weiter

Pixelgrafiken

In einer Pixelgrafik wird jeder Bildpunkt mit einer bestimmten Farbe belegt. Je mehr Bildpunkte für eine Region des Bildes zur Verfügung stehen, desto höher ist die Qualität. Vergrößert man allerdings eine solche Pixelgrafik kann die Software eigentlich nicht mehr machen, als die Pixel zu verdoppeln. So wird die ganze Angelegenheit sehr grob und unschön.

Vektorgrafiken

Hier werden keine Pixel gespeichert, sondern Punkte die miteinander verbunden werden. Linien und Kurven werden verwendet um ein Bild zu erstellen. Das hat den Vorteil, dass das Bild beliebig groß ausgedruckt werden kann, ohne einen Qualitätsverlust. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einem kleinen Plugin beheben wir dieses Problem in unserem Blog.

WordPress Plugin für Scalable Vector Graphics

Damit wir unsere Dienstleistungen erklären und zeigen können – möchten wir SVG-Dateien in die WordPress-Mediathek hochladen. Mit diesem Posting möchten wir auch das Plugin testen.

Graffiti Area

SVG lernen

Technische Informationen

Allgemeine Informationen

  • SVG-Grundlagen von David Dailey
  • SVG-Themen im Blog von Peter Collingridge
  • Learn SVG – Umfassendes Lehrbuch über die fortgeschrittenen SVG-Aspekte von Jon Frost, Stefan Goessner und Michel Hirtzler, frei verfügbar zum Lesen online. Wegen des Alters des Werkes sind möglicherweise nicht mehr alle vorgestellten Techniken ganz zeitgemäß, die Erklärungen zu den grundlegenden Eigenschaften und Prizipien sind jedoch immer noch sehr nützlich.
  • Tavmjong Bahs Blog gibt eine Menge Hintergrundinformationen zur Entwicklung der SVG-Spezifikation (und enthält auch viele weitere Informationen zu SVG- und Inkscape-Themen)

Tutorials

Dies ist nur eine kleine Auswahl von all den vielen Tutorials, die im Internet zu finden sind:

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.


Beitragsautor R23

3D-Modelle für Metaverse und Echtzeit-Anwendungen: VR, AR und mehr

Als Atelier für Metaverse Inhalte und interaktive Markenerlebnisse bieten wir Ihnen eine breite Palette an 3D-Modellen, die sich perfekt für Echtzeitanwendungen eignen. Ob Sie in eine virtuelle Welt eintauchen wollen (Virtual Reality, VR), virtuelle Objekte in die reale Welt einblenden wollen (Augmented Reality, AR) oder beides kombinieren wollen (Mixed Reality, MR) – unsere Modelle sind für alle Formen von Extended Reality (XR) optimiert. Dank unserer Expertise können Sie wertvolle Entwicklungszeit und -kosten sparen. Nutzen Sie unsere 3D-Modelle als Prototypen für Ihre XR-Erfahrungen oder integrieren Sie sie in Ihr fertiges Projekt. Wir stehen Ihnen gerne mit Rat und Tat zur Seite und sorgen dafür, dass Ihre Markenerlebnisse einzigartig und unvergesslich werden.

3D-Visualisierung
3D-Scan – Dienstleistung

Angebot anfordern


Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert