In this blog, we will write alphabets with help of SVG. We will use SVG line, circle and path to create alphabets. First we will create easy alphabets and then curved alphabets.
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images are defined in a vector graphics format and stored in XML text files. SVG images can thus be scaled in size without loss of quality, and SVG files can be searched, indexed, scripted, and compressed. The XML text files can be created and edited with text editors or vector graphics editors, and are rendered by the most-used web browsers.
<line>
The <line> element is an SVG basic shape used to create a line connecting two points.
Attributes
x1
Defines the x-axis coordinate of the line starting point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
x2
Defines the x-axis coordinate of the line ending point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
y1
Defines the y-axis coordinate of the line starting point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
y2
Defines the y-axis coordinate of the line ending point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
pathLength
Defines the total path length in user units. Value type: <number> ; Default value: none; Animatable: yes
It can be used to create lines, curves, arcs, and more.
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
We are using Jupyter notebook to create alphabets in SVG. So we have to import HTML from IPython.display.
from IPython.display import HTML
We are creating line from x1 = 10, y1 = 10 to x2 = 10, y2 = 100.
Note: If you do not specify the stroke color the line will not be visible
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="5" stroke="black" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="5" stroke="black" />
<line x1="10" y1="0" x2="75" y2="0" stroke-width="8" stroke="black" />
<line x1="10" y1="50" x2="65" y2="50" stroke-width="3" stroke="black" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="10" x2="10" y2="100" stroke-width="5" stroke="#BB7DB0" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="5" stroke="#BB7DB0" />
<line x1="10" y1="0" x2="75" y2="0" stroke-width="5" stroke="#BB7DB0" />
<line x1="10" y1="50" x2="65" y2="50" stroke-width="3" stroke="#BB7DB0" />
<line x1="10" y1="100" x2="75" y2="100" stroke-width="5" stroke="#BB7DB0" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="5" stroke="#901366" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="5" stroke="#901366" />
<line x1="100" y1="0" x2="100" y2="100" stroke-width="5" stroke="#901366" />
<line x1="10" y1="50" x2="100" y2="50" stroke-width="3" stroke="#901366" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="50" y2="75" stroke-width="5" stroke="#0F7235" />
<line x1="100" y1="0" x2="50" y2="75" stroke-width="5" stroke="#0F7235" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="5" stroke="#73B2D3" />
<line x1="70" y1="0" x2="70" y2="100" stroke-width="5" stroke="#73B2D3" />
<line x1="10" y1="0" x2="70" y2="100" stroke-width="3" stroke="#73B2D3" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="8" stroke="#D50015" />
<line x1="100" y1="0" x2="100" y2="100" stroke-width="8" stroke="#D50015" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="8" stroke="#D50015" />
<line x1="100" y1="0" x2="100" y2="100" stroke-width="8" stroke="#D50015" />
<line x1="10" y1="0" x2="55" y2="100" stroke-width="3" stroke="#D50015" />
<line x1="100" y1="0" x2="55" y2="100" stroke-width="3" stroke="#D50015" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="20" y1="20" x2="40" y2="100" stroke-width="8" stroke="#BB7DB0" />
<line x1="120" y1="20" x2="100" y2="100" stroke-width="8" stroke="#BB7DB0" />
<line x1="70" y1="20" x2="40" y2="100" stroke-width="5" stroke="#BB7DB0" />
<line x1="70" y1="20" x2="100" y2="100" stroke-width="5" stroke="#BB7DB0" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="5" stroke="#DA7E20" />
<line x1="10" y1="50" x2="60" y2="0" stroke-width="3" stroke="#DA7E20" />
<line x1="10" y1="50" x2="60" y2="100" stroke-width="3" stroke="#DA7E20" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="50" y1="0" x2="50" y2="100" stroke-width="5" stroke="Green" />
<line x1="40" y1="0" x2="60" y2="0" stroke-width="10" stroke="Green" />
<line x1="40" y1="100" x2="60" y2="100" stroke-width="10" stroke="Green" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="50" y1="0" x2="50" y2="100" stroke-width="5" stroke="purple" />
<line x1="50" y1="100" x2="100" y2="100" stroke-width="10" stroke="purple" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="50" y1="0" x2="50" y2="100" stroke-width="8" stroke="yellow" />
<line x1="20" y1="0" x2="80" y2="0" stroke-width="10" stroke="yellow" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="10" x2="80" y2="100" stroke-width="5" stroke="#DB0069" />
<line x1="80" y1="10" x2="10" y2="100" stroke-width="5" stroke="#DB0069" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="10" x2="50" y2="50" stroke-width="5" stroke="#E6791C" />
<line x1="90" y1="10" x2="50" y2="50" stroke-width="5" stroke="#E6791C" />
<line x1="50" y1="50" x2="50" y2="100" stroke-width="8" stroke="#E6791C" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="10" x2="100" y2="10" stroke-width="5" stroke="#D40013" />
<line x1="10" y1="100" x2="100" y2="100" stroke-width="10" stroke="#D40013" />
<!-- middle line -->
<line x1="100" y1="10" x2="10" y2="100" stroke-width="10" stroke="#D40013" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="60" y1="0" x2="10" y2="100" stroke-width="10" stroke="#1167A2" />
<line x1="60" y1="0" x2="110" y2="100" stroke-width="10" stroke="#1167A2" />
<line x1="30" y1="50" x2="90" y2="50" stroke-width="5" stroke="#1167A2" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="100" >
<line x1="10" y1="0" x2="10" y2="100" stroke-width="10" stroke="#D50016" />
</svg>
</body>
</html>
""")
Elliptical Arcs
An elliptical arc draws an arc from the current point to a specified point. It takes the most parameters of any of the curve commands and takes the following form.
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
where
the arc starts at the current point
x,y is the end point for the arc
rx is the x-radius of the ellipse
ry is the y-radius of the ellipse
x-axis-rotation is the degrees to rotate the x-axis
For most situations, there are actually four different arcs (two different ellipses, each with two different arc sweeps) that satisfy these constraints. large-arc-flag and sweep-flag indicate which one of the four arcs are drawn, as follows:
Of the four candidate arc sweeps, two will represent an arc sweep of greater than or equal to 180 degrees (the "large-arc"), and two will represent an arc sweep of less than or equal to 180 degrees (the "small-arc"). If large-arc-flag is '1', then one of the two larger arc sweeps will be chosen; otherwise, if large-arc-flag is '0', one of the smaller arc sweeps will be chosen,
If sweep-flag is '1', then the arc will be drawn in a "positive-angle" direction (i.e., the ellipse formula x=cx+rx*cos(theta) and y=cy+ry*sin(theta) is evaluated such that theta starts at an angle corresponding to the current point and increases positively until the arc reaches (x,y)). A value of 0 causes the arc to be drawn in a "negative-angle" direction (i.e., theta starts at an angle value corresponding to the current point and decreases until the arc reaches (x,y)).
HTML("""
<html>
<body>
<svg width="200" height="150" >
<line x1="10" y1="10" x2="10" y2="100" stroke-width="10" stroke="#D50016" />
<path d="M 10 10 A40,50 0 1,1 10, 100" stroke="#D50016" fill="transparent" stroke-width="5" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<line x1="10" y1="10" x2="10" y2="100" stroke-width="5" stroke="#1794D9" />
<path d="M 10 10 A40,20 0 1,1 10,50" stroke="#1794D9" fill="transparent" stroke-width="5" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<line x1="10" y1="10" x2="10" y2="100" stroke-width="5" stroke="#98C81A" />
<path d="M 10 10 A40,20 0 1,1 10,50" stroke="#98C81A" fill="transparent" stroke-width="5" />
<line x1="10" y1="50" x2="50" y2="100" stroke-width="5" stroke="#98C81A" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<line x1="10" y1="10" x2="10" y2="100" stroke-width="5" stroke="#BB7DB0" />
<path d="M 10 10 A40,20 0 1,1 10,50" stroke="#BB7DB0" fill="transparent" stroke-width="5" />
<path d="M 10 50 A40,20 0 1,1 10,100" stroke="#BB7DB0" fill="transparent" stroke-width="5" />
</svg>
</body>
</html>
""")
The cubic Bézier commands are as follows:
C (absolute)/c (relative) - curveto
(x1 y1 x2 y2 x y)+ Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.
HTML("""
<html>
<body>
<svg width="200" height="150" >
<path d="M100,10 C100,100 150,100 150,10" stroke="#1794D9" fill="transparent" stroke-width="5" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<path d="M100,10 C40,10 40,80 100,80" stroke="#F8C100" fill="transparent" stroke-width="8" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<path d="M100,10 C40,10 40,80 100,80 L100,50 L100,100" stroke="#98C81A" fill="transparent" stroke-width="8" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<line x1="80" y1="10" x2="120" y2="10" stroke-width="5" stroke="#1794D9" />
<path d="M100,10 L100,80 C100,100 50,100 50,80" stroke="#1794D9" fill="transparent" stroke-width="8" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<circle cx="50" cy="50" r="40" stroke="#1167A2" stroke-width="5" fill="transparent" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<circle cx="50" cy="50" r="40" stroke="#1794D9" stroke-width="5" fill="transparent" />
<line x1="60" y1="60" x2="100" y2="90" stroke-width="5" stroke="#1794D9" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<path d="M 100 50 C100,30 50,30 50,50" stroke="#D50016" fill="transparent" stroke-width="5" />
</svg>
</body>
</html>
""")
HTML("""
<html>
<body>
<svg width="200" height="150" >
<path d="M 100 50 C100,30 50,30 50,50 Q95,90 95,100 C95,120 50,120 50,100" stroke="#D50016" fill="transparent" stroke-width="5" />
</svg>
</body>
</html>
""")