Computer Software: InkScape

Gehört zu: Vektor-Grafik
Siehe auch: SVG, Graphics in WordPress, GitHub

Vektorgrafiken mit InkScape

Bereits in meinem Wiki hatte ich einen Artikel zu InkScape begonnen. Hier sind jetzt alle meine Bemerkungen zu InkScape zusammengeführt.

Die Software InkScape

Inkscape ist eine Open Source Software (also kostenlos), mit der man Vektor-Grafiken auf Basis von SVG erstellen und bearbeiten kann.

Inkscape ist eine “Fork” von Sodopodi.

SVG-Grafiken können in WordPress mit einem Plugin eingebunden werden:  SVG mit WordPress.

Ich speichere meine SVG-Grafiken auf GitHub: https://github.com/. Dort habe ich zwei Repositories:  dkracht/drawings und dkracht/svg. Diese können dann einfach per URL in WordPress eingebunden werden.

Die Versionen von InkScape

  • 20200501 Version 1.00
  • 20170104 Version 0.92
  • 20150130 Version 0.91
  • 20070205 Version 0.45

Installation von InkScape

  • Definitive Software Library: InkScape
  • Name: InkScape
  • Version: 1.00
  • Hersteller/Bezugsquelle: https://inkscape.org/de/release/0.92.3/
  • Installations-Ordner: d:\bin\Inkscape
  • Konfiguration: ./.
  • Systemvorassetzungen: Windows,…

Verwendung von InkScape

  • Zur Erstellung von Vektorgrafiken im SVG-Format.
  • Zur Skalierung von SVG-Grafiken auf MediaWiki bzw. WordPress

Zeichnen mit InkScape

Dokument / Zeichnung

Menüleiste: Datei -> Dokumenteneinstellungen  -> Reiter “Seite”  (Portrait/Landscape – A4,…)

Menüleiste: Ansicht -> Zoomfaktor -> Seite

Gerade Linien – Bezier-Kurven – Pfeile

Gerade Linien zeichnet man mit dem Tool “Bezier-Kurven und gerade Linien zeichnen” in der Werkzeugleiste rechts das Symbol “Schreibfeder” unterhalb des Symbols “Spirale”.

Quadrate

Rechteck zeicnen, dabei Taste “Strg” drücken (zusätzlich SHIFT-Taste erhält den Mittelpunkt)

Kreisbögen

xyz

Texte

Sonderzeichen z.B. griechische Buchstaben können in Textfeldern als Unicode eingegeben werden. Dazu nimmt man die Tasten:

  • Strg+U
  • 4-stelliger Unicode
  • Enter

Beispielsweise: delta = <Strg+U> 03B4 <Enter>, phi = <Strg+U> 03C6 <Enter>,…

Texte können auch entlang von Kurven gesetzt werden. Die Kurve darf kein “Shape” sein, sondern muss ein “Pfad” sein.

 

 

Computer: SVG Vektorgrafiken (aus Wiki)

Gehört zu: Vektorgrafik
Siehe auch: Graphics in WordPress
Benutzt: Grafiken aus Github

SVG Scalable Vector Graphics (aus Wiki)

  • SVG ist ein auf XML beruhender W3C-Standard für VektorGrafik.
    • SVG 1.0: 2001
    • SVG 1.1: 2003
    • SVG 1.2: 2005
    • SVG 2.0: hieran wird seit 2011 gearbeitet (“Candidate Recommendation”)
  • SVG wurde sehr stark von der Firma Adobe unterstützt. Zum 1.1.2008 hat Adobe “End of Life” verkündet.
  • SVG hat als offenes; d.h. nicht-proprietäres Format große Unterstützung durch OpenSourceSoftware
  • SVG wird von MediaWiki unterstützt
  • SVG wird von WordPress unterstützt
  • WebBrowser unterstützen SVG auch…?
  • Konkurrierend zu SVG ist: Flash von Macromedia (aufgekauft von Adobe)

SVG-Dateien sind keine binären Dateien, sondern Text-Dateien, die also auch mit normalen Text-Editoren bearbeitet werden können.
Solche SVG-Dateien sind “normale” XML-Dateien mit dem besonderen Namespace SVG.

SVG tat sich anfangs sehr schwer, da Flash der Industrie-Standard war.
SVG 1.1 enthielt lediglich eingie Korrekturen zu 1.0
SVG 1.2 wurde nie offiziell fertiggestellt.
SVG 2.0 soll der neue Super-Standard werden – als Teil von HTML5

SVG Grafiken Einbetten in…

 Bekannte Probleme mit SVG

  • Darstellung von Pfeilspitzen an Linien
  • Welche Schrifttypen werden unterstützt?
  • Darstellung von Fließtext (ab SVG 1.2 möglich)

 Weblinks zu SVG

SVG-Viewer

SVG-Grafiken bis Verson 1.1 können z.B. in Mozilla Firefox betrachtet (“Rendering”) werden. Auch Google Drive…

SVG-Grafiken Erstellen und Bearbeiten

Ich benutzte zur Zeit (Feb. 2020) das SVG-Tool Inkscape. Leider wurden in Inkscape schon einige Elemente von SVG 1.2 implementiert, die aber nie definitiv verabschiedet wurden. Dazu gehören: flowRoot, flowRegion und flowPara…

Dies sind Fliesstext-Konstrukte, die von den Vertretern im W3C sehr kontrovers diskutiert wurden und schließlich nicht in den SVG-Standard aufgenommen wurden. Wir müssen bei Inkscape also aufpassen und ggf. solche Konstrukte entfernen und durch einfachere Konstrukte von SVG 1.1 ersetzen.

SVG die ersten Schritte

  • Koordinatensystem
    • X-Achse waagerecht vom linken Bildrand nach rechts
    • Y-Achse senkrecht vom oberen Bildrand nach unten
  • Elemente
    • Rechteck
    • Text, auch Fließtexte
    • Bezierkurven
    • Kreis, Ellipse, Bogen
    • Pfad
    • Pfeilspitzen ????????

Beispiel für einen Pfad

Pfad aus “M” (=move to) und “L” (= line to):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
     width="200" height="300">
  <path stroke="black" stroke-width="1px" fill="none"
     d="M 50,250 L 50,150 L 100,77.5 L 150,150 L 55,150 L 150,250 L 54.5,250 L 150,154 L 150,246"/>
</svg>

Abbildung 1: Dies als Grafik in SVG-Format (Github: DasHausvomNikolaus.svg)
DasHausvomNikolaus.svg

Beispiel für Bogenstücke

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<g stroke="black" stroke-width="1" fill="none">
<path d="M150 50 A100 100 0 0 0 50 150" />
<path d="M0 150 L150 150" stroke="red"/>
<path d="M150 0 L150 150" stroke="blue" />
<path d="M50 200 A50 50 0 0 1 100 250" />
<path d="M50 160 L50 300 M0 250 L150 250" stroke="gray"/>
</g>
</svg>

Abbildung 2: Dies als Grafik in SVG-Format (Github: Pathwitharcs.svg)

Pathwitharcs.svg

SVG mit Bogenstücken

Beispiel für zwei einzelne Textzeilen

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  width="265" height="65" 
     xml:space="preserve" color-interpolation-filters="sRGB" fill="none">
	<title>Balanced Scorecard</title>
	<desc>Aus:  pres_030806.ppt TTC</desc>
	<style type="text/css">
		.st2 {fill:rgb(0,103,171);font-family:Verdana;font-size:20pt;font-style:italic;font-weight:bold}
	</style>
	<g>	
                <rect x="1" y="1" fill="none" stroke="black" width="264" height="64"/>
		<text x="18" y="29" class="st2">Basic Balanced</text>	
		<text x="50" y="55" class="st2">Scorecard</text>		
	</g>
</svg>

Abbildung 3: Dies als Grafik (Github: BalacedScorecard-3.svg)

BalancedScorecard-3.SVG

Balanced Scorecard als SVG

Beispiel für Fließtext

Fließtext wurde in SVG 1.2 neu eingeführt. Nicht alle SVG-Tools unterstützen dies.
SVG-Quellcode:

<?xml version="1.0" standalone="no"?>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg"
    id="body" width="350" height="350">
  <title>SVG flowPara Example.</title>
  <g>
    <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
    <flowRoot>
      <flowRegion>
        <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
      </flowRegion>
      <flowDiv text-align="start">
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P1 The quick brown fox jumped over the lazy dog.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P2 Gallia est omnis divisa in partes tres quarum unam incolunt Belgae.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P3 a b c d e f g h i j k l m n o p q r s t u v w x y z</flowPara>
      </flowDiv>
    </flowRoot>
  </g>
</svg> 

Abbildung 4: Dies als SVG-Grafik mit Version 1.2 Elementen zum Fließtext:

Flow-2.jpg

SVG-Grafik mit Fliesstext

Da hier SVG 1.2 kan das SVG nicht als Original Flow-2.svg richtig angezeigt werden. Daher wir es in ein Flow-2.jpg umgewandelt (mit Inkscape und Libre Office Draw).

SVG Beispiele

 SVG Beispiel 1: Hello World

So sieht der SVG Quelltext aus:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260" height="60">
	<rect x="10" y="10" fill="blue" width="240" height="40"/>
	<text x="40" y="40" style="fill:gold; font-size:20pt">
		Hello World!
	</text>
</svg>

Diese SVG-Datei wurde als “normale” Grafik auf die WordPress Media Libray hochgeladen.

Das Einfügen dieser SVG-Grafik erfolgt dann in WordPress  “normal” über den “Add Media” Buttom im Editor (der dann ein HTML.IMG daraus macht):

Abbildung 5: Und so sieht die SVG-Grafik dann aus (Github: Helloworld.svg)

Helloworld.svg

SVG-Grafik Hello World

Abbildung 6: SVG Beispiel 2: Tageslänge (GitHub: Tageslaenge.svg)

Tageslaenge.svg

 

SVG Beispiel 3: RSS Family

Abbildung 7: Dies Beispiel stammt von der Seite: RSS (Github: Rss-family.svg)

Rss-family.svg

SVG Beispiel 4: SWISH Flash Animation

Abbildung 8: Dies SVG-Beispiel stammt von der Seite: SWiSH (Github: Swish_Flash_Animation.svg)

Swish_Flash_Animation.svg

Computer: VektorGrafik (aus Wiki)

Formate für Vektor-Grafiken (aus Wiki)

Gehört zu: Grafik-Formate
Siehe auch: SVG, Flash, Libre Office Draw, Visio, PowerPoint

Wieder einmal fragte ich mich, in welchem Format und mit welchem Tool ich eigentlich Vektorgrafiken machen will/sollte, die ich viele, viele Jahre benutzen will.

Format SVG

Zuerst versuchte ich selbstverständlich SVG da dies als “offener” W3C-Standard am interessantesten schien.

Die SVG-Tools erschienen mir aber nicht sehr stabil.
Interessant war der SVG Bezier Animator namens beez (http://beez.sourceforge.net).
Auch das Tool SodiPodi 0.32 (http://sourceforge.net/projects/sodipodi/) war interessant, aber noch nicht richtig ausgereift.
Einzig Adobe Illustrator 10 ist sicher stabil, kostet aber richtig und gefiel mir eigentlich nicht bezüglich der Speicherung im SVG-Format – das war sehr proprietär (Adobe)…

Sodopodi wird nicht mehr weiterentwicklt. Eine erfolgreiche Abspaltung (sog. “Fork”) von Sodopodi ist Inkscape
Microsoft: PowerPoint oder Visio Wenn einem gar nichts solides schönes zu Vektorgrafiken einfällt, kann man sicher Microsoft PowerPoint oder auch Microsoft Visio nehmen.

Format Flash

Aber Flash (SWF) ist ja auch noch ein schönes Format. Das FLA-Format ist zwar proprietär (Macromedia, Adobe), das SWF-Format aber OPEN. Als Tool gibt es Macromedia Flash: das ist teuer und kompliziert. Da habe ich das sehr verbreitete Tool SWiSH ausprobiert und muss sagen: OK das probiere ich mal ein paar Wochen als Testphase aus.

<embed height="380" width="250" src="http://blog.kr8.de/files/slowfox.swf" wmode="transparent" />



Für WordPress gibt es ein Plugin names "Easy Flash Embed" damit kann man SWF-Dateien ganz einfach in WordPress-Artikel einbinden:

ENDE