Date / Stand: 16th August 2003
The Story behind the Logo for SVG
To the actual
design / Zum aktuellen Entwurf
Feedback and other Works / Top 10 anderer Modifikationen
At the beginning there just was the search for a nice form made by vector-pathes. It seemed to be very logical, if the letter-forms of the sign is this path itself. Our great experience in designing typographical signets led to an letter-aware, combined path with rounded edges, which was build in CorelDraw11 and exported to an SVG-file (Not to mention, that the first ideas in our business are always drawn with good-old pencils on good-old paper).
Eine Kurventechnologie soll natürlich mit Kurven ausgedrückt werden. Deshalb stand am Anfang die Suche nach einer schönen Kurve, die zusammen die Formen der Buchstaben SVG ergeben sollte. Eines der Papier-Scribbles wurde in CorelDraw nachgebaut und in eine SVG-Datei exportiert.
Original CorelDraw11-File (14 KB)
Exported SVG (2 KB)
The first shot / Der erste Wurf
A more quadratical ground seemed to be more universal for the suggested task, so the 3-letter-path was modified. For certain reasons there also should be an added elements, after some drafts we found a red elypse as open enough for it.
Für die beabsichtigte Verwendung schien eine mehr quadratische Gesamtform nützlicher. Auch sollte es für die weitere Nutzung noch zusätzliche Elemente geben als eine Art Spielkomponente. Nach mehreren Entwürfen entschieden wir uns erst mal für eine rote Elypse.
The basic Concept / Die Grundform
Modifying the exported file seemed a bit complicate. As we all know at this point, this wouldn't be the final thing, we first simplified the coordinate-system: It should be high enough for all kinds of modifications, but easy to handle with just-Integer-Definitions. Then we modified the down-point of the Letter "V" to be a sharp edge. Finaly we wrote the new code by hand in a new file, which allows us exact control over all steps:
Die Modifikation des exportierten SVG-Codes schien
uns sehr kompliziert. Nicht nur, dass die Umrechnung des Pfades in ein neues
Koordinaten-System schwierig war, auch die Definition der Kurve schien uns
zu kompliziert. Das V sollte unten eine Spitze bekommen und der obere
Abstrich vom G war zu lang. Schließlich schrieben wir den Code von Hand in
eine neue Datei, die Stück für Stück erweitert wurde:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><!-- Creator: GAMB / Manfred Baierl -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision;
image-rendering:optimizeQuality; fill-rule:evenodd" viewBox="0 0 2000 1800"><defs>
<style type="text/css">
<![CDATA[
.str00 {stroke:none}
.str1 {stroke:#605D5C;stroke-width:50;stroke-linecap:round}
.fil0 {fill:none}
.fil1 {fill:#DEDEDD;opacity:1.0}
.filred {fill:#DA251D}
]]></style></defs>
<g id="ground">
<rect class="fil1" x="0" y="0" width="2000" height="1800"/></g>
<g id="button-red">
<ellipse class="filred" transform="translate(1050 300) rotate(-35)" rx="250" ry="170"></ellipse></g>
<g id="svg-path">
<path class="fil0 str1" d="M120 1400 v100 q0 100,100 100h300q100 0,100-100v-600
q0-100,-100 -100h-300 q-100 0,-100-100v-400q0-100,100-100h300q100 0,130 100
l350 1300 m100 0m-100 0 l350 -1300q20 -100,120-100h300q100 0,100 100v100
m-300 400h200q100 0,100 100v600q0 100,-100 100h-270q-100 0,-120 -100
l-164 -702"/></g>
</svg>
Basic-Logo-SVG (static, 2 KB)
Mouse-Over and Linking I
The red elypse can easyly be added with mouse-over-behavior and hyperlinking:
Die rote Elypse kann einfach mit Mouse-Over-Verhalten und Hyperlinking ausgestattet werden:
Open it in a separate
window /
In Neuem Fenster öffnen
compare this
file with the exported file from CorelDraw11
Vergleichen
Sie mal die entsprechende Export-Datei aus Corel
Mouse-Over and Linking II
From this point, all kinds of modifications and animations seem thinkable. First, we rounded the base-rectangle, added a background and markered all end-points of the letter-path with modified elypses. These elypses may be mouse-overed and linked to other sites:
Ausgehend von diesem Entwicklungsstand sind alle Arten von Modifizierungen und Animationen möglich, z.B. lässt sich ein Hintergrund einfügen, das Basis-Rechteck abrunden und alle Endpunkte der Kurve lassen sich mit zusätzlichen Elypsen unterlegen, die bei Bedarf (mit einem SVG-Mouse-Over) zu anderen Seiten verlinken:
Dieses Beispiel zeigt ein heftiges Mouse-Over mit JavaScript. Aber ich denke, dass die Lösung mit xLink weitaus eleganter ist.
Animations / Animationen
Although other elements can be putted into the scene, or animations can be added, therefore we added a new animation path and a litle red circle, which is moving along the Sign. This moving point is hyperlinked to the initial Page of an just now starting online-course about SVG.
Auch sind andere, zusätzliche Elemente denkbar oder Animationsverhalten kann eingefügt werden. Dafür haben wir einen zusätzlichen Pfad eingefügt, auf dem sich ein kleiner roter Punkt bewegt und die Kurve des Schriftzuges abfährt. Dieser kann natürlich einen Hyperlink erhalten, was ein Reaktionssoiel ergibt (Zu sehen auf der Startseite von dem im Aufbau befindlichen Online-SVG-Kurs bei http://www.5vg.de).
Problem: Wir haben übrigens nicht herausbekommen, wie der Rote Punkt animiert werden muss, damit er sich so bewegt, wie in dem abgebildeten GIF angedeutet. Er müsste sich an einer bestimmten Kurven-Stelle in zwei kleinere Kreise teilen, die sich synchron auf den beiden Flugpfaden zum Anfangspunkt bewegen und dort wieder verschmelzen zu dem dicken Punkt. Wenn jemand das hinkriegt, nur zu, wir sind gespannt, davon zu hören.
All elements / Alle Elemente
Putting all together might be a bit to much, but it shows the system behind it. You can modify the code as you want.
Alles aktiv zu setzen macht wenig Sinn, aber es verdeutlicht das System. Sie können diesen Code nach belieben verändern.
The finished Form / Fertige Form
There's no lack of a logo anymore: This Code and Design is a gift from GAMB to the community, Freeware in the sence of the Open Source thoughts. It may be copied, transformed or modified in any regard. Nobody has the right for branding it. So, simply use it or your variation to make SVG become more pupular.
Dieser Code und das Design ist Freeware und ein Geschenk von GAMB an die Community. Es kann beliebig verzerrt, verändert oder transformiert werden. Niemand hat das Recht, es als geschützte Marke einzutragen. Verwenden Sie es einfach, damit SVG die Aufmerksamkeit erreicht, die es verdient.
The bold Form (Stroke = 80) / Logo fett
The heavyness of the sign can easily be modified by setting another Stroke (Usually its 50).
Die Schwere des Signets kann durch Ändern des Stroke-Wertes einfach modifiziert werden. Hier ist z.B. der Wert in der Style-Definition folgendermaßen gesetzt:
.str1 {stroke:#605D5C;stroke-width:80;stroke-linecap:round}
The light Form (Stroke = 20) / Logo light
In the opposite direction you get a light-version of the Logo.
Die leichte Form erreicht man durch setzen eines geringeren Wertes für den Umriss:
.str1 {stroke:#605D5C;stroke-width:20;stroke-linecap:round}
Bitmap-Download / Das Logo als GIF:
Links: Dieses Logo als GIF in verschiedenen Größen
Feedback & Further Works
Rückmeldungen und weitere Modifikationen
We will publish the comments on this work and the modified SVGs:
Kommentare und uns zugeschickte modifizierte Logos
werden hier vorgestellt:
Feedback and other Works / Top 10 anderer Modifikationen
To the actual
design / Zum aktuellen Entwurf
© All this Code is freeware, made by GAMB / Manfred Baierl, 16th August 2003