Vektorgrafik

Grafik von AE bis Mikrometer

Eins meiner professionellen Leidenschaften ist, das Erstellen von Vectorgraphics mit Inkscape.

Diese Leidenschaft begründet sich in vielen Punkten:

• Super – SVG ist eine freie Sprache, lingua franca
• Super – Für modernstes responsives Webdesign
• Super – Bild-Qualität auch bis zu einer astronomischen Einheit, der Abstand Sonne und Erde
• Super – Genauigkeit mit GUI mindestens bis zu einem Mikrometer = 0,001 mm
• Super – Genauigkeit ohne GUI mindestens bis zu 0,000001 mm
• Super – SVG ist eine Untermenge der XML-Markup, meist verbreitetste Sprache
• Super – Docking anderer Sprachen möglich, wie Python und CSS
• Super – Meist kleinste Speicherbeanspruchung gegenüber anderen Bildformaten
• Super – SVG kann auch noch intern gezippt werden, SVGZ
• Super – Einfachste Einbindung von vielen Tausenden UTF8-Symbolen
• Super – Beste Konvertierung in andere moderne Bildformate, wie PNG und WEBP
• Super – Bestens unterstütztes Bildformat in Browsern, Bildprogrammen, Betriebssystemen

Niemand kann das im Grafikbereich überbieten!

Inhaltsverzeichnis

• Grafik von AE bis Mikrometer
• Inhaltsverzeichnis
• Vektorgrafik versus Pixelgrafik
• Galerien
• Galerie „Buchstabe / letter“
• Galerie „Büro / office“
• Galerie „Computer“
• Galerie „Farben / colours“
• Galerie „Feier / celebration“
• Galerie „Gebäude / building“
• Galerie „Geld / money“
• Galerie „Gradienten“
• Galerie „Hardware“
• Galerie „Internet“
• Galerie „Landschaft / landscape“
• Galerie „Lebensmittel / food“
• Galerie „Logo / logo“
• Galerie „Mahlzeit / meal“
• Galerie „Material / material“
• Galerie „Mensch / human“
• Galerie „Militär / military“
• Galerie „Oberfläche / surface“
• Galerie „Pflanze / plant“
• Galerie „Portal / portal“
• Galerie „Raum / space“
• Galerie „Schalter / switch“
• Galerie „Streifen / stripes
• Galerie „Studien“
• Galerie „Textilien / textiles“
• Galerie „Tier / animal“
• Galerie „Verkehr / traffic“
• Galerie „Fenster / windows“
• Galerie „Wissenschaft / science“
• Galerie „Zahlen / numbers“
• SVG im reinen Textmodus

Vektorgrafik versus Pixelgrafik

Nur ganz kurz; die Vektorgrafik wird mit einer Beschreibungssprache erstellt und die Pixelgrafik mit einzelnen Farb-Pixeln. Aus diesem Grund hat die Vektorgrafik eine wesentlich höhere Genauigkeit, beste Qualität und kleinere Speichermenge.

Korrekt heißt es „Skalierbare Vektorgrafik“ und englisch „Scalable Vector Graphics“, auch SVG.

Galerien

Um die Möglichkeiten von Vektoren für die Grafikerstellung zu demonstrieren, habe ich mal einen Querschnitt meiner Arbeiten als Galerien zusammengestellt.

Alle Grafiken werden hier aber in den, ebenfalls freien, WEBP-Dateiformat und PNG-Dateiformat gezeigt. Ich nutze die sichere SVG-Sperre von WordPress.

Die Konvertierung aller Bilder in Größe, Qualität und Dateiformat dauerte weniger als 1 Minute, durch ein eigenes Script.

Achtung, niemand darf diese Grafiken nutzen, da viele schon Eigentum von Kunden sind und die restlichen Bilder mein Eigentum sind.

Galerie „Buchstabe / letter“

Galerie „Computer“

Galerie „Farben / colours“

Galerie „Feier / celebration“

Galerie „Gebäude / building“

Galerie „Geld / money“

Galerie „Gradienten“

Galerie „Hardware“

Galerie „Internet“

Galerie „Landschaft / landscape“

Galerie „Lebensmittel / food“

Galerie „Logo / logo“

Galerie „Mahlzeit / meal“

Galerie „Material / material“

Galerie „Mensch / human“

Galerie „Militär / military“

Galerie „Oberfläche / surface“

Galerie „Pflanze / plant“

Galerie „Portal / portal“

Galerie „Raum / space“

Galerie „Schalter / switch“

Galerie „Streifen / stripes

Galerie „Studien“

Galerie „Textilien / textiles“

Galerie „Tier / animal“

Galerie „Verkehr / traffic“

Galerie „Fenster / windows“

Galerie „Wissenschaft / science“

Galerie „Zahlen / numbers“

SVG im reinen Textmodus

Hier eine Herzsinus-Kurve als Grafik und anschließend im Textmodus, der natürlich viel genauer ist.

Den tatsächlichen grafischen Teil der Beschreibung, habe ich fett hervorgehoben. Somit kann man wunderschön erkennen, dass die Parameter und Funktionen sehr fein bearbeitet werden können.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
 id="svg841"
 version="1.1"
 viewBox="0 0 193.17859 122.05789"
 height="122.05789mm"
 width="193.17859mm"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:cc="http://creativecommons.org/ns#"
 xmlns:dc="http://purl.org/dc/elements/1.1/">
  <defs
   id="defs835" />
  <metadata
   id="metadata838">
  <rdf:RDF>
  <cc:Work
   rdf:about="Herzsinus-Kurve">
    <dc:format>image/svg+xml</dc:format>
    <dc:type
     rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
    <dc:creator>
    <cc:Agent>
    <dc:title>Frank Rosenberger | https://ro-kom.de</dc:title>
    </cc:Agent>
    </dc:creator>
    <dc:rights>
    <cc:Agent>
    <dc:title>Frank Rosenberger | https://ro-kom.de</dc:title>
    </cc:Agent>
    </dc:rights> 
  </cc:Work>
  </rdf:RDF>
  </metadata>
  <g
   transform="translate(-1.811754,-54.173024)"
   id="layer1">
  <path
   id="path1526"
   d="m 4.811754,146.92098 26.245297,-0.0609 c 0,0 11.884934,-9.69088 18.965348,-9.81943 7.080414,-0.12854 13.100327,9.87853 13.100327,9.87853 l 19.284575,-0.0423 6.329368,14.16121 6.309961,-103.866659 6.48731,116.060039 6.67725,-26.33801 25.27428,0.12701 c 0,0 13.51182,-16.55752 19.95581,-16.62813 5.18329,-0.0568 12.49378,16.59934 12.49378,16.59934 l 26.05529,-0.0529"
   style="fill:none;fill-opacity:1;stroke:#cc0000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

---

Ihr Kom­men­tar [Pos1] Sei­ten­an­fang