Skalierbare Vektorgrafiken (SVG) für Anfänger

Ihr habt noch was auf der Leber? Hier könnt ihr alles weitere besprechen.
Benutzeravatar
Krayt
Beiträge: 98
Registriert: Mi 11. Feb 2015, 16:44
Wohnort: bei Bremen

Re: Skalierbare Vektorgrafiken (SVG) für Anfänger

Beitragvon Krayt » Mo 25. Dez 2017, 11:25

Also ich gehe immer so vor, dass ich mir die Grafiken auf Karopapier in ein Koordinatensystem vorzeichne. Danach ist das Eintippen schnell getan.
Hier ein schnell gemachtes (~10 min) Wireframe eines Hauses:

Bild

Der Code dazu:

Code: Alles auswählen

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="450"
     height="550">

<title>House</title>
<desc>A house</desc>

<style>
    <![CDATA[
        path {
            stroke: Black;
            stroke-width: 2px;
            fill: none;
        }
    ]]>   
</style>
<path d="M50,500
         l0,-150
         l150,-150
         l0,150
         Z" />
<path d="M200,350
         l0,-150
         l100,-150
         l100,150
         l0,150
         Z" />
<path d="M50,350
         l100,-150
         l150,-150
         l-100,150
         Z" />
<path d="M50,500
         l0,-150
         l100,-150
         l100,150
         l0,150
         Z" />
<path d="M150,200
         l150,-150
         l100,150
         l-150,150
         l-100,-150
         Z" />
<path d="M250,500
         l0,-150
         l150,-150
         l0,150
         Z" />
   
</svg>

Ich habe mit relativen Zeicheninstruktionen gearbeitet. Diese erkennt man immer an den kleinen vorangestellten Buchstaben. Das kleine "l" steht für eine gerade Linie von der letzten Position aus hin zur relativ angegebenen Zielposition. Die erste Position eines Pfades wird mit einem "M" (Groß- oder Kleinschreibung egal) angegeben.

//Edit: Eine Kathedrale mit zwei Türmen ist nichts anderes nur ein wenig mehr Arbeit, da man mehr Pfade benutzt.

melcorethefirst
Beiträge: 9
Registriert: So 11. Jun 2017, 19:50

Re: Skalierbare Vektorgrafiken (SVG) für Anfänger

Beitragvon melcorethefirst » Mo 25. Dez 2017, 11:32

Top! Aber wie kriegen wir da jetzt noch die kirchtuerme drauf und die verlaeufe fuer die waende rein?

Benutzeravatar
Krayt
Beiträge: 98
Registriert: Mi 11. Feb 2015, 16:44
Wohnort: bei Bremen

Re: Skalierbare Vektorgrafiken (SVG) für Anfänger

Beitragvon Krayt » Mo 25. Dez 2017, 20:42

melcorethefirst hat geschrieben:Top! Aber wie kriegen wir da jetzt noch die kirchtuerme drauf und die verlaeufe fuer die waende rein?


Wie gesagt Kirchtürme muss man zeichnen. Verläufe kann man vorher innerhalb der def-Umgebung definieren und dann darauf als Füllung eines Pfads oder ähnlichem via Cascading Style Sheet (CSS) verweisen. Vielleicht finde ich ja die nächsten Tage mal die Zeit dir eine Kirche mit zwei Kirchtürmen (Copy-Paste! Jippie!) zu schreiben. Sobald das erledigt ist, könnten die Pfade unter Verwendung geeigneter Farbverläufe / Gradienten eingefärbt werden.

melcorethefirst
Beiträge: 9
Registriert: So 11. Jun 2017, 19:50

Re: Skalierbare Vektorgrafiken (SVG) für Anfänger

Beitragvon melcorethefirst » Fr 20. Apr 2018, 20:56

Awesome! :thumbs_up:


Zurück zu „Da war doch noch was... (Alles Sonstige)“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron