DEV Community

Cover image for Styling SVG Images - Newbies' Approach
NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on

Styling SVG Images - Newbies' Approach

#todayilearned #tutorial #codenewbie #svg

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

Let's Get Started already

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Starter Project


NOW TO THE REAL GIST

Let's Gossip About SVG Images

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>
Enter fullscreen mode Exit fullscreen mode

Now, your output should be like this:

SVG is now takes up the whole page and it is responsive too

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;
}
Enter fullscreen mode Exit fullscreen mode

Check if your output matches mine below:

Stroke Added

*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;
}
Enter fullscreen mode Exit fullscreen mode

I now have a clown-like volley ball play

Fill Added

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;
}
Enter fullscreen mode Exit fullscreen mode

My output is the GIF image you see below:

Hover added

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>
Enter fullscreen mode Exit fullscreen mode

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

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 made it

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.

GitHub logo EBEREGIT / styling-svg-images

This is a tutorial meant to make newbies look at SVG from a friendly perspective and build better applications.

styling-svg-images

This is a tutorial meant to make newbies look at SVG from a friendly perspective and build better applications.




View on GitHub


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.

Top comments (0)