SVG stands for Scalable Vector Graphics. Its XML format, not lose quality, supported by browsers.
SVG has some predefined shape elements that can be used by developers:
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
1. SVG Rectangle:
| width |
height |
x |
y |
rx |
ry |
| width of rect |
height of rect |
top-left corner position |
top left y position |
radius to round corners (def 0) , top side, bottom side round |
radius to round corners from left, right side (def 0) |
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" x="10" y="10" rx="50" ry="50" fill="blue" />
</svg>
|
<svg width="100" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" x="10" y="10" rx="50" ry="30" fill="blue" />
</svg>
|
A rectangle with pink stroke and blue colors , blue color opacity 10%, stroke opacity: 90%
<rect width="200" height="100" x="10" y="10" rx="50" ry="30" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
2. SVG Circle:
| r |
cx |
cy |
| Required. The radius of the circle |
The x-axis center of the circle. Default is 0 |
The x-axis center of the circle. Default is 0 |
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" />
</svg>
|
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="0" cy="0" fill="red" stroke="green" stroke-width="3" opacity="0.5" />
</svg>
|
3. SVG Ellipse : ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
| rx |
ry |
cx |
cy |
| Required. The x radius of the ellipse from center |
Required. The y radius of the ellipse |
The x-axis center of the ellipse. Default is 0 |
| The y-axis center of the ellipse. Default is 0 |
|
<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse rx="100" ry="50" cx="120" cy="80"
style="fill:yellow;stroke:green;stroke-width:3" />
</svg>
|
<svg height="500" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
<ellipse cx="0" cy="0" rx="170" ry="70" fill="yellow" />
</svg>
|
4.SVG Line
| x1 |
y1 |
x2 |
y2 |
| The start of the line on the x-axis |
The start of the line on the y-axis |
The end of the line on the x-axis |
| The end of the line on the y-axis |
|
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="100" y2="50" style="stroke:red;stroke-width:2" />
</svg>
|
<svg height="50" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="250" y2="10" style="stroke:red;stroke-width:12" />
</svg>
|
5. SVG <polygon>
contains at least three sides,
made of straight lines, and the shape is "closed" (it automatically connects the last point with the first).
| points attribute |
Required. The list of points of the polygon. Each point must contain an x coordinate and a y coordinate <polygon points="x1,y1 x2,y2 x3,y3 ... xn,yn" />
|
<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
 
|
<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
|
<svg height="280" width="360" xmlns="http://www.w3.org/2000/svg">
<polygon points="150,15 258,77 258,202 150,265 42,202 42,77"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
|
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>
|
The fill-rule attribute defines the algorithm to use to specify the inside part of a shape
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
6.SVG Polyline : create any shape that consists of only straight lines (that is connected at several points).
| points attribute : <polyline points="x1,y1 x2,y2 x3,y3 ... xn,yn" /> |
| Required. The list of points of the polyline. Each point must contain an x coordinate and a y coordinate |
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 50,150 100,75 150,50 200,140 250,140"
style="fill:none;stroke:green;stroke-width:3" />
</svg>
|
<svg height="180" width="500" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:yellow;stroke:red;stroke-width:4" />
</svg>
|
7.SVG <path> : Paths are used to create simple or complex shapes combining several straight or curved lines.
| attribute: d Required. A set of commands which define the path. |
- M = moveto (move from one point to another point)
- L = lineto (create a line)
- H = horizontal lineto (create a horizontal line)
- V = vertical lineto (create a vertical line)
- C = curveto (create a curve)
- S = smooth curveto (create a smooth curve)
- Q = quadratic Bézier curve (create a quadratic Bézier curve)
- T = smooth quadratic Bézier curveto (create a smooth quadratic Bézier curve)
- A = elliptical Arc (create a elliptical arc)
- Z = closepath (close the path)
Note: All of the commands above can also be expressed in lower case. Upper case means absolutely positioned, lower case means relatively positioned. |
<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg">
<path d="M150 5 L75 200 L225 200 Z"
style="fill:none;stroke:green;stroke-width:3" />
</svg>
M150 5 → Move to (150, 5) [Starting point — no line yet]
L75 200 → Line to (75, 200) [Line from (150, 5) to (75, 200)]
L225 200 → Line to (225, 200) [Line from (75, 200) to (225, 200)]
Z → Close path (back to M150 5)
(150,5)
+
/ \
/ \
/ \
(75,200)+-------+ (225,200)
|
<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
</svg>
Its small L, so it will Draw Line (relative to current position)
1. Move pointer to 100,350 <<<<<M 100 350 l 150 -300
+150 in X → to 250
-300 in Y → to 50
2. draw line at (250,50)
|
<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none"/>
</svg>
??? M 100 350 >Move to (100, 350) — sets the starting point of the path. No drawing yet.
q 150 -300 300 0 >>quadratic curve, using relative coordinates
??? Draw a quadratic Bézier curve:
First pair 150 -300: relative to the current position So control point = (100 + 150, 350 - 300) = (250, 50)
Second pair 300 0: relative end point: (100 + 300, 350 + 0) = (400, 350)
???? The curve goes from (100,350) → (400,350), bending toward the control point (250,50).
|
<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
<path d="M 250 50 l 150 300" stroke="red" stroke-width="4"/>
<path d="M 175 200 l 150 0" stroke="green" stroke-width="4"/>
<path d="M 100 350 q 150 -300 300 0"
stroke="blue" stroke-width="4" fill="none"/>
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="4" />
<circle id="pointB" cx="250" cy="50" r="4" />
<circle id="pointC" cx="400" cy="350" r="4" />
</g>
<g font-size="30" font-family="sans-serif"
fill="green" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
|
https://www.w3schools.com/graphics/svg_path.asp