GoogleDrive-Logo als ObjektGrafik

Die Logo-Grafik von GoogleDrive verwendet lediglich 2 Grundformen (Parallelogramm, Dreieck). die je 3mal wiederholt und dabei um den Mittelpunkt gedreht werden.

Die Original-SVG-Datei  (Quelle: WikiMedia) wurde offenbar durch Umwandlung einer Pixel-Grafik erzeugt. Das ist fast nie sinnvoll und erzeugt ungenauen, unübersichtlichen und viel zu großen SVG-Code.

• Alle Teile der Grafik beruhen auf einem gleichseitigen Dreieck. Mit geometrischen Grundkenntnissen kann man die Koordinaten wesentlich einfacher und genauer berechnen. Das chaotische Original wurde daher durch eine sauber programmierte Objekt-Grafik ersetzt.

• Man kann den SVG-Quelltext in einer Datei *.svg am eigenen PC speichern und mit jedem modernen Browser ansehen, oder in eigene Dokumente einsetzen.

▶ Mit diesem ↗ Link wird die Grafik in einem eigenen Browser-Tab geladen. Man kann sie je nach Konfiguration des Browsers mit Ctrl Mausrad, mit Ctrl+ oder mit Menü-Befehlen bei gleichbleibender Qualität (!) beliebig vergrößern.
▶ Links zum SVG-Quelltext der Original-Grafik und der → hier vorgestellten Version.

SVG-Quelltext

• Das Beispiel wurde komplett neu programmiert. Damit wird anschaulich der Unterschied zwischen einer echten Objekt-Grafik und der weitgehend sinnlosen Umwandlung von Pixelgrafik in Objektgrafik demonstriert.

• Als Ursprung des Koordinatensystems bietet sich der Mittelpunkt der Grafik an.

• Mehrfach verwendbare Elemente werden nur 1mal in einem <defs>-Element programmiert: Hier z.B. ein Parallelogramm id="pg" und ein Dreieck id="tr"

• Die Formeln zur Berechnung der Koordinaten sind im Quelltext angegeben. Sie beruhen auf der Seitenlänge s=100 eines gleichseitigen Dreiecks und dem Abstand d=s/6*sqrt(3) des Mittelpunkts von einer Seite.

• Das blaue Element, wird programmiert, indem man je 1 Parallelogramm
<use xlink:href="#pg" />
und ein Dreieck
<use xlink:href="#tr" />
in den entsprechenden Farben angibt.

• Für das grüne Element werden die gleichen Bestandteile lediglich in anderen Farben verwendet, in eine Gruppe <g> zusammengefasst und mit dem Attribut
transform="rotate(120)"
um 360°/3 = 120° gedreht.

• Das gelbe Element entsteht ebenso und wird um 2·360°/3 = 240° gedreht.

• Die gesamte Grafik wird in eine Gruppe <g> zusammengefasst und um ihre halbe Breite nach rechts bzw. ebenso nach unten verschoben. Dazu dient das Attribut
transform="translate(150,144.3)"
Wenn ein Rand gewünscht ist, dann wird die gesamte Grafik nochmals verschoben, hier z.B. mit
transform="translate(5,10)"

Diese Version ist ca. 100mal genauer als das Original. Sie lässt sich geometrisch sauber vergrößern und mit Hilfe der angegebenen Formeln bei Bedarf in kurzer Zeit modifizieren.