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!

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

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.

Produktion von 3D-Inhalten

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

• SVG 1.1-Spezifikation
• SVG 2.0-Enwurf der Herausgeber (aktuellste Quelle)
• SVG 2.0-Arbeitsentwurf
• Einführung in SVG vom W3C: “An SVG Primer for Today’s Browsers – W3C Working Draft — September 2010”

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:

• W3 Schools SVG-Tutorial – leichtes Einsteigertutorial
• SVG-Tutorial von Peter Collingrige
• SVG Tutorial von Jakob Jenkov
• SVG-Grundlagen-Tutorials