SVG Draw

Willkommen bei SVG-Draw

Tutorial Video

> Start

Dieses Tutorial zeigt, wie Kreise, Linien und Kurve gezeichnet und animiert werden können. Die erstellten SVG Zeichnungen können als Text kopiert oder mit Hilfe des Download-Button in einen neuen Browser-Tab geladen werden.

Kreise - Circle

Bewegen Sie einen Stützpunkt (weiss)

Created with Raphaël 2.1.2
<svg height="420" width="620"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="1068" cy="103" r="56" fill="none" stroke="#4cbf2f" stroke-width="4.912280701754386" style=""></circle>
<circle cx="1310" cy="152" r="47" fill="none" stroke="#bf5a2f" stroke-width="4.912280701754386" style=""></circle>
<circle cx="891" cy="365" r="94" fill="none" stroke="#bf852f" stroke-width="4.912280701754386" style=""></circle>
</svg>
Download

Vieleck

Bewegen Sie einen Stützpunkt (weiss)

Created with Raphaël 2.1.2
<svg height="420" version="1.1" width="620"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#2f69bf" d="M500,210L200,383L200,37Z" stroke-width="4.912280701754386" stroke-linecap="round" style=""></path>
</svg>
Download Vieleck

Kurve 1

Bewegen Sie einen Stützpunkt (weiss)

Created with Raphaël 2.1.2
<svg height="420" version="1.1" width="620"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#bf2f2f" d="M70,100C261,62,237,289,486,259" stroke-width="4.912280701754386" stroke-linecap="round" style=""></path>
</svg>
Download Kurve

Kurve 2

Bewegen Sie einen Stützpunkt (weiss)

Created with Raphaël 2.1.2
<svg height="420" version="1.1" width="620"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#2f69bf" d="M70,100C261,62,75,349,271,220,402,122,320,345,470,278" stroke-width="4.912280701754386" stroke-linecap="round" style=""></path>
</svg>
Download Kurve

Transformation

keine Transformation

Created with Raphaël 2.1.2
<svg height="420" width="620"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<image x="180" y="110" width="166" height="205" xlink:href="images/biber.png" opacity="0.3" style=""></image>
<image x="180" y="110" width="166" height="205" xlink:href="images/biber.png" transform="matrix(1,0,0.13,1,0,0)" style=""></image>
</svg>
Download

Animation

Starten ! Auf den Biber klicken

Created with Raphaël 2.1.2
<svg height="420" width="620"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<image x="70" y="130" width="166" height="205" preserveAspectRatio="none" xlink:href="images/biber.png">
<animate attributeType="XML" begin="click" attributeName="x" from="70" to="630" dur="1.3s" fill="freeze"></animate>
</image>
</svg>
Download

Diagramm

Bewegen Sie einen Datenpunkt

Created with Raphaël 2.1.2
<svg height="420" version="1.1" width="620"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#2f69bf" d="M50,250C58.333333333333336,225,83.33333333333333,116.66666666666667,100,100C116.66666666666667,83.33333333333333,133.33333333333334,143.33333333333334,150,150C166.66666666666666,156.66666666666666,183.33333333333334,123.33333333333333,200,140C216.66666666666666,156.66666666666666,233.33333333333334,240,250,250C266.6666666666667,260,283.3333333333333,211.66666666666666,300,200C316.6666666666667,188.33333333333334,333.3333333333333,175,350,180C366.6666666666667,185,391.6666666666667,221.66666666666666,400,230" stroke-width="4.912280701754386" stroke-linecap="round" style=""></path>
</svg>
Download

Creative-Commons Lizenz (CC BY 3.0 CH)

Sie dürfen: