A little guide to HTML5 — SVG

Din Esh
Din Esh
Sep 7, 2018 · 5 min read

SVG stands for Scalable Vector Graphics.We can do so many cool things on the web using SVG.Let’s get started.

To create a svg , we use <svg> tag.

For example : Below code creates a 500 x 500 svg.(width and height can be set using CSS too).

<svg width=”500" height=”500">
<style>
svg{
background-color:#1e0233;
}
</style>
</svg>
Output

Creating circles,paths,rectangles and many other complex shapes is pretty easy in SVG.

Creating a rectangle in SVG :

To create a rectangle we use <rect /> tag,some of its attributes are
x - X coordinate of the rectangle.
y- Y coordinate of the rectangle.
width-width of the rectangle.
height-height of the rectangle.
For example:

<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
</svg>
Rectangle shape

Creating a circle in SVG :

To create a circle we use <circle /> tag,the attributes cx & cy refer to the x and y coordinates of the center of the circle.
r-radius of the circle.
For example:

<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
</svg>
circular shape

Creating a path in SVG :

Paths in svg can be used to create complex shapes,curves etc.To create a path we use <path />. The attribute d consists of series of commands about drawing the path.
For example d=”M 100 100” says move to the (100,100).
d=”L 200 100” says a draw a line to (200,100) and d=”H x” draws a horizontal line and d=”V y” draws a vertical line and Z closes the path.
For example:

<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
</svg>
path

Creating a line in SVG :

A simple line can be created using <line />. Some of it’s attributes are
x1-x coordinate of starting point
y1-y coordinate of starting point
x2-x coordinate of ending point
y2-y coordinate of ending point.
For example:

<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" />
</svg>
line

Placing text in SVG :

<text /> tag is used for this purpose and x,y attributes specify and x and y coordinates.

For example :

<svg width="500" height="500">

<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
.text{
font-size:1.4em;
fill:yellow;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" />
<text class="text" x="230" y="260">SVG<text/>


</svg>
text

<defs> and <use> in SVG:

Reusable paths,shapes etc can be placed inside <defs>.
In the below example path with id linePath is used by setting attribute href of use tag to linePath

<svg width="500" height="500">
<defs>
<path id="linePath" d="M100 400 L400 100" style="stroke-width:2;stroke:deeppink" />
</defs>
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
.text{
font-size:1.4em;
fill:yellow;
}

</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" />
<use class="linePath" href="#linePath"></use>
<text class="text" x="230" y="260">SVG<text/>


</svg>
<defs> & <use>

Curved text using <textPath> in SVG :

This is same as use tag,here you will set href of <textPath> to the id of your path.
For example:

<svg width="500" height="500">
<defs>
<path id="linePath" d="M100 400 L400 100" style="stroke-width:2;stroke:deeppink" />
<path id="textPath"d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
</defs>
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
.text{
font-size:1.4em;
fill:yellow;
}
.textPath{
font-size:1.4em;
fill:yellow;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" />
<use class="linePath" href="#linePath"></use>
<text class="text" x="230" y="260">SVG</text>

<text class="textPath">
<textPath href="#textPath">
A Little Guide
</textPath>
</text>


</svg>
<textPath>

viewBox in SVG:

To get a clear idea about scaling svg,go to this link.

Complete code :

Clap it if you like it.

Din Esh

Written by

Din Esh

All about Full stack development https://www.thewebblinders.in/programming/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade