What is SVG and How to Use it in Your Website?

In this article we are going to be looking at what is svg and how to use it in your website or your project. We will also talk about how you can control it with CSS and animating them to your will. So, let’s know how to use SVG in website.

What is SVG?

SVG or also scalable vector graphics can be used to add vector graphics on the webpage. This graphic will not look like your regular image rather it will be like a code in the backend written in XML format. In the front it will look like a normal illustration.

Why use SVG?

• Small file size: Due to them being a vector graphic they can be optimized to smaller sizes.
• Scalable: SVGs are scalable meaning it will not pixelate even if it gets stretched or reduced to a very small size. This makes SVGs responsive. In short it doesn’t lose its quality at any point.
• Can be styled: Since SVG appears in XML code format. We can easily give it a class or an id and style them with CSS.
• Can be animated: Not only we can style the SVGs with CSS but we can also make them animated by using pseudo classes or with animation properties.
• Can be used with Js: SVGs can be controlled by JavaScript and can be manipulated upon the interaction of the user to it.

How to make SVGs?

There are two methods in which you can create a SVG:

By Coding

Since SVG is written in XML format one directly create shapes and element. It is possible to create by simply coding. Here’s an example on how to create a rectangle:

<svg width="400" height="110">
  <rect width="300" height="100" fill="rgb(0,0,255)" />
</svg>

*fill is used in svgs to give a background color. Any SVG shape when making should be wrapped in an SVG element.

Here are other elements that can utilized :

• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

Except for the path other elements work in a similar fashion

For the path element there are several other commands that comes into play like

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadraticcurveto
• A = elliptical Arc
• Z = closepath

These all are used in combination to make an SVG. Let me explain on uppercase and lowercase different meanings too. Uppercase is used for making an element absolutely positioned while lowercase is used for relative positioning.

Read more about this from Mozilla Docs or W3School.

Suffice to say it’s a bit too complex. No worries though we have another option

Using a Software

This is the most easiest and fastest way to make an SVG element is to use different software available. So how do they work and what are they.

So the software that can be used for this are:

• Adobe Illustrator
• Figma

If you want to design a complex illustration having multiple elements to it then it will be easier to just learn UI UX desining. Under UI UX design training, you can master both Figma and Adobe Illustrator. Especailly Illustrator is best to master since it’s made to work on vector objects.

Firstly you need to design the illustration and then you can simply export it in svg format. To do that go to

File – Export- Export As

Then select file type to be SVG and you are done.

However if you want to make an icon or minimalistic illustration then you can also opt for figma.

Using CSS to manipulate the SVG

Creating a SVG

In order to do this we actually need to make an icon using the softwares mentioned. I’ll be using figma for this one.

So let’s begin, here are the steps to make an slider icon

• Open Figma
• Create new file
• Make a frame not so 100X100 would do (create yourself however they are prebuilt sizes on the right)
• Create a slider icon using shapes like circle and rectangle
• Now group the elements together like a circle a rectangle have same group and likewise
• Rename elements accordingly (we are doing it because this will get converted in a id)
• Now it’s time to export it in SVG format select the frame
• Below the fill colors select show in exports
• Select SVG format and remember to choose the id attribute setting that next to file type.
• And Export it to the desired location.

We have our SVG now lets create simple animation using this

Hover Effect On SVG

In order to do this you should have good knowledge of HTML and CSS

Here are steps to make the structure

• Create a html file add basic code like html, head, and body.
• Now open the SVG file either with notepad or your preferred code editor
• Copy the code you see in the html document
• Add additional heading, paragraph, and a button if you like.
• Wrap everything into a parent div and add a class called parent-svg (you can choose any name)
• Note: there are fill attributes in SVG. Note down the color and remove that from everywhere as it becomes harder to control with CSS. After doing that SVG will become invisible since it has no background color now (we’ll get this back in CSS below).
• Also go ahead and add CSS variables on each of the circles. This will be utilized if we wanted to give them a delay.

After doing the code should look like the one below

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slides</title>
</head>

<body>

    <div class="parent-svg">
        <svg width="100" height="89" viewBox="0 0 120 89" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="Frame1">
                <rect width="120" height="89" fill="white" />
                <g id="first">
                    <rect id="rectangle_1" x="12" y="17" width="96" height="8" />
                    <circle id="circle_1" cx="94.5" style="--order:1;" cy="21.5" r="8.5" />
                </g>

                <g id="second">
                    <rect id="rectangle_2" x="12" y="40" width="96" height="8" />
                    <circle id="circle_2" cx="59.5" style="--order:2;" cy="44.5" r="8.5" />
                </g>
                <g id="third">
                    <rect id="rectangle_3" x="12" y="63" width="96" height="8" />
                    <circle id="circle_3" style="--order:3;" cx="27.5" cy="67.5" r="8.5" />
                </g>
            </g>
        </svg>
        <h2>This is a heading</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, quidem quis. Asperiores at suscipit nam
            beatae ducimus eaque eius quo ex quam nobis voluptatum quaerat dolores, minima odio nihil deleniti.
        </p>
        <button>Read More</button>
    </div>
</body>

</html>

Now we have structure let’s get into styling it

Note in root two variables are created and have the same colors as fill values in SVG had.

Here is the CSS to style the elements

* {
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
:root{   --light-color:#F55151;   --dark-color:#292929; }
    .parent-svg {
        width: 400px;
        border: 1px solid #ddd;
        padding: 20px;
    }

    .parent-svg h2 {
        margin: 0px;
    }
    .parent-svg p {
        margin-top: 0%;
    }

    .parent-svg button {
        padding: 10px 20px;
        border: none;
        background-color: var(--light-color);
        color: #fff;
    }

    .parent-svg:hover button {
        background-color: var(--dark-color);
    }

Now we have made a layout, it’s time to make the hover effect for svg. Doing this is quite easy. All you have to do is target ids you see in SVG (the ones you gave when renamed the elements in figma).

Using translate property we move slider keys in the SVG and we also need to transition property to the elements. In this case we are using linear to make runs at an equal pace.

So lets make our SVG visible again by giving them the fill color using CSS variables.

#rectangle_3,
        #rectangle_2,
        #rectangle_1 {
            fill: var(--dark-color);
        }

        #circle_1,
        #circle_2,
        #circle_3 {
            fill: var(--light-color);
            transition: all 1s linear;
                  }

Now determine the position where you want your SVG circles to be when hovered upon. Give them appropriately with transform translate property.

.parent-svg:hover #circle_1 {
            transform: translateX(-65px);
        }

        .parent-svg:hover #circle_3 {
            transform: translateX(65px);

        }

        .parent-svg:hover #circle_2 {
            transform: translateX(20px);
        }

After doing that we also want our circle elements to go back to their original position. So add transform translate value to zero in base CSS of circle ids.

Now to add transition delay we have already added the variables now only thing we need to is target those variables and use calc function to give each of them delay individually like so

transition-delay: calc(var(--order)*300ms);

In the same way, different elements can be made and animated by CSS only.

By using SVG more often you can make your site more attractive. This can also be integrated with animation properties of CSS as well but I guess that’s for some other article.

About Author

Start Learning Website Designing and Development from ADMEC Multimedia

Ours diploma and certificate courses in web designing and web development provide 100% placement assistance. ADMEC Multimedia Institute is a professional web designing and development training institute, located in New Delhi. Since 2006, we’ve placed thousands of students in digital media, video production and IT sectors. For more information on our batches, trainers, and fee structure, you can contact at +91 9911782350 or mail us info@admecindia.co.in.