Styling SVG Images - Newbies' Approach
Tags: todayilearned, tutorial, codenewbie, svg
Published: 2020-05-05 10:47:10

[SVG images](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) 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](#1)
[Let's Style The SVG Image](#2)

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.

<a name="1"></a>
### Getting Started

![Let's Get Started already](https://media.giphy.com/media/3o6Zt0Osof0dEDXjMY/giphy.gif)

The SVG image for this tutorial can be downloaded [here](https://freesvg.org/volleyball-player-caricature). However, you can get the starter project [here](https://github.com/EBEREGIT/styling-svg-images/tree/starter-project).

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.

```css

body{
    text-align: center;
}

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

![Starter Project](https://dev-to-uploads.s3.amazonaws.com/i/l55mafu2iaj3xpcsrd3q.JPG)

<a name="2"></a>
**NOW TO THE REAL GIST**

![Let's Gossip About SVG Images](https://media.giphy.com/media/3ohc0Wml5MZir70K0U/giphy.gif)

## 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:

```html

<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:

![SVG is now takes up the whole page and it is responsive too](https://dev-to-uploads.s3.amazonaws.com/i/y326rifv946zsphrabtq.JPG)

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:

```css

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

circle{
    stroke: darkblue;
}

```
Check if your output matches mine below:

![Stroke Added](https://dev-to-uploads.s3.amazonaws.com/i/sa8p8g8815lm6u2hb5fy.JPG)

*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:

```css

#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 

![Fill Added](https://dev-to-uploads.s3.amazonaws.com/i/6yrdytn4p7hzm3qib64k.JPG)

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

```css

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

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

```
My output is the GIF image you see below:

![Hover added](https://dev-to-uploads.s3.amazonaws.com/i/arr2k0echobmtrgo01ro.gif)

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:

```html

<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:

![Title and Url Added](https://dev-to-uploads.s3.amazonaws.com/i/maxapfdpvcdit3ztpgy6.gif)

*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 and ``url`` respectively for us.

**AWESOME!!!**

**YOU DID GREAT!!!**

![You made it](https://media.giphy.com/media/4QEGzwV57p27EbVHXG/giphy.gif)

**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](https://github.com/EBEREGIT/styling-svg-images) with a little bonus.

{% github EBEREGIT/styling-svg-images %}

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](https://twitter.com/eberetwit) | [LinkedIn](https://www.linkedin.com/in/samson-ebere-njoku-profile/) | [Github](https://github.com/EBEREGIT)**

Thank You For Your Time.