PolarSVGedit

Options:

*
  |  
  |  
  |  

Tools:

Path | Ellipse | Text
|
(Tool-Options)

(key-)controls

Basics for SVG-coding

Mozilla-SVG-Documentation

Snippets
Object Example Code Info
Circle <circle cx="100" cy="100" r="30" fill="red" />
Ellipse <ellipse cx="100" cy="50" rx="60" ry="30" fill="green"/>
Rectangle <rect x="50" y="50" width="100" height="75" fill="#FF0" stroke="#000" stroke-width="10" />
Path <path d="M 10,100 L 50,50 v 50 h 70 c 0 0 30 0 30 -50" fill="none" stroke="rgb(255,153,102)" stroke-width="2"/>
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath
CAPS: absolute; lower: relative
Path: Arc <path d="M 50 50 A 10 40 0 0 0 70 50 A 5 40 0 0 0 60 50 A 10 40 0 0 0 80 50" stroke="red" fill="none" />

Meaning of the numbers:

  1. M: moveto
  2. 85: x-startpoint
  3. 350: y-startpoint
  4. A: arc (caps: Absolut)
  5. 150: radius x-Axis
  6. 180: radius y-Axis
  7. 0: rotation x
  8. 0: flag short (0) or long (1) was
  9. 0: flag counter-clockwise
  10. 280: x-endpoint
  11. 79: y-endpoint
CAPS: absolute; lower: relative
Bezier-path (quadratic) <path d="M 100,10 Q 10,50 200,150" fill="none" stroke="blue"/>
<path d="M 100,10 10,50 200,150" fill="none" stroke="gray"/>
Text Testtext x2 <text x="20" y="50" text-anchor="right" fill="currentColor">Testtext x<tspan dy="-0.4em" font-size="0.6em">2</tspan></text>

Example

svg-testimage
Symbols

Hint: This details-page makes use of the deprecated <xmp>-tag. Let's hope that browsers keep supporting it.

Use these i.e. with: <use href="#measure" x="100" y="200"/>

Symbol Example Code
Arrowhead <defs> <marker id="arrow" markerWidth="5" markerHeight="6" refX="4" refY="3" orient="auto-start-reverse"> <polygon points="0 0,5 3,0 6, 2 3" fill="#f00" /> </marker> </defs> <line x1="0" y1="50" x2="250" y2="50" stroke="#0a0" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
Electron <symbol id="electron"> <circle r="6" cx="7" cy="7" style="fill:none;stroke:blue;stroke-width:2"/> <path d="m 3,7 h 8" fill="none" stroke="blue" stroke-width="2"/> </symbol>
Other

Hint: This details-page makes use of the deprecated <xmp>-tag. Let's hope that browsers keep supporting it.

What Example Code Info
Formulas E=m⋅c02 <foreignObject width="150" height="60" x="10" y="10" style="color:#0a0"> <math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"> <mrow><mi>E</mi><mo>&#x0003D;</mo><mi>m</mi><mo>&#x022C5;</mo><msup> <mrow><msub><mi>c</mi><mn>0</mn></msub> </mrow><mn>2</mn></msup> </mrow></math> </foreignObject> The MathML-Code can i.e. be created with mdTeX2html

PolarSVGedit v0.9.3dev - (c) 2023 by Dirk Winkel - Licenced under GPL v3 or newer