Scalable Vector Graphics und WordPress

Allgemein 0 Kommentare

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.

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:

Verwandeln Sie Ihren Commerce mit 3D-Visualisierung von R23

Ein Maskottchen / Charakter transportiert die Botschaft Ihrer Dienstleistungen und Produkte nach außen. Darüber hinaus kann ein Maskottchen / Charakter für einen Wiedererkennungswert sorgen.

Charakterdesign / Maskottchen

Wir bieten Ihnen Maskottchen / Charakter Design für Ihre Marke, in 3D oder als Zeichnung. Ihre einzigartige Sympathiefigur.

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:

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.

Scalable Vector Graphics und WordPress 2

R23 Newsletter

ABONNIEREN SIE UNSEREN NEWSLETTER

Liebe Leserin, lieber Leser,

wenn Sie sich für aktuelle Themen und Tipps rund um unser Atelier für Virtual & Augmented Reality interessieren, dann melden Sie sich jetzt für unseren kostenlosen Newsletter an. Sie erhalten wöchentlich eine E-Mail mit spannenden Artikeln, exklusiven Angeboten und praktischen Ratschlägen.

Um sich anzumelden, füllen Sie einfach das folgende Formular aus und klicken Sie auf “SETZ DICH AUF DIE LISTE”. Sie können sich jederzeit wieder abmelden, wenn Sie möchten.

Wir freuen uns auf Ihre Anmeldung!

Wir senden keinen Spam! Erfahren Sie mehr in unserer Datenschutzerklärung.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!
R23
R23 : Metaverse, Augmented Reality, Virtual Reality

Kommentar verfassen

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

Ralf Dreiundzwanzig: Atelier für Virtual & Augmented Reality

Aktuell

Virtuelle Influencerin

Charakterdesign
In unserem r23 Atelier in Hagen entwerfen wir für Ihr Unternehmen, Ihre Organisation oder Ihr Projekt die passende virtuelle Influencerin. Wir entwerfen gerade eine virtuelle Influencerin für uns selbst. Verfolgen Sie die Entstehung auf https://blog.r23.de/tag/claudia/
Virtuelle Influencer von R23