Site icon Atelier für 3D-Visualisierungen, V/AR. Produktvisualisierung und Rendering. ❤ r23

Scalable Vector Graphics und WordPress

Ralf Dreiundzwanzig
Grafik

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.

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:

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

<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.

SVG lernen

Technische Informationen

Allgemeine Informationen

Tutorials

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

Exit mobile version