Can We Write Alphabets With Help of SVG?

Can We Write Alphabets With Help of SVG?

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.

What is SVG(Scalable Vector Graphics)?

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.

SVG line

<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

SVG path

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.

In [1]:
from IPython.display import HTML

Letter F

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

In [2]:
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>
""")
Out[2]:
In [3]:
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>
""")
Out[3]:

Letter E

In [4]:
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>
""")
Out[4]:
In [5]:
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>
""")
Out[5]:

Letter H

In [6]:
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>
""")
Out[6]:
In [7]:
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>
""")
Out[7]:

Letter V

In [8]:
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>
""")
Out[8]:

Letter N

In [9]:
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>
""")
Out[9]:

Letter M

In [10]:
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>
""")
Out[10]:
In [11]:
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>
""")
Out[11]:

Letter W

In [12]:
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>
""")
Out[12]:

Letter K

In [13]:
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>
""")
Out[13]:

Letter I

In [14]:
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>
""")
Out[14]:

Letter L

In [15]:
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>
""")
Out[15]:

Letter T

In [16]:
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>
""")
Out[16]:

Letter X

In [17]:
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>
""")
Out[17]:

Letter Y

In [18]:
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>
""")
Out[18]:

Letter Z

In [19]:
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>
""")
Out[19]:

Letter A

In [20]:
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>
""")
Out[20]:

Letter D

In [21]:
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>
""")
Out[21]:

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)).
In [22]:
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>
""")
Out[22]:

Letter P

In [23]:
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>
""")
Out[23]:

Letter R

In [24]:
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>
""")
Out[24]:

Letter B

In [25]:
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>
""")
Out[25]:

Letter U

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.
In [26]:
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>
""")
Out[26]:

Letter C

In [27]:
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>
""")
Out[27]:

Letter G

In [28]:
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>
""")
Out[28]:

Letter J

In [29]:
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>
""")
Out[29]:

Letter O

In [30]:
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>
""")
Out[30]:

Letter Q

In [31]:
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>
""")
Out[31]:

Letter S

In [32]:
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>
""")
Out[32]:
In [33]:
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>
""")
Out[33]:

kindergarten

  1. Arithmetic
  2. Identify Pictures
  3. Learn Words

Python for kids

  1. How We Teach Exponents and Powers to Kids
  2. Plotting points
  3. Learning shapes, size and color
  4. Learning Coordinate Geometry
  5. Draw Shapes With Points Using Matplotlib Module
  6. Learn Coordinate Geometry With Intuitive Way - Part 1
  7. Teaching Geometry to Grade 3 Kids
  8. Plotting Simple Line, Bar And Pie Chart
  9. Draw Dream House Using Python Matplotlib Module
  10. Draw Circle - Diameter, Radius, Arc and Segment Using Python Matplotlib Module
  11. Draw Badminton Court Using Python Matplotlib Module
  12. Let Us Play With Carrom Board in Python
  13. Draw Some Interesting Pattern With Numpy & Matplotlib Module
  14. Step by Step Draw Boy Using Matplotlib Module
  15. Make Shapes With SystemOfBobies
  16. Draw Cartoon
  17. Draw Two Cartoons Inside House
  18. 3Dimension Plotting in Python
  19. Solar System
  20. Plot World, Continent and Cities

Fourier series

  1. Plotting fourier series

Linear Equations

  1. Linear Equations

Geometry

  1. Cone geometry
  2. Cube geometry
  3. Cylinder geometry
  4. Disk geometry
  5. Open top box geometry
  6. Rectangle geometry
  7. Ring geometry
  8. Saturn geometry
  9. Sphere geometry

Laplace

  1. Laplace transfomation plotting in 3D

Vectors

  1. Reference frames 3d
  2. Vector implimentation 2 vectors
  3. Vector with numpy and sympy

Differential equations

  1. First order differential equations

Functions

  1. Function plotting in 3D
  2. Function plotting in 2D

Jacobian

  1. Jacobian

Lagrangian

  1. Lagrange multipliers
  2. Lagrange example

Waves

  1. Plot electromagnectic waves

Electromagnetism

  1. Field plot
  2. Electric fields
  3. Fields
  4. Charges on Equilateral Triangle

Optics

  1. Lens optics geometry
  2. Mirror optics geometry

Quantum mechanics concepts

  1. Dirac notation and photon polarisation
  2. Photon polarisation
  3. Electron spin
  4. Position momentum and heisenberg
  5. The EPR paradox explanation
  6. Energy operators the hamiltonian and schrodinger
  7. The harmonic oscillator
  8. Schrodinger equation a simple derivation

Theory of relativity

  1. Derivation of time dilation
  2. Gamma factor
  3. Spacetime reference frames equations

Kinematics

  1. Circular motion

Thermodynamics

  1. Entropy and the second law of thermodynamics
  2. Introductory chemical engineering thermodynamics

Formulae

  1. Formulae

A level physics

  1. Classical mechanics

Chemistry

  1. ChemCalcManager
  2. ChemistryFormulaManager
  3. ElementGroupManager
  4. ElementsManager
  5. EnvironmentManager
  6. MolarManager
  7. MoleculesManager
  8. PeriodicTableManager
  9. ReactivityManager
  10. SmilesManager
  11. VisualizationManager

English

  1. Book Manager
  2. Word Manager
  3. Grammar Manager
  4. Tense Manager
  5. Vocabulary Manager
  6. Learn Language Manager
  7. I sat with cat - Poem by Ishwarya
  8. There was a bug - Poem by Ishwarya
  9. The dog was doing a jog - Poem by Ishwarya

Geography

  1. Solar System
  2. Plot World, Continent and Cities

Animation

  1. Animate Circle With SVG
  2. Animate Stars in Different Directions Kids
  3. Move Box in HTML

Plotting

  1. Matplotlib Introduction
  2. Single Line Plots
  3. Bar Plots
  4. Histograms Plots
  5. Types of Plotting
  6. Seaborn Introduction
  7. Seaborn Scatterplot
  8. Seaborn Barplot
  9. Seaborn Boxplot
  10. Seaborn Pairplot
  11. Seaborn Heatmap
  12. Seaborn Seaborn Pandas
  13. Seaborn Plot a Simple Linear Relationship Between Two Variables
  14. Seaborn Displot
  15. Seaborn Palette
  16. Three-Dimensional Plotting in Matplotlib
  17. Interactive Visualizations With Bokeh Part 1
  18. Data Visualization With Seaborn - Part 1

SVG

  1. SVG Shapes
  2. SVG Shapes Advanced
  3. Animate Circle With SVG
  4. SVG Animation
  5. SVG Text
  6. Can We Write Alphabets With Help of SVG?

Python

  1. Searching Text in Multiple Files in Python
  2. Working With MongoDB & Python Using PyMongo and Pandas
  3. Capture Date, Phone and Email From Text With Regular Expression in Python
  4. Set Operations in Python
  5. Extract Table Data From Wikipedia Using Web Scraping With Python
  6. Word Cloud for a Website
  7. Sqlite Relational Database Management With Python
  8. How to Import Data From a MySql Database Into Pandas Data Frame
  9. Python Object Serialization and Deserialization With Pickle
  10. Regular Expression Operations in Python
  11. Creating and Writing to Different Type of Files in Python
  12. Convert Word file to PDF, HTML and PDF to JPG, PNG in Python

Machine Learning

  1. Deal Banking Marketing Campaign Dataset With Machine Learning

TensorFlow

  1. Difference Between Scalar, Vector, Matrix and Tensor
  2. TensorFlow Deep Learning Model With IRIS Dataset
  3. Sequence to Sequence Learning With Neural Networks To Perform Number Addition
  4. Image Classification Model MobileNet V2 from TensorFlow Hub
  5. Step by Step Intent Recognition With BERT
  6. Sentiment Analysis for Hotel Reviews With NLTK and Keras
  7. Simple Sequence Prediction With LSTM
  8. Image Classification With ResNet50 Model
  9. Predict Amazon Inc Stock Price with Machine Learning
  10. Predict Diabetes With Machine Learning Algorithms
  11. TensorFlow Build Custom Convolutional Neural Network With MNIST Dataset
  12. Deal Banking Marketing Campaign Dataset With Machine Learning

PySpark

  1. How to Parallelize and Distribute Collection in PySpark
  2. Role of StringIndexer and Pipelines in PySpark ML Feature - Part 1
  3. Role of OneHotEncoder and Pipelines in PySpark ML Feature - Part 2
  4. Feature Transformer VectorAssembler in PySpark ML Feature - Part 3
  5. Logistic Regression in PySpark (ML Feature) with Breast Cancer Data Set

PyTorch

  1. Build the Neural Network with PyTorch
  2. Image Classification with PyTorch
  3. Twitter Sentiment Classification In PyTorch
  4. Training an Image Classifier in Pytorch

Natural Language Processing

  1. Spelling Correction Of The Text Data In Natural Language Processing
  2. Handling Text For Machine Learning
  3. Extracting Text From PDF File in Python Using PyPDF2
  4. How to Collect Data Using Twitter API V2 For Natural Language Processing
  5. Converting Text to Features in Natural Language Processing
  6. Extract A Noun Phrase For A Sentence In Natural Language Processing

Others

  1. test-nutan
  2. QuestionManager.ipynb
  3. ActivityManager.ipynb
  4. Why us?
  5. How to Setup Wordpress Website Step by Step in Ubuntu VPS
  6. Setup Plesk Panel and Deploy Wordpress Website in Ubuntu VPS - Part 1
  7. Deploy a New Server With Plesk Control Panel - Part 2
  8. Setup Plesk Control Panel For Wordpress Website - Part 3
  9. Deploy Wordpress Website In Plesk Control Panel - Part 4
  10. HTML Basic Example
  11. Install MongoDB Community Server in Windows10
  12. How to Setup SAP BTP Trial Account and Create SAP HANA Cloud Database
  13. Connect SAP Hana Cloud Database Through Python
  14. How To Create a Self-Signed SSL Certificate for Apache in Ubuntu Virtual Cloud Server
  15. Consume Rest API in Django Web Application
  16. Setup GIT Repository in Ubuntu VPS
▲