SVG images are so important to applications especially for the fact that they are light in weight and so, enables fast loading of our applications. This tutorial is meant to make newbies look at SVG from a friendly perspective and build better applications.

Getting Started
Let's Style The SVG Image

SVG files are made up of a couple of elements such as the <g> and <path> elements. You don't have to memorize them, just inspect the SVG image in your browser to see the different parts and how you can target the part you want.

These elements basically have border (represented as stroke) and background-color (represented as fill) attributes. We will be looking into that in a bit.

Getting Started

The SVG image for this tutorial can be downloaded here. However, you can get the starter project here.

In the starter project, I have gone ahead to:

1. Add the downloaded SVG file to the project directory.
2. Create an index.html file.
3. Copy and pasted the SVG code from the SVG file into the index.html file.
4. Created a style.css file with the following code to center all contents.

body{
    text-align: center;
}

If you run the project in a browser, you should have the following output:

NOW TO THE REAL GIST

Let's style the SVG image

Make the image responsive

Change the width and height properties of the SVG element to 50% and 100vh respectively in the index.html file to make the image responsive like so:

<svg
        version="1.1"
        id="volleyball"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        width="50%"
        height="100vh"
        viewBox="0 -0.5 167 267"
        enable-background="new 0 -0.5 167 267"
        xml:space="preserve"
      >

      ...

</svg>

Now, your output should be like this:

Looking Sharp, We Move!

Change the border color

The SVG image we are using in this tutorial contains a <g> element, <path> element and <circle> element.

We will target the whole path and circle at once and give them border colors and width with the following code:

path{
    stroke: red;
    stroke-width: 2px;
}

circle{
    stroke: darkblue;
}

Check if your output matches mine below:

*Can you see that we changed the path's border color to red with a reduced width? Then we changed the circle's border color to darkblue. How Awesome!

If you are ready, Let's explore more...

Change the background color

We could choose to change all the paths' and circles' background color like we did with the border but let's do something different. We are going to give each path and circle different background color.

If you take a proper look at the SVG code in the index.html file, you will notice that each path and circle has a unique id.

YESSS! That will give us our next victory.

Let's add the following codes to our styles.css file to give the path and circle different background color with the following code:

#torso{
    fill: blue;
}

#left_leg{
    fill: green;
}

#left_arm{
    fill: indigo;
}

#right_arm{
    fill: yellow;
}

#ball{
    fill: hotpink;
}

#head{
    fill: olive;
}

I now have a clown-like volley ball play

If your clown looks like mine, then let's proceed...

Add a hover attribute

To add a hover property, add the following codes to the styles.css file

path:hover{
    stroke: black;
    stroke-width: 10px;
}

circle:hover{
    stroke: black;
    stroke-width: 10px;
}

My output is the GIF image you see below:

With the Clown looking that way, let's do one more thing.

Add Achor Tags

• Now rap each of the path and circle with an amchor tag.

• Give the anchor tag a title (represented as xlink:title) and a href (represented as xlink:href) attribute in the following manner:
  

<a xlink:title="a title" xlink:href="a url">
  <path> codes here </path>
</a>

<a xlink:title="a title" xlink:href="a url">
  <circle> codes here </circle>
</a>

Please use any title and url of your choice. I added my social media profiles and other websites I built. Checkout mine below:

Do you notice that when we hover, apart from changing the stroke-width, we are able to see lables?

Do you also notice that each part of the image is linked to a different website?

The xlink:title and xlink:href attributes adds a label andurl`` respectively for us.

AWESOME!!!

YOU DID GREAT!!!

YOU ROCK FOR GETTING THIS FAR!!!

Conclusion

I really enjoyed dissecting that SVG image with you. We can now look into any SVG image that come our way. Do explore more.

All codes can be found here with a little bonus.

If you have questions, comments or suggestions, please drop them in the comment section.

You can also follow and message me on social media platforms.

Twitter | LinkedIn | Github

Thank You For Your Time.