SVG - freeCodeCamp.org

SVG Toggle Button Tutorial – How to Handle Dark Mode with CSS and JavaScript

Hunor Márton Borbély — Fri, 08 Mar 2024 13:46:26 +0000

How can you detect dark mode in CSS and JavaScript? How can you manually override it with a toggle button? And how can you create a sun and moon icon with SVG?

In this tutorial, you will learn how to detect dark mode in CSS and JavaScript, and you will create a toggle button with SVG to override the default behavior. You will use plain HTML, CSS, and JavaScript, so you don't need any preliminary requirements before starting.

You can also watch this article as a video on YouTube.

How to Handle Dark Mode with CSS
How to Code a Sun Icon with SVG
How to Detect Dark Mode in JavaScript
How to Code a Moon Icon with SVG
How to Toggle Dark Mode with JavaScript
Next Steps

How to Handle Dark Mode with CSS

Let's say you have a simple website with some text. By default, you set the text color to be black and the background color to be white. Implementing dark mode for this site with CSS is very simple:

html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dark Modetitle>
    <link rel="stylesheet" href="index.css" />
    <script src="index.js" defer>script>
  head>

  <body>
    <p>
      How to detect dark mode in CSS and in JavaScript? How can we override it
      manually with a toggle button? In this quick tutorial, we look into
      detecting dark mode in CSS and JavaScript, and then we create a toggle
      button with SVG to override the default behavior.
    p>
  body>
html>

A simple website with some text in dark mode

All you need to do is add a media query and set a condition. With this condition, you set the following CSS statements to be only valid if the preferred color scheme is dark.

Inside this media query, you can define the colors for dark mode. In this case, you flip the colors and set the text color to white and the background color to black:

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

This will take the setting from your OS or browser setting. By default, it comes from the Operating System, but the browser can decide to override it. In Google Chrome, you can find this setting under 'Appearance'. By default, it follows the device setting.

What's great about the CSS solution is that if you change this setting while visiting the website, the styling will update automatically.

This way, you can set a custom style for the body element and any other elements as well.

It doesn't work in one case, though. You cannot style what's inside an HTML Canvas element with CSS. If you built up a game entirely from JavaScript using the Canvas API or Three.js, you must also set the colors for dark mode in JavaScript.

In the next steps, we will cover this and look into how to create an SVG toggle button to switch between light and dark modes.

How to Code a Sun Icon with SVG

Before you learn how to handle dark mode in JavaScript, let's take a quick detour and see how to code a dark mode toggle button with SVG. Detecting dark mode is one thing, but you should allow the user to manually toggle between light and dark modes.

Sun Icon

Check out my previous tutorial if you need a quick introduction to coding SVG icons. It contains many great examples from beginner to advanced levels. And if you are new to SVGs, don't worry. These are very simple examples.

So, let's start with the svg element. This will serve as a container for all the image elements. Set its size to 30 times 30:

The svg element

Then, add a circle. For a circle element, you have to set the center coordinates of the circle and its radius. The center coordinates are both 15, and the radius is 6. Then, set a color with the fill property:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />
svg>

We add a circle as the core of the sun

To set the color, you can use the currentColor property that takes over the current color setting from CSS. This will come in handy later when you toggle dark and light modes. The icon will switch colors automatically.

Then, add the sun rays. You need to use the line element for this, where you have to set the starting and end coordinates. You can also set the stroke color with the stroke property, the stroke-width to add thickness, and the stroke-linecap property to make the ends of the lines rounded:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />

  <line
    id="ray"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    x1="15"
    y1="1"
    x2="15"
    y2="4"
  >line>
svg>

We add a line element as a sunray

Now, once you have one ray, you can reuse the same ray to draw the others.

You can give this ray an id and reuse it with the use element. For the reused elements, you can set a rotation. Set the rotation angle and the center of rotation. You want to rotate the rays around the center of the sun, so set it to 15,15. Then, increment the rotation by 45 degrees for each ray:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />

  <line
    id="ray"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    x1="15"
    y1="1"
    x2="15"
    y2="4"
  >line>

  <use href="#ray" transform="rotate(45 15 15)" />
  <use href="#ray" transform="rotate(90 15 15)" />
  <use href="#ray" transform="rotate(135 15 15)" />
  <use href="#ray" transform="rotate(180 15 15)" />
  <use href="#ray" transform="rotate(225 15 15)" />
  <use href="#ray" transform="rotate(270 15 15)" />
  <use href="#ray" transform="rotate(315 15 15)" />
svg>

The finished sun icon

How to Detect Dark Mode in JavaScript

Before we get to the moon icon, let's see how to detect dark mode in JavaScript. This can be useful when building a game, like we did a couple weeks ago in the Gorillas JavaScript game tutorial.

In that game, we were drawing on an HTML Canvas element with JavaScript. We set all the colors with JavaScript. If we want to support dark mode, we can set the colors based on a darkMode variable. But how do we detect if we are in dark mode? How do we set the value of this variable?

The following code is an example snippet from the game tutorial above. Here we set the fill color before we draw a rectangle on the canvas. To learn more about drawing on a canvas element, check out this tutorial.

When drawing on a canvas element we set the colors from JavaScript. But how we detect dark mode?

Detecting dark mode in JavaScript is also very simple. Interestingly enough, this solution also depends on the CSS query selectors you used before.

You can create a matchMedia object with the same condition we used in CSS. This method can check if the document matches a media query. Pass on prefers-color-scheme: dark as an argument:

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

let darkMode = darkModeMediaQuery.matches;

. . .

function drawBuildings() {
  state.buildings.forEach((building) => {
    ctx.fillStyle = darkMode ? "#254D7E" : "#947285";
    ctx.fillRect(building.x, 0, building.width, building.height);
  });
}

Then, can check the matches property of this object. If it is true, then you are in dark mode. You can save this into a variable, and later, you can use this variable to decide what colors you should use when painting on the canvas element.

This variable, however, doesn't get refreshed automatically when you switch between light mode and dark mode. You need to add an event listener that detects if the settings change.

Here, we define a function that checks the matches property of the incoming object to decide if you just switched to bright or dark mode:

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

let darkMode = darkModeMediaQuery.matches;

darkModeMediaQuery.addEventListener("change", (e) => {
  if (e.matches) {
    darkMode = true;
  } else {
    darkMode = false;
  }
});

. . .

function drawBuildings() {
  state.buildings.forEach((building) => {
    ctx.fillStyle = darkMode ? "#254D7E" : "#947285";
    ctx.fillRect(building.x, 0, building.width, building.height);
  });
}

Now, if you set the colors based on this darkMode variable, you should see that the game's appearance changes once you switch between light and dark mode in the OS settings. Check out this demo to see it in action.

How to Code a Moon Icon with SVG

Before we discuss overriding the default OS setting with a toggle button, let's examine the other half of our toggle icon: Let's draw a moon.

The Sun and Moon icons

Start with an svg element of the same size and define a path inside it. You can define a path element by setting its d attribute. In this attribute, you build a path from a series of commands:

We define a path with a series of commands

You start with the move-to command to go to the initial position. This command consists of the letter M and the starting coordinate:

Using the move-to command within a path

Then, use an arc command to draw the outer arc of the moon. This command might look a bit scary because it has several properties. Let's see what we have:

The arc command and it's several properties

A command always continues the previous command, so this arc will draw the arc from the coordinates of the move-to command. Commands also end with the coordinates of the endpoint.

Here, you set where the arc ends. The rest of the properties are about how to draw an arc from the starting point to the endpoint:

The last two properties of the arc command show the endpoint of the arc

The first two properties are the horizontal and vertical radius of our arc. In our case, we want to have the arc of a circle, so we set the same value for both. With the third argument, you can set a rotation. When both radiuses are the same, this property makes no difference. You can leave it at zero:

Horiyontal and vertical radius of the arc

Then, we have the large arc flag property. With this, you can decide whether to go the long or short way to our end coordinate. You can see that you can reach the endpoint in multiple ways, even with the same radiuses.

There are two arcs – in the case of the first one, you go the long way and in the case of the second one, you will go the short way. This is a flag, so the value here can be 0 or 1:

The large arc flag decides if we should reach the endpoint the short way or the long way

Finally, there is the sweep flag. This basically sets whether you should draw the arc clockwise or counterclockwise. The two options mirror each other. In the first case, you set this to zero – in the second, you set it to one:

The sweep flag decides if we should go clockwise or counterclockwise

Now that you have one arc, you set up the other one. Here, you set the endpoint to the beginning. To the same coordinates as you used for the move-to command.

Then you can use the same radiuses, but you have to change the large arc flag and the sweep flag to end up with a moon:

<svg width="30" height="30">
  <path
    fill="currentColor"
    d="
      M 23, 5
      A 12 12 0 1 0 23, 25
      A 12 12 0 0 1 23, 5"
  />
svg>

The finished moon icon

How can you use these two icons in a button to toggle light mode and dark mode in JavaScript?

How to Toggle Dark Mode with JavaScript

If you want to override the system or browser settings for dark mode with a manual switch, you can't rely on the CSS media query anymore. This works for rendering the UI based on the settings, but you can't override it from JavaScript.

You can't override a CSS media query

Instead, you can define a dark-mode class and toggle it from JavaScript.

In CSS, define a class that will change the same settings the media query did before. Then, in JavaScript, you can use the same logic you had before to get the default setting and then add or remove this class.

You can set this class on our initial page load and toggle it if you click a button:

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

.dark-mode {
  background-color: black;
  color: white;
}

Now, how do you toggle this with a button? In your HTML file, add a button element with an event handler. Then, move both SVGs inside this button element and assign IDs for them. You will toggle the visibility of these icons from JavaScript:

html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dark Modetitle>
    <link rel="stylesheet" href="index.css" />
    <script src="index.js" defer>script>
  head>

  <body>
    <p>
      How to detect dark mode in CSS and in JavaScript? How can we override it
      manually with a toggle button? In this quick tutorial, we look into
      detecting dark mode in CSS and JavaScript, and then we create a toggle
      button with SVG to override the default behavior.
    p>

    <button onclick="toggleDarkMode()">
      <svg width="30" height="30" id="light-icon">
        <circle cx="15" cy="15" r="6" fill="currentColor" />

        <line
          id="ray"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          x1="15"
          y1="1"
          x2="15"
          y2="4"
        >line>

        <use href="#ray" transform="rotate(45 15 15)" />
        <use href="#ray" transform="rotate(90 15 15)" />
        <use href="#ray" transform="rotate(135 15 15)" />
        <use href="#ray" transform="rotate(180 15 15)" />
        <use href="#ray" transform="rotate(225 15 15)" />
        <use href="#ray" transform="rotate(270 15 15)" />
        <use href="#ray" transform="rotate(315 15 15)" />
      svg>
      <svg width="30" height="30" id="dark-icon">
        <path
          fill="currentColor"
          d="
          M 23, 5
          A 12 12 0 1 0 23, 25
          A 12 12 0 0 1 23, 5"
        />
      svg>
    button>
  body>
html>

You can also unset the default appearance of the button element in CSS, except the cursor property. You should have that as pointer:

. . .

button {
  all: unset;
  cursor: pointer;
}

. . .

Now, let's implement the event handler in JavaScript. First you need to access the SVG icons by ID:

const lightIcon = document.getElementById("light-icon");
const darkIcon = document.getElementById("dark-icon");

. . .

Then, add the dark-mode class to the body element in case you are in dark mode and hide one of the SVG icons based on the darkMode variable. You detect dark mode as you did before:

. . .

// Check if dark mode is preferred
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
let darkMode = darkModeMediaQuery.matches;

// Set dark-mode class on body if darkMode is true and pick icon
if (darkMode) {
  document.body.classList.add("dark-mode");
  darkIcon.setAttribute("display", "none");
} else {
  lightIcon.setAttribute("display", "none");
}

. . .

And finally, can implement the function that flips the darkMode property. This function toggles the dark-mode class on the body element, and toggles the SVG icons:

. . .

// Toggle dark mode on button click
function toggleDarkMode() {
  // Toggle darkMode variable
  darkMode = !darkMode;

  // Toggle dark-mode class on body
  document.body.classList.toggle("dark-mode");

  // Toggle light and dark icons
  if (darkMode) {
    lightIcon.setAttribute("display", "block");
    darkIcon.setAttribute("display", "none");
  } else {
    lightIcon.setAttribute("display", "none");
    darkIcon.setAttribute("display", "block");
  }
}

Now, this works: by default, you still have the setting from the OS or browser. But once you click this button, it will override this manually.

Final look in light mode

Final look in dark mode

Next Steps

With all this in place, you have a functionality that takes the dark mode setting from the browser or the OS by default, and you can override it with a nice-looking toggle button. In the YouTube version of this tutorial, you can also learn how to use localStorage to save this setting for the next session.

If you want to learn more about SVGs, check out SVG-tutorial.com, where you can learn more about SVGs from beginner to advanced levels with many great examples.

If you want to use this behavior in a game, check out the Gorillas JavaScript game tutorial, where we build the entire game from scratch. It's a massive two-hour tutorial that covers drawing on a Canvas element with JavaScript and the whole game logic with plain JavaScript.

Subscribe to my channel for more JavaScript game development tutorials:

How to use the Fullscreen API in JavaScript

Hunor Márton Borbély — Thu, 22 Feb 2024 14:17:32 +0000

How do you run a game created for the web in fullscreen? In this quick tutorial, you'll see how to display a game or any other HTML element in fullscreen, how to exit fullscreen, and how to make a nice fullscreen toggle button in SVG.

Recently I published a long JavaScript game tutorial. While it was a very packed guide, there were still a few things we could not cover in it: how to display the game in fullscreen.

When you watch a video on YouTube, you have the option to also watch it on fullscreen. But did you know that the fullscreen feature isn't only for video elements?

In JavaScript, there’s a Fullscreen API. And it’s surprisingly simple to use. Here's a quick demo of what we're about to implement. Let's see how it works.

You can also watch this article as a video on YouTube.

How to Enter Fullscreen Mode

Let’s say we have a simple website with some text. And at the bottom, we have a button that will display the text in full screen. We are going to refine the look of this button, but first, let’s get work on the main logic.

A simple website with some text and a Toggle Fullscreen button

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

In the code above, we attached an event handler to the button in HTML. We can then implement the toggleFullscreen function logic in JavaScript.

In this function, all we have to do is call the requestFullScreen method on the document’s documentElement property. And that’s it:

function toggleFullscreen() {
  document.documentElement.requestFullscreen();
}

If you click the button, your website will pop into fullscreen.

How to Style the Fullscreen

Before we cover how to exit full screen and create a nice-looking toggle button, let’s see a few other things.

What you might notice right away is that, with more space, your content might get a bit lost on a full screen. Make sure you have a responsive styling that looks good on every screen size.

You can even style the layout specifically for fullscreen. In CSS you can set a media query that only applies the styling in case the display-mode is fullscreen.

For instance, you can change the font-size, or change the background-color to have a distinct look on full screen.

@media (display-mode: fullscreen) {
  body {
    background-color: #f9bb86;
    font-size: 1.2em;
  }
}

How to Display Games with the Canvas Element in Fullscreen

In this case, we want to make a game that uses the canvas element to be fullscreen – like the Gorillas game – we also need to resize the canvas element to fit the whole screen.

In this case, we can use the windows’s resize event. The event is triggered both when we simply resize the browser window, and when we enter or exit fullscreen mode.

With the resize event, we can resize the canvas element to fit the whole screen, update the scaling, adjust any other properties we need to change on resize and redraw the whole scene.

window.addEventListener("resize", () => {
  // Resize canvas element
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // Update scaling
  // . . .

  // Adjust size dependent properties
  // . . .

  // Redraw canvas
  draw();
});

If you check the source code of the Gorillas game on CodePen, you'll find similar steps.

How to Exit Fullscreen

Now that we know how to enter full screen, how do we exit from it?

By default, if you press the Escape key, the browser switches back to the normal view. In Google Chrome, you even get a notification at the top of the screen about this when you enter fullscreen mode.

Google Chrome shows a notification on top of the screen once you enter full screen

What if you want to exit fullscreen mode when you click the HTML button? Let’s change our button’s behavior to toggle fullscreen on or off.

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

First, we start by checking if we are in fullscreen mode already. We can do this by checking the document’s fullscreenElement property. If it is undefined, then we enter fullscreen mode the same way we did before. And if we are already in fullscreen mode, then we can exit by calling the document’s exitFullscreen method.

It is really that simple. With a few lines of code, we can implement the logic for a fullscreen toggle button.

How to Code a Fullscreen Icon with SVG

If you follow my tutorials, you know I love creative coding, and drawing from code. So let’s update the look of our button, to make it look similar to what we have on YouTube.

Fullscreen icon

Let’s create an SVG image within our button. If you check the source code of YouTube, you will see that they also use an SVG.

Let’s define an SVG element within HTML. We'll set its size to 30 x 30 and define a path element:

. . .

<button onclick="toggleFullscreen()">
  <svg width="30" height="30">
    <path
      stroke="black"
      stroke-width="3"
      fill="none"
      d="
        M 10, 2 L 2,2 L 2, 10
        M 20, 2 L 28,2 L 28, 10
        M 28, 20 L 28,28 L 20, 28
        M 10, 28 L 2,28 L 2, 20"
    />
  svg>
button>

. . .

To style the path, we set its color with the stroke property, set its stroke-width, and made sure that we didn't end up with a filled shape. SVG paths by default are filled, so we need to set explicitly that we don’t want to fill this shape.

Using the move-to and line-to commands within an SVG path

Then we defined the path with a few move-to and line-to commands. We can set these commands as a string in the d attribute of the path element.

We started with a move-to command: M 10, 2. The letter M signifies that we have a move-to command, and the 10 and 2 are the x and y coordinates of this command. We moved to the start of one of the four lines.

Then we continued the path with a line-to command that moves to the corner, and then with another line-to command. The line-to command works in a similar way. It starts with the letter L, then we set an x, y coordinates where the line should go to.

Then we did the same with the other corners. We move to the next line segment with another move-to command and draw a line with two more line-to commands.

Drawing a path on a Canvas element with JavaScript has some similarities to defining a path in SVG

Note: If you read my previous tutorial on how to make the gorillas game, then you might have noticed that we had something similar there. We also drew paths with move to and line to. Except that there we were drawn on a canvas element with JavaScript, and now we have the commands as a string within the HTML file.

How to Toggle the Icon's Appearance

Now the SVG is looking great, but what if we want to have a different look when we are in fullscreen mode? On YouTube, when we enter fullscreen mode, the button switches to a different icon.

The two faces of the fullscreen icon

You can do this in different ways. The easiest way is probably to define another path, within the same SVG element with a different look. Then make this path transparent by default. We are going to toggle the visibility of these two paths in JavaScript.

. . .

<button onclick="toggleFullscreen()">
  <svg width="30" height="30">
    <path
      id="enter-fullscreen"
      stroke="black"
      stroke-width="3"
      fill="none"
      d="
        M 10, 2 L 2,2 L 2, 10
        M 20, 2 L 28,2 L 28, 10
        M 28, 20 L 28,28 L 20, 28
        M 10, 28 L 2,28 L 2, 20"
    />
    <path
      id="exit-fullscreen"
      stroke="transparent"
      stroke-width="3"
      fill="none"
      d="
        M 10, 2 L 10,10 L 2, 10
        M 20, 2 L 20,10 L 28, 10
        M 28, 20 L 20,20 L 20, 28
        M 10, 28 L 10,20 L 2, 20"
    />
  svg>
button>

. . .

This second path is very similar to the previous one. Except that we used different coordinates for some of the line-to commands.

Then we set unique IDs for both of these paths, and we update our toggle function in JavaScript. In JavaScript, we get a reference to these paths by ID, and then in the toggle button’s event handler, we can switch the visibility of these elements back and forth.

const enterFullscreen = document.getElementById("enter-fullscreen");
const exitFullscreen = document.getElementById("exit-fullscreen");

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    enterFullscreen.setAttribute("stroke", "transparent");
    exitFullscreen.setAttribute("stroke", "black");
  } else {
    document.exitFullscreen();
    enterFullscreen.setAttribute("stroke", "black");
    exitFullscreen.setAttribute("stroke", "transparent");
  }
}

Now if you click this button, it toggles the fullscreen mode and changes its own appearance.

Learn More

If you want to learn more about SVGs, check out SVG-Tutorial.com where you can find a lot of examples from the basics to more advanced levels. It’s a free site and you can also find the example that we discussed in this article.

To use the button to run a JavaScript game in full screen, check out the whole JavaScript Game Tutorial on how to remake the classic Gorillas game here on freeCodeCamp or on YouTube. It’s a massive tutorial that covers things from drawing on an HTML Canvas element, to the entire game logic, from event handling, through the animation loop, hit detection, and even AI logic, for the enemy gorilla.

You can subscribe to my channel for more JavaScript game development tutorials:

SVG Tutorial – How to Code Images with 12 Examples

Hunor Márton Borbély — Mon, 04 Dec 2023 12:29:00 +0000

Have you ever needed an icon for your website, but you couldn't quite find the right one? Or perhaps you wanted to have a simple diagram, but didn't want to learn a whole new library just for that?

Well, good news – you can do all that and more without ever leaving your favorite code editor or using any third party tools or libraries.

Since HTML5, we can include the code of an SVG image inside an HTML document. We don’t even need to use the image tag that refers to a separate file. We can inline the code of an image right inside the HTML. We can do this because SVGs have a very similar syntax to HTML.

This opens up a lot of cool options. Suddenly we can access parts of an image from JavaScript or set the style from CSS. We can animate parts of an image from JavaScript or make it interactive. Or we can turn things around and generate graphics from code.

For more complicated images, you will still use a designer tool. But the next time you need a simple icon, a diagram, or animation, maybe you can code it yourself.

So how do SVGs look like under the surface? In this tutorial, we go through the source code of a few SVGs to cover the foundations.

The following examples are from svg-tutorial.com. You can also watch this article as a video with even more fun examples.

The SVG tag

First, we have to talk about the svg tag itself. This tag contains the image elements and defines the frame of our image. It sets the inner size and the outer size of the image.

The width and height property define how much space the image takes up in the browser. There’s often a viewBox property as well. This defines a coordinate system for the elements inside the image. These two can be confusing because they both define a size.

You can think of the width and height of an SVG as an external size and the viewBox as an internal size.

The size defined by width and height is how the rest of HTML thinks of the image and how big it appears in the browser. The size defined by viewBox is how the image elements think of the image when they position themselves inside of it.

In the next example we have three SVGs that have the very same content. A circle element with the same center coordinate and same radius. They appear quite different, though.

The very same circle can appear different based on the size of the image and the viewBox property

At the example in the middle, the size defined by width and height matches the one defined by the viewbox. In the first example we see what happens if the width and height are smaller. The image simply shrinks down as all the coordinates and sizes defined within the image still align to the viewbox.

In the last example we see what happens if the viewbox is focusing on only part of the image. Things appear bigger in this case, but the actual size of the image is still defined by the width and height property.

The viewBox also defines the center of the coordinate system in which the image items place themselves.

The first two numbers define which coordinate should be at the top left corner of the image. Coordinates grow to the right and downwards. In this article, we will center the coordinate systems. The 0,0 coordinate will always be in the middle of the image.

One note before we start: while we can inline SVG images in an HTML file, that doesn’t mean we can freely combine any SVG tag with any HTML tag.

The SVG tag represents the frame of the image and every SVG element has to come within an SVG tag. The same is true in the opposite direction. HTML tags can’t be within an SVG tag, so we can’t have a div or a header tag inside an SVG. But don’t worry, there are similar tags available.

How to Make a Christmas Ornament with SVG

Let’s start with a simple Christmas tree ornament. Here we'll only use simple shapes. A rectangle, and two circles.

We'll position and style these elements with attributes. For the circle, we define the center position and for the rectangle, we define the top left corner. These positions are always related to the coordinate system defined by the viewBox.

Christmas Ornament made out of circles and a rectangle. On the right you can see the coordinates we use in this example.

<html>
  <svg width="200" height="200" viewBox="-100 -100 200 200”>
    0" cy="20" r="70" fill="#D1495B" />

    <circle
      cx="0"
      cy="-75"
      r="12"
      fill="none"
      stroke="#F79257"
      stroke-width="2"
    />

    <rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
  svg>
html>

Remember, we moved the center of the coordinate system to the middle of the image and the X-axis grows to the right and the Y-axis grows towards the bottom.

We also have presentational attributes that style our shapes. Unlike in HTML, we do not use background-color to set a color for a shape but we use the fill attribute.

And to set a border for a shape we use stroke and stroke-width. Note how we use the circle element both to draw a ring and a ball with different attributes.

How to Build a Christmas Tree with SVG

Let’s move on to a Christmas tree. We can’t always use basic shapes to assemble our image. A polygon is the simplest way to draw a freeform shape. Here we set a list of points that are connected with straight lines.

Christmas Tree made out of polygons and a rectangle

<html>
  <svg width="200" height="200" viewBox="-100 -100 200 200">
    <polygon points="0,0 80,120 -80,120" fill="#234236" />
    <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
    <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
    <rect x="-20" y="120" width="40" height="30" fill="brown" />
  svg>
html>

You might be wondering how we know before starting to code where our coordinates should be.

To be honest, this requires a bit of imagination. You can start with pen and paper and draw a draft first to get an estimate. Or you can just make a guess then adjust your values until it looks good.

How to Make a Gingerbread Figure with SVG

Let’s move on with a gingerbread figure. Since our SVG is living inside an HTML file now, we can assign CSS classes to each tag and move some attributes to CSS.

We can only move the presentation attributes, though. Position attributes and attributes that define the shape still have to stay in the HTML. But we can move colors, stroke, and font attributes to CSS.

Gingerbread figure example. On the right you can see how would it look if the stroke-width were one

<svg class="gingerbread" width="200" height="200" viewBox="-100 -100 200 200">
  <circle class="body" cx="0" cy="-50" r="30" />

  <circle class="eye" cx="-12" cy="-55" r="3" />
  <circle class="eye" cx="12" cy="-55" r="3" />
  <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />

  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class="limb" x1="25" y1="50" x2="0" y2="-15" />

  <circle class="button" cx="0" cy="-10" r="5" />
  <circle class="button" cx="0" cy="10" r="5" />
svg>

.gingerbread .body {
  fill: #cd803d;
}

.gingerbread .eye {
  fill: white;
}

.gingerbread .mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

.gingerbread .limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

We already saw the fill and some of the stroke properties, but here’s another one – the stroke-linecap. This can make our line cap round.

Note that the legs and the arms are simple lines here. If we remove the line cap and set a smaller stroke-width, then we can see that these are simple lines. But by setting a thick stroke width and a round line cap we can shape legs and arms for our figure.

Also note the rx property at the rectangle defining the mouth. This will make the edges round. You can think of it as border-radius if you like.

How to Make a Star with SVG

Let’s move on to a star. A star is a simple shape, so we can define it as a bunch of polygons and set each point individually. But then we would need to know each coordinate.

Instead of that, we can just define one wing as a group, then repeat it five times with a rotation to get the star's shape. We use the transform attribute to set a rotation.

Star shape made out of transformed polygons. On the right we can see the coordianates of one arm of the star

<svg width="200" height="200" viewBox="-100 -100 200 200">      
  <g transform="translate(0 5)">
    <g>
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(-72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(-144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
  g>
svg>

In this example, each wing consists of two polygons. They need to be rotated the same way, so we can group them with a g tag and rotate them together.

You can think of the g tag as the div tag in HTML. On its own, it does not represent anything. But it can contain other elements and attributes defined on the group tag apply to its children.

Groups can be embedded. With the outer group we translate the whole star downwards by 5 units.

How to Make a Snowflake with SVG

Grouping elements is a nice trick, but we had to repeat the same code for each wing five times.

Instead of repeating the same code over and over again, we can also create a definition for a shape and reuse it by id. Here we define a branch of a snowflake then use it six times with different rotations.

Snowflake made out of reused image elements. On the right we can see the coordainates use for an arm

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path
      id="branch"
      d="
        M 0 0 L 0 -90
        M 0 -20 L 20 -34
        M 0 -20 L -20 -34
        M 0 -40 L 20 -54
        M 0 -40 L -20 -54
        M 0 -60 L 20 -74
        M 0 -60 L -20 -74"
      stroke="#E5C39C"
      stroke-width="5"
    />
  defs>

  <use href="#branch" />
  <use href="#branch" transform="rotate(60)" />
  <use href="#branch" transform="rotate(120)" />
  <use href="#branch" transform="rotate(180)" />
  <use href="#branch" transform="rotate(240)" />
  <use href="#branch" transform="rotate(300)" />
svg>

The branch is defined as a path. The path is the most powerful SVG tag. We can define pretty much anything with paths, and if you open any SVG file, you will see mostly paths.

The shape of the path is defined by the d attribute. Here we define several drawing commands. A command always starts with a letter defining the command type and ends with a coordinate.

Here we only have the two most simple commands, move to (M) and line to (L). The move to command moves the cursor to a point without drawing a line and the line to command draws a straight line from the previous point.

A command always continues the previous command, so when we draw a line we only define the endpoint. The starting point will be the previous command’s endpoint.

This path is a bit unusual because there are several move to commands in it to draw the main branch and each side branch with the same path.

How to Draw a Forest with SVG

Rotation is not the only way we can generate images from simple shapes. In this example, we define a tree shape and then place it at various positions in different sizes to draw a forest.

Forest made out of reused image elements

First, we create a background out of a rectangle and a circle. Then we define a tree shape from a simple polygon and a line.

Then we can reuse it in a similar way as we did in the snowflake example. We move it to the defs section, wrap it into a group element, set an ID for it, and then reuse it with the use element.

Here we also position the reused elements by setting an x and y coordinate and to add some perspective to the image we use the scale transformation.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <g id="tree">
      <polygon points="-10,0 10,0 0 -50" fill="#38755b" />
      <line x1="0" y1="0" x2="0" y2="10" stroke="#778074" stroke-width="2" />
    g>
  defs>

  <rect x="-100" y="-100" width="200" height="200" fill="#F1DBC3" />
  <circle cx="0" cy="380" r="350" fill="#F8F4E8" />

  <use href="#tree" x="-30" y="25" transform="scale(2)" />
  <use href="#tree" x="-20" y="40" transform="scale(1.2)" />
  <use href="#tree" x="40" y="40" />
  <use href="#tree" x="50" y="30" transform="scale(1.5)" />
svg>

How to Make a Curvy Tree with SVG

The path element becomes really powerful when we start using curves. One of them is the quadratic Bézier curve that not only defines an endpoint for a segment but also has a control point. The control point is an invisible coordinate towards which the line is bending, but not touching it.

Christmas Tree made using Quadratic Bézier curves

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <path
    d="
      M 0 -80
      Q 5 -75 0 -70
      Q -10 -65 0 -60
      Q 15 -55 0 -50
      Q -20 -45 0 -40
      Q 25 -35 0 -30
      Q -30 -25 0 -20
      Q 35 -15 0 -10
      Q -40 -5 0 0
      Q 45 5 0 10
      Q -50 15 0 20
      Q 55 25 0 30
      Q -60 35 0 40
      Q 65 45 0 50
      Q -70 55 0 60
      Q 75 65 0 70
      Q -80 75 0 80
      Q 85 85 0 90
      Q -90 95 0 100
      Q 95 105 0 110
      Q -100 115 0 120
      L 0 140
      L 20 140
      L -20 140"
    fill="none"
    stroke="#0C5C4C"
    stroke-width="5"
  />
svg>

Here we have a series of quadratic Béziers curves (Q) where the control points get further and further away from the center of the tree as the path goes down.

How to Make a Bell with SVG

While the quadratic bezier curve (Q) is great when we want to bend a line, often it’s not flexible enough.

With a cubic Bezier (C), we not only one have one control point but two. The first control point sets the initial direction of the curve and the second one defines from which direction the curve should arrive to its endpoint.

If these directions match the directions of the line before and the line after the curve, then we have a smooth transition between the path segments.

With Cubic Bézier curves we can set two control points

The next example uses both quadratic and cubic Béziers to form a bell. Here the bottom of this bell is defined with straight lines. Then a quadratic Béziers starts the bell cloak. Next a cubic Bezier smoothly continues the quadratic bezier as it forms the top of the bell. Then we reach the bottom part with another quadratic bezier.

Bell example made out of different curves and straight lines

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <g stroke="black" stroke-width="2">
    <circle cx="0" cy="-45" r="7" fill="#4F6D7A" />
    <circle cx="0" cy="50" r="10" fill="#F79257" />
    <path
      d="
        M -50 40
        L -50 50
        L 50 50
        L 50 40
        Q 40 40 40 10
        C 40 -60 -40 -60 -40 10   
        Q -40 40 -50 40"
      fill="#FDEA96"
    />
 g>
svg>

How to Write Text Along a Path

Drawing shapes is not the only use case for paths. We can also use them to render text along an invisible path. We can define a path in the definitions section and use it in a textPath element to make the text go around the circle. Here we use arc again, but you can use any other path and the text will follow the stroke.

With the text-path property we can make a text follow a path

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path id="text-arc" d="M 0, 50 A 50 50 0 1 1 1,50" />
  defs>

  <text
    fill="#0c5c4c"
    font-family="Tahoma"
    font-size="0.77em"
    font-weight="bold"
  >
    <textPath href="#text-arc">
      Happy Holidays! Happy Holidays! Happy Holidays!
    textPath>
  text>
svg>

How to Animate an SVG with CSS

To continue our forest example, we can add a snowing effect with a similar animation. We can animate the transform property from CSS.

Animation effect made with SVG and CSS

We extend our forest example with simple reusable snowflakes and add a bunch of them to the scene with various CSS classes to set some variation in speed and appearance. Then we add animation in CSS to make them look like falling snow. It’s a bit glitchy and not the most sophisticated animation, but you get the idea.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <g id="tree">
      <polygon points="-10,0 10,0 0 -50" fill="#38755b" />
      <line x2="0" y2="10" stroke="#778074" stroke-width="2" />
    g>
    <circle id="big" cx="0" cy="0" r="5" fill="white" />
    <circle id="small" cx="0" cy="0" r="3" fill="white" />
  defs>

  <rect x="-100" y="-100" width="200" height="200" fill="#F1DBC3" />
  <circle cx="0" cy="380" r="350" fill="#F8F4E8" />

  <use href="#tree" x="-30" y="25" transform="scale(2)" />
  <use href="#tree" x="-20" y="40" transform="scale(1.2)" />
  <use href="#tree" x="40" y="40" />
  <use href="#tree" x="50" y="30" transform="scale(1.5)" />

  <use href="#big" x="0" y="0" class="flake fast" />
  <use href="#big" x="-50" y="-20" class="flake fast opaque" />
  <use href="#big" x="30" y="-40" class="flake fast" />
  <use href="#big" x="50" y="-20" class="flake fast opaque" />
  <use href="#big" x="30" y="50" class="flake slow" />
  <use href="#big" x="-70" y="-80" class="flake slow opaque" />
  <use href="#big" x="30" y="50" class="flake slow" />
  <use href="#big" x="90" y="-80" class="flake slow opaque" />
  <use href="#small" x="10" y="-50" class="flake slow" />
  <use href="#small" x="-50" y="-60" class="flake slow opaque" />
  <use href="#small" x="30" y="70" class="flake slow" />
  <use href="#small" x="10" y="-80" class="flake slow opaque" />
svg>

.flake {
  animation-duration: inherit;
  animation-name: snowing;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.flake.opaque {
  opacity: 0.7;
}

.flake.slow {
  animation-duration: 5s;
}

.flake.fast {
  animation-duration: 3s;
}

@keyframes snowing {
  from {
    transform: translate(0, -100px);
  }
  to {
    transform: translate(0, 100px);
  }
}

How to Make a Clock That Shows the Actual Time

SVG elements can be manipulated from JavaScript the same way as any other HTML tag.

Clock example made with SVG and JavaScript

In this example, we are using a short code snipped to show the actual time on a clock. We access the hour and minute hands in JavaScript with getElementById then set their transform attribute with a rotation that reflects the current time. Below you see the actual SVG showing the current time.

For a more detailed tutorial on how to make a clock with SVG and JavaScript, check out How to Code an Animated Watch.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <rect x="-100" y="-100" width="200" height="200" fill="#CD803D" />

  <circle r="55" stroke="#FCCE7B" stroke-width="10" fill="white" />

  <circle
    r="45"
    stroke="#B6705F"
    stroke-width="6"
    stroke-dasharray="6 17.56194490192345"
    stroke-dashoffset="3"
    fill="none"
  />

  <g stroke="#5f4c6c" stroke-linecap="round">
    <line id="hours" y2="-20" stroke-width="8" />
    <line id="minutes" y2="-35" stroke-width="6" />
  g>
svg>

window.addEventListener("DOMContentLoaded", () => {
  const hoursElement = document.getElementById("hours");
  const minutesElement = document.getElementById("minutes");

  const hour = new Date().getHours() % 12;
  const minute = new Date().getMinutes();

  hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
  minutesElement.setAttribute("transform", `rotate(${(360 / 60) * minute})`);
});

How to make a Data-driven Diagram with SVG and React

SVGs also work well with frontend libraries. Here’s an example of a React component that generates a data-driven diagram.

In this example we have two things. We are generating a list of rectangles to create a column diagram based on some arbitrary data. And we also generate a series of coordinates for a polyline.

We can use JavaScript to generate a Data-Driven Diagram

For simple use cases, you can code your own diagram like this. But if you need more complex diagrams then check out the D3 library. The D3 library uses SVG under to hood to create all sorts of diagrams.

function Diagram() {
  const dataPoints = [3, 4, 7, 5, 3, 6];
  const sineWave = Array.from({ length: 115 })
    .map((item, index) => `${index - 55},${Math.sin(index / 20) * 20 + 10}`)
    .join(" ");

  return (
    <svg width="200" height="200" viewBox="-100 -100 200 200">
      {dataPoints.map((dataPoint, index) => (
        <rect
          key={index}
          x={index * 20 - 55}
          y={50 - dataPoint * 10}
          width="15"
          height={dataPoint * 10}
          fill="#CD803D"
        />
      ))}

      <polyline points={sineWave} fill="none" stroke="black" stroke-width="5" />
    svg>
  );
}

Next Steps – Making SVGs Interactive with JavaScript

Under the hood, SVGs can be quite confusing at first. Lots of coordinates, letters and strange parameters. Once you understand their foundations, though, you can use them to your advantage and start coding images.

And we are just getting started. Adding JavaScript to the mix will introduce a whole new level.

For more examples check out svg-tutorial.com or my YouTube tutorial with 12 more examples on how to use SVGs for your next project!

Embedded content

How to Use the CSS Box Model and Style SVG Images

freeCodeCamp — Mon, 03 Apr 2023 17:29:13 +0000

By Njoku Samson Ebere

Every programmer who wants to write clean CSS and build great user interfaces should understand the CSS Box Model.

Before I understood the foundations of CSS, I would often write unnecessary styles for margins and padding.

CSS Box Model forms the basis for styling any element on a website. So understanding the concept will help you target HTML elements and write fewer lines of code that are clean and easy to maintain.

This article will teach how to target the properties of any HTML element and apply the right style. You will also learn what SVG images are and how to style them.

What is the CSS Box Model?

The CSS Box Model is the relationship between an HTML element and the spaces around it – its padding, border, and margin.

Padding is the space that surrounds a given HTML element
The border is the space that surrounds the padding
Margin is the space that surrounds the border

In other words, the padding surrounds the HTML element, the border encloses the padding, and the margin houses the border. The image below illustrates it all:

CSS Box Model Illustration

Now, enough of the theory – let's translate the diagram into code.

Let's Code

You can get your starter code here by cloning the repo.

Otherwise you'll need to create a new HTML file and copy the following code into the file (if you don't want to clone the repo or don't know how to use Git).


<html>
  <head>
    <title>Box Model Tutorialtitle>
    <style>
    style>
  head>
  <body>
    <img src="https://www.w3schools.com/howto/img_avatar2.png" />
  body>
html>

The code above is a basic HTML boiler plate. It contains a title and an img element. I got the image from w3schools.

Load the file in a browser, and you should get the following result:

Preview with margin

Notice that the image came with a default space around it. That is the default margin. Let's remove it.

Enter the following CSS into the style tag of your HTML file:

   body{
     margin: 0;
   }

This code removes all the margins around the image. Notice that there is no longer a space between the edges of the browser and the content in the image below.

Preview without margin

Now let's get down to the main business.

Add a border with the following code:

  img{
    border: 5px solid red;
  }

This code adds a red border around the content. The border's width is 5 pixels.

Preview with border

And add some padding with the code below:

  img{
    border: 5px solid red;
    padding: 20px;
  }

The code above now creates a space between the content and the border. That space is called padding. It is 20 pixels wide.

Preview with padding

Type the following code to add a margin:

  img{
    border: 5px solid red;
    padding: 20px;
    margin: 20px;
  }

You will recall that we removed the margin when we set the margin to 0px. The code above now adds our custom margin that is 20 pixels wide. It creates a space between the red border and the browser edges.

Preview with border

You can get the code for this section here or copy the code below:


<html>
  <head>
    <title>Box Model Tutorialtitle>
    <style>
        body{
            margin: 0;
        }

        img{
            border: 5px solid red;
            padding: 20px;
            margin: 20px;
        }
    style>
  head>
  <body>
    <img src="https://www.w3schools.com/howto/img_avatar2.png" />
  body>
html>

The project is live here – https://eberegit.github.io/box-model-tutorial/.

YESSSS! We did it. We made it!

How to Style SVG Images

Now that you understand how the CSS box model works, let's try styling an important HTML element – an SVG. It is a bit different from other elements but the principles are the same.

SVG images are lightweight resources that can help speed up your applications. This section will help you look at SVGs from a friendly perspective and build better applications.

SVG files consist of elements such as the and elements. You do not have to memorize them. You can inspect the SVG image in your browser to see the different parts and how you can target the element you want.

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

You can download the SVG image for this tutorial here. And you can get the starter project here.

In the starter project, I have gone ahead and:

Added the downloaded SVG file to the project directory.
Created an index.html file.
Copied and pasted the SVG code from the SVG file into the index.html file.
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:

Starter Project

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

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

      ...

Now, your output should be like this:

The image now takes up the whole page and it is responsive too

Looking sharp, let's move on!

How to Change the Border Color

The SVG image we are using in this tutorial contains a element, element, and 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:

Stroke Added

Notice that we changed the path's border color to red with a reduced width. Then we changed the circle's border color to dark blue. How Awesome!

How to Change the Background

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

Each path and circle has a unique id.

Let's add the following code to our styles.css file to give the path and circle different background colors 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 volleyball player:

Fill Added

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

How to Add a Hover Attribute

To add a hover property, add the following code 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:

Hover added

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

How to Add Achor Tags

Now we're going to wrap each path and circle with an anchor tag.

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

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


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

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

Final Result

Apart from changing the stroke width, we can see labels, and each part of the image is linked to a different website.

The xlink:title and xlink:href attributes add a label and URL individually.

All codes for this section is here. The project is live here

YOU ROCK!

Conclusion

CSS gets a bit easier when you understand the basics. This article aimed to teach them to you.

You have learned the difference between margin and padding. You also saw how they are related. Once you understand this, moving elements around the page becomes easy. In all, use padding to move an element within its container or axis and use a margin to create space between elements.

I enjoyed dissecting that SVG image with you. You now know how to work with any SVG image that comes your way. They might differ, but the principle is understanding how their elements are named. Then you can target those elements in your styling.

Try out more SVG images and see how they come out.

How to Make a Clickable SVG Map With HTML and CSS

Rufai Mustapha — Thu, 09 Mar 2023 19:43:56 +0000

SVG, or Scalable Vector Graphics, is a versatile image format that you can use in a wide range of applications, from web design to print media and data visualization.

The scalability, small file size, and accessibility of SVG images make this format a popular choice among designers and developers.

Maps are a powerful tool for data visualization, providing a visual representation of data that can help viewers understand patterns and relationships that may not be evident in other types of visualizations.

In this article, you will learn how to make interactive maps using HTML and CSS. These maps will remain light-weight because we'll be using SVGs.

If you have basic knowledge of HTML and CSS you'll be able to understand this tutorial.

Here's what we'll cover:

I. Introduction

What Is an SVG Map?
What Are the Benefits of an SVG Map?

II. How to Set Up the HTML File

How to Create the Basic HTML Structure
How to Import the SVG Map File
How to Set Up the div Container for the Map

III. How to Add Interactivity with CSS

How to Style the SVG Map
How to Add Hover Effects
How to Add Click Effects

IV. How to Add Functionality

How to Link Areas of the Map to External Webpages

V. Conclusion

Recap of Steps to Make a Clickable SVG Map
Final Thoughts and Suggestions for Further Customization

What Is an SVG Map?

SVG maps are vector-based, meaning that the map elements are defined by mathematical equations rather than pixels. This allows you to scale them up or down without losing quality.

What Are the Benefits of an SVG Map?

Some benefits of using SVG maps include:

Scalability: SVG maps can be scaled up or down without losing quality, which makes them ideal for use in responsive web design or for printing at different sizes.
Customizability: SVG maps can be easily customized to suit specific needs, such as changing colors, adding labels, or modifying the size and shape of map elements.
Interactivity: SVG maps can be made interactive through the use of JavaScript and CSS, allowing viewers to hover over or click on specific elements to see more detailed information.
Accessibility: SVG maps can be read by assistive technologies such as screen readers, making them more accessible to people with disabilities.
Cross-platform compatibility: SVG maps can be displayed on a wide range of devices and browsers, making them a versatile choice for web-based applications.

Example Of SVG Maps In the Wild

Stears and The BBC used SVG Maps to visualize election data. Users can click on a region to see the distribution of ballots cast. See here for more info.

What Are We Building?

In this tutorial, we are building Tour Afrique, an interactive map of Africa.

It has 2 features:

Users can hover to see the name of a country.
Users can click on a country to see more information on Wikipedia.

How to Build Our Interactive Map of Africa

1. Get the SVG Map of Africa

You can create an SVG map using vector graphics software such as Adobe Illustrator or Inkscape, or with code using libraries such as D3.js or Leaflet.

You can also download SVG maps from Wikipedia using a creative-commons license. Click here for the map we'll use in this tutorial.

2. Create the basic HTML structure

We need a basic HTML structure, which will look like this:

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>Documenttitle>
head>
<body>
    <span> Tour Afrique span>
body>
html>

This HTML will give us the following result so far:

Document Tour Afrique

3. Import the SVG map file

To import an SVG map file to an HTML document, you can use the , , or tag.

We'll do so using the tag:

First, open your HTML file in a text editor. Then add the downloaded SVG map to the section where you want it to appear:

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>Documenttitle>
  head>
  <body>
    <section>
      <svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      >
        ... all the country paths are here ...
      svg>
    section>
  body>
html>

Document

image/svg+xml 1000 km 1000 km 1000 mi 1000 mi 0 0 0 0

4. Nest each path in an anchor tag

There are several path tags in our SVG. Each of them describes a country. We want to hover on each country to see the name of the country. And on clicking that country, we should be taken to its Wikipedia page.

<a xlink:title="Mali" xlink:href="https://en.wikipedia.org/wiki/Mali" target="_blank" id="malic">
    <path
          inkscape:connector-curvature="0"
          d="..."
          id="Mali"
          />
a>

In the code above, we've nested the path into an anchor tag. The anchor tag has the attribute title which shows the country name on-hover. Also, it has href which allows us to visit the Wikipedia page on clicking that link. target="_blank" makes sure that the link opens in a new tab.

You may notice the xlink prefix on the attributes. This supports earlier browser versions. You can use the deprecated xlink:href attribute as a fallback in addition to the href attribute. See more info here.

5. How to style the SVG map

We can style our SVG map using CSS.

The common attributes in SVG path styles are fill, stroke, and stroke-width. For example, if you draw a rectangular path, then you can use fill to make it blue.

"10" width="500" height="100">

Now, we can give select countries different colors. Also, we should have some sort of visual feedback when hovering over a country.

 <style>
      #mapsection {
        width: 50%;
        height: auto;
        fill: #ccc;
        stroke: #333;
        stroke-width: 2;
      }
      #mali {
        fill: brown;
      }

      #Benin {
        fill: #00baba;
      }

      #Nigeria {
        fill: yellow;
      }

      #Zimbabwe {
        fill: brown;
      }

      #Zambia {
        fill: green;
      }

      #Somalia {
        fill: darkseagreen;
      }

      #Mali {
        fill: gray;
      }

      path {
        fill: #1da1f2;
      }
      path:hover {
        fill: purple;
        stroke: red;
        stroke-width: 3px;
        transition: fill 0.4s;
      }
    style>

The above block of CSS code styles elements on our map. Here is an explanation of each rule:

#mapsection: This targets SVG elements with the ID mapsection. It sets the width to 50%, height to auto, and stroke properties for the element.
#mali, #Benin, #Nigeria, #Zimbabwe, #Zambia, and #Somalia: These target specific path elements with IDs corresponding to their country names. They set the fill color for each country.
path: This targets all path elements on the webpage. It sets the fill color to #1da1f2.
path:hover: This targets all path elements on the webpage when they are hovered over with the mouse. It sets the fill color to purple, stroke color to red, and stroke width to 3px. It also sets a transition effect for the fill color change.

Document 1000 km 1000 km 1000 mi 1000 mi 0 0 0 0

Try clicking on each country. The anchor tag will open a new page and show more information.

Click here to see the live demo.

Find the complete code here.

Conclusion

This tutorial explained how to create a clickable SVG map by setting up the HTML file, adding interactivity with CSS (including hover and click effects), and adding functionality by linking areas of the map to external web pages. We also discussed the benefits of using SVG maps.

References

There are plenty of resources available to learn more about SVGs. Here are some resources you can look up:

MDN Web Docs - SVG: MDN Web Docs is a great resource for learning about web development, including SVG. The SVG section covers everything from basic concepts to advanced topics.
SVG on CSS-Tricks: CSS-Tricks is a popular blog about web development and design. The SVG section covers a range of topics, including how to create SVG graphics, animation, and interactivity.
Xutini Tutorials: the fun way to learn web digital skills.
SVG Pocket Guide: SVG Pocket Guide is a book by Joni Trythall that covers the basics of SVG, including shapes, paths, text, and filters. It's a concise guide that's easy to read and follow.
SVG Animations: SVG Animations is a book by Sarah Drasner that covers the basics of SVG animations, including how to create and control animations using CSS and JavaScript.

How to Create Grainy CSS Backgrounds Using SVG Filters

Eamonn Cottrell — Thu, 16 Feb 2023 16:00:47 +0000

In this article we're going to create more interesting website backgrounds by using grainy effects.

There's a full video walkthrough at the bottom of the article 👇, as well as a 15 second video in the middle for those of you who just want a quick soundbite.

We'll cover this in two ways:

Using a PNG image with transparency like on the site below.
Using our own SVG image & code

How to Create a Grainy Background Using PNG Grainy Image

First, the PNG approach.

I came across this background the other day on Arc's site, and I was intrigued. I'd seen grainy type illustrations and colors before, and I'd even made a few in Illustrator. But it made me wonder how to produce the same effect as a background on a website.

Screenshot of grainy background from https://arc.net/

Inspecting this showed me that they used two things: a background: var(--colors-primary3) and a background-image: url(noise.png);:

The .noise.png file was simply a grainy image with transparency so the solid color from the CSS background could come through:

Screenshot of the noise.png image

How to Recreate the PNG Noise

Let's download the noise.png file. Then create an HTML document. We'll add a section to display it:

<section class="container noise">
    <h1>Noise with PNGh1>
section>

In our CSS, we'll add some basic styling for the container:

.container{
    margin: 0 auto;
    display: flex;
    width: 100%;
    min-height: 33vh;
    justify-content: center;
    align-items: center;
}

Then, for our .noise class:

.noise{
    background: rgb(182, 34, 58);
    background-image: url(/assets/noise.png);
}

And voilà! We've got the same effect:

Pretty clever, but I dug further and found how to both create the noisy texture itself as well as generate it inline in our code.

What are SVGs? With Video Overview

First, a 15 second video summary of the inline part (full 10 min walkthrough is at the end of the article):

SVGs are Scalable Vector Graphics.

They are handy because they can scale up or down without losing quality. And they are versatile because you can mark them up with code just like you can use CSS to make stylistic changes to your HTML.

In fact, you can even hard code an SVG straight into your HTML or CSS.

Below I'll show you three things:

How to create an SVG file to reference in similar fashion to the PNG above.
How to use an SVG file to create a grainy background
How to code the grainy SVG straight into CSS to apply the grainy-ness to elements in our HTML.

How to Create an SVG

The Grainy Gradient Playground has been very helpful during this research. It allows for the quick creation of these SVGs.

Let's look at the code for the SVG they're using:


<svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='1' 
      numOctaves='3' 
      stitchTiles='stitch'/>
  filter>

  <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
svg>

The first line sets up the SVG with an initial viewBox.

<svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'>

Then, the filter is setup and given an id. We use the feTurbulence filter to create the grainy effect. MDN, as always, has more info on the details of feTurbulence.

'fractalNoise' 
      baseFrequency='1' 
      numOctaves='3' 
      stitchTiles='stitch'/>

Then we're defining the shape (a rectangle), the size (100%) and applying the feTurbulence filter to it:

'100%' height='100%' filter='url(#noiseFilter)'/>

If we throw this in our HTML now, it'll display as plain noise:

SVG feTurbulence noise image

How to Use an SVG as a Background-Image

Because SVGs are essentially just code, we can create a noise.svg file in our project, and copy in the contents of the SVG example.

We'll create another div for this method in our HTML:

<section class="container noise2">
    <h1>Noise using SVG Fileh1>
section>

I changed the baseFrequency='1' in the SVG file for appearance's sake, and then added the following to our CSS:

.noise2{
    background: rgb(219, 255, 219);
    background-image: url(/assets/noise.svg);
}

This gives us a similar result for our green background section:

SVG Filter Inline CSS

Finally, we have the option to forego the separate noise file altogether by putting the SVG inline.

In the Gradient Playground, you'll see the option for this in the third CSS+Gradient+CSSFilter box, and there's a toggle switch to produce the inline CSS directly:

Screenshot from Grainy Gradient Playground

It uses gradients going from opaque to transparent to allow for the noise to show through. You can achieve the same effect on a solid color background by repeating some of our code from above.

We'll create a third div for this example:

<section class="container noise3">
    <h1>Noise with SVG Inlineh1>
section>

Then, we can convert the SVG into usable format in our CSS by using a URL-encoder like this one. (You can also copy from the Grainy Gradient Playground box where the same code is generated).

Screenshot of URL-encoder for SVG code

And just like that, we have within the URL parenthesis the code that we can use for our background-image. So the CSS for our div looks like this (I modified the baseFrequency more to get a more fine-grained look:

.noise3{
    background:rgb(68,0,255);
    background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

The parameters are easily editable on all these SVGs and filters to produce different grainy effects. I hope this has been a helpful tutorial for you to easily spice up your backgrounds!

Video Walkthrough

Here's the video walkthrough of all the above:

Will you consider subscribing to my YouTube channel? I'm making more content like this, and having a blast!

You can find me on LinkedIn too 👋.

You're awesome; have a great one!

How to Import SVGs in a React and Vite app

Israel Oyetunji — Fri, 01 Jul 2022 22:15:02 +0000

Are you having difficulties importing SVGs into your React app? This is a problem that many developers face, especially when setting up a new React app with a module bundler.

In this article, I will share with you the different ways of importing SVGs in React, as well as how the process works under the hood.

Let's get started.

What Is an SVG?

SVG, short for Scalable Vector Graphic, is an image format used for rendering two-dimensional (2D) graphics on the internet.

The SVG format stores images as vectors which are graphics made up of points, lines, and curves based on geometry and mathematical formulas.

Because they are based on numbers and values rather than a grid of pixels like raster images(.png and.jpg), they do not lose quality when zoomed or resized.

They're also great for creating responsive websites that need to look good and function well across a variety of screen sizes.

Overall, SVGs are great as they are scalable, lightweight, customizable, and can be animated using CSS when used inline.

How to Import SVGs in React Apps

Let's go through some of the most used methods when importing SVGs into React Apps.

1. How to Import SVGs Using the Image Tag

Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA (Create React App), you can import the SVG file in the image source attribute, as it supports it off the bat.

import YourSvg from "/path/to/image.svg";

const App = () => {
  return (
    <div className="App">
      <img src={YourSvg} alt="Your SVG" />
    div>
  );
};
export default App;

But if you are not using CRA, you have to set up a file loader system in the bundler you're using (Webpack, Parcel, Rollup, and so on).

Webpack, for instance, has a loader for handling SVGs called file-loader.

To install the file-loader, add the following command:

npm install file-loader --save-dev

Next, add the loader to the webpack.config.js file:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
};

Now, you can import your SVG files and use them:

import YourSvg from "/path/to/image.svg";

const App = () => {
  return (
    <div className="App">
      <img src={YourSvg} alt="Your SVG" />
    div>
  );
};
export default App;

NOTE: While this approach is straightforward, it does have one disadvantage: unlike the other methods for importing, you cannot style the SVG imported in a img element. As a result, it will be suitable for an SVG that does not need customization, like logos.

2. How to Import SVGs by Adding them Directly as JSX

JSX supports the svg tag, so we can copy-paste the SVG directly into our React components. This method is straightforward as it helps you take full advantage of SVGs without using a bundler.

The approach is possible because SVGs are in XML format, just like HTML. So, we can convert it to JSX syntax. You can also use a compiler instead of manually converting.

const App = () => {
  return (
    <div className="App">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="ionicon"
        viewBox="0 0 512 512"
      >
        <path
          d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={32}
        />
      svg>
    div>
  );
};
export default App;

The advantage of including SVGs inline is that we have access to their different properties, which allows us to style and customize them as we see fit.

One thing to keep in mind is that if your SVG file size is large, your code may become complex, reducing readability and productivity. If this is the case, use a png or jpeg file..

3. How to Import SVGs as React Components

If you use CRA, there's a chance you have imported and used SVGs directly as a React component at one point in time.

This method, which is possible with the help of a file loader, works by loading the image alongside the HTML rather than as a separate file.

import { ReactComponent as Logo } from "./logo.svg";

const App = () => {
  return (
    <div className="App">
      <Logo />
    div>
  );
};

export default App;

4. How to Convert SVGs to React Components

This approach is similar to the one previously mentioned. Here, we can convert an SVG to a React component by returning it from inside a class or functional component.

To do this, open up the SVG file in a text editor, and copy-paste the code into a new component:

export const ArrowUndo = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="ionicon"
      viewBox="0 0 512 512"
    >
      <path d="M245.09 327.74v-37.32c57.07 0 84.51 13.47 108.58 38.68 5.4 5.65 15 1.32 14.29-6.43-5.45-61.45-34.14-117.09-122.87-117.09v-37.32a8.32 8.32 0 00-14.05-6L146.58 242a8.2 8.2 0 000 11.94L231 333.71a8.32 8.32 0 0014.09-5.97z" />
      <path
        d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z"
        fill="none"
        stroke="currentColor"
        strokeMiterlimit={10}
        strokeWidth={32}
      />
    svg>
  );
};

Now, you can import and render the SVG component in another component like this:

import { ArrowUndo } from "./path/to/ArrowUndo.jsx";

export const Button = () => {
  return (
    <button>
      <ArrowUndo />
    button>
  );
};

Again, this approach is only possible if your React app has a loader like SVGR's Webpack loader included.

5. How to Import SVGs Using SVGR

SVGR is a tool that takes raw SVG files and transforms them into React components. It also has a large ecosystem with support for Create React App, Gatsby, Parcel, Rollup, and other technologies.

So, how do we set it up?

First, install the package by running the code below:

# with npm
npm install --save-dev @svgr/webpack

# with yarn
yarn add --dev @svgr/webpack

Next, update your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
};

Now, you can import an SVG file as a React component:

import Logo from "./logo.svg";

const App = () => {
  return (
    <div className="App">
      <Logo />
    div>
  );
};

export default App;

6. How to Import SVGs Using the Vite Plugin for SVGR

vite-plugin-svgr is a plugin for Vite that uses svgr under the hood to transform SVGs into React components.

You can install it by running the following command:

# with npm
npm i vite-plugin-svgr

# with yarn
yarn add vite-plugin-svgr

Next, add the plugin inside your app's vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svgr(), react()],
});

Now, you can import the SVG files as React components:

import { ReactComponent as Logo } from "./logo.svg";

Conclusion

And it's a wrap! In this article, we've covered how to import SVGs in a React App using custom configuration from specific packages, how importing React components works, and how to use them in a Vite setup.

When working with Vite, I use the vite svgr plugin, which works flawlessly. You can also experiment with the other ways discussed in this article.

I hope you found this article insightful. If you do have any questions, feel free to send a message on Twitter or LinkedIn.

Thanks for reading, and happy coding!

Before you go, check out these resources:

What is an SVG File?

Kolade Chris — Wed, 01 Jun 2022 16:05:04 +0000

SVG stands for scalable vector graphics. It's a web-friendly vector-based file format used to render two-dimensional images on the internet.

You can identify SVG files by their extension – .svg.

Unlike other popular image formats like PNG, JPEG, and JPG – which store image information in form of pixels because they are raster-based formats – SVGs store graphics information as a set of points and lines.

This means no matter how SVG files are reworked, zoomed, or resized, they don’t become blurred and pixelated like PNG, JPG, and other raster images.

This article will show you the possibilities of SVG image files and how you can make one for yourself by coding it.

How to Make an SVG File
- How to Make an SVG with Image Editing Programs
- How to Make an SVG with XML
What is an SVG File Used for?
How to Open an SVG File
How do I Convert an SVG File to an Image?
Conclusion

How to Make an SVG File

How to Make an SVG with Image Editing Programs

You can make an SVG file with image editing software like Adobe Illustrator, CorelDraw, Adobe Photoshop, Microsoft Visio, and GIMP.

With these programs, your creativity is your limit when it comes to the SVGs you can draw.

It depends on how knowledgeable and experienced you are with the programs.

In addition, if you create an illustration and drawings with Google Docs, you can export them to SVG.

How to Make an SVG with XML

If you don’t know how to use the image editing programs listed above but you can code, you can code up an SVG with XML.

To code an SVG, create a file with the .svg extension:

Step 1: Define your SVG opening and closing tags

<svg>
    
svg>

Step 2: Define the version and xmlns attributes inside the opening tag and set both to 1.1 and "http://www.w3.org/2000/svg" respectively.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

svg>

Step 3: Specify the shape you want to draw in a self-closing tag. For example, for rectangle.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect />
svg>

Step 4: Specify the width and height you want:

 width="200" height="100"

Step 5: Define the color with which you want to fill the shape with the fill attribute:

fill="#2ecc71"

The code now looks as shown in the snippet below:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" />
svg>

And at the end, this is what shows in the browser:

You can also define border-radius on the x and y axis with the rx and ry attributes:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" rx="4" ry="4" />
svg>

After drawing the SVG, you can then use it as the value for the source (src) of an image:

<img src="svgdraw.svg" alt="A rectangle made with SVG" />

If you want, you can embed the SVG straight into your HTML code:

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <rect width="200" height="100" fill="#2ecc71" />
    svg>
body>

What is an SVG File Used for?

Because SVG files remain the same for life, website icons and logos are usually made with them.

An excellent advantage of SVG is that the text in them can be read by search engines like Google, so SVG files are used for making infographics and illustrations.

How to Open an SVG File

Modern browsers like Google Chrome, Edge, Safari, and Firefox have built-in functionalities that make them open SVG files for you.

You can also open SVG files in specialized editing software you can use to make them. Again, examples are Adobe Illustrator, CorelDraw, Adobe Photoshop, Microsoft Visio, and GIMP.

If you want to edit SVG files, you can open them with a Code Editor like VS Code, Atom, and Sublime Text then make your edits.

How do I Convert an SVG File to an Image?

If you want to convert an SVG to other image formats like PNG, and JPG, you can use image editing programs like Adobe Photoshop.

You can also use an online tool called Convertio.

All you need to do is to upload your SVG, then select the format you want to convert it to.

Conclusion

There are a lot of reasons why you should be using SVG.

My favorite of all those reasons is that search engines can read the text on SVG files. This is because SVG files are written in pure XML – the markup language for transmitting digital data.

If Google and other search engines find relevant keywords in the SVG files, it can lead to a massive boost in SEO.

Thank you for reading.

How to Create Reusable SVG Icon React Components

freeCodeCamp — Tue, 26 Apr 2022 18:22:02 +0000

By Dillion Megida

We use icons when building frontend applications all the time – for indications, pointers, and so on. Here's how to create a reusable React component for icons.

When it comes to icons, you can use PNG or SVG images. PNGs come with a fixed color but allow dimension changes (like a regular image). In some cases this alters the image's quality.

SVGs, on the other hand, have better quality regardless of size and the colors are customizable even after downloading.

But you may agree with me that SVGs can be a pain when it comes to customizability.

In this article, I will show you how I currently go about creating customizable SVG icons as React components.

How to Download the Icons

I usually download the icons I use from Remixicon. I haven't tried out other icon libraries yet, so the steps in this article may or may not apply if you use a different library.

That being said, I have worked with a client in the past who created custom icons on Figma. I applied the solution shared in this step, and it also worked for most icons. So follow along even if you don't use Remixicon :)

On Remixicon, I select an icon of my choice, select size 18px, and select Copy SVG.

I leave the color as black. If you choose a different color, it may conflict with the specified colors you provide later. So better to leave it black, which is the default color of SVGs.

How to Create the React Component

Then I paste the SVG into a file, say, home-line.js with the following code:

import React from 'react'

export default function HomeLine() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
      <path fill="none" d="M0 0h24v24H0z"/>
      <path d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z"/>
    svg>
  )
}

As it is, it uses the default color and size that comes from Remixicon. I'll add two props to modify this component: size and color.

The svg element has four properties: xmlns, viewBox, width and height. I'll use the size prop to modify the value of width and height. Then I'll add an extra property, fill, which I will use for the color prop.

Here is the updated component:

import React from 'react'

export default function HomeLine({
  size = 18, // or any default size of your choice
  color = "black" // or any color of your choice
}) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={size} // added size here
      height={size} // added size here
      fill={color} // added color here
    >
      <path fill="none" d="M0 0h24v24H0z"/>
      <path d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z"/>
    svg>
  )
}

I leave the viewBox as it is. And now I can use the component like this:

100} color="purple" />
<HomeLine size={50} color="red" />
<HomeLine size={30} color="green" />

If you use a non-square-shaped icon, you will have to specifically provide the width and height prop to change both attributes accordingly.

Wrap Up

I know that Remixicon does not have every icon you may need, and when you are working with a design system, you may be provided with some custom icons.

But the idea shared here is something you can try with any library you're working with. And if you do, I would love to hear your experience trying this out.

If you liked this article and found it helpful, kindly share :)

SVG + JavaScript Tutorial – How to Code an Animated Watch

Hunor Márton Borbély — Thu, 23 Dec 2021 17:19:15 +0000

Since SVG images can be inlined in HTML, we can manipulate them with JavaScript. This means that we can animate parts of an image from code, make it interactive, or turn things around and generate graphics from data.

In this example, we are going to create a watch. We will use SVG to paint the watch, and use JavaScript to animate the hands.

This tutorial is a bit more advanced, going in-depth with some of the less obvious SVG properties and focusing on animation with JavaScript. If you'd like to get a more general overview of SVGs, then check out my earlier article where we walk through the code of 7 simple SVG images.

You can also watch this article as a video with a bit more content. In the video we also cover interaction.

SVG in HTML

In the previous article, we learned that SVG images can be inlined in an HTML document. We talked about the SVG tag itself, which defines the size of the image, and the placement of the image elements.

Image elements are placed within the image by their position. The viewBox defines how these positions should be interpreted.

The first two numbers of the property set the position at the top-left corner. Together with the size defined by the last two numbers, they form a coordinate system.

<html>
  <head>
    <title>Watchtitle>
    <link rel="stylesheet" href="./index.css" />
  head>

  <body>
    <svg width="200" height="200" viewBox="-100 -100 200 200">
      <circle
        cx="0"
        cy="0"
        r="90"
        fill="transparent"
        stroke="#f0f0c9"
        stroke-width="7"
      />
    svg>

    <script src="./index.js">script>
  body>
html>

In this example, we center the coordinate system. The 0,0 coordinate is in the middle of the image. We set with the viewBox that the top-left corner should be the -100,-100 coordinate and both the width and height should be 200 units.

In this example, the size defined by width and height and the size defined by viewBox are the same. This means that one unit within the image will be one pixel in the browser. This is not always true. If the two don't match then the image scales up or scales down.

How to Make the Watch's Minute and Hour Hands

Now that we've established our foundations, let's start coding the watch itself. We start with the minute and hour hands.

There are many ways to draw these little lines. We could draw each line one by one, but probably the most effective way to draw it is to draw a circle with a special dash property.

The circle tag in our initial example has a center position, a radius for the size, a fill and border color, and a border width.

SVG elements often have similar styling options as HTML elements with CSS. But these options have different property names. You can think of the fill property as background-color in CSS. And the stroke and stroke-width properties are also similar to the border-color and border-width properties. Just keep in mind that they are not exactly the same.

We will also use the fill property for setting text color, and we will use the stroke property to set the color of a line.

Now how do we turn a continuous circle into minute markers? You might be familiar with the border-style property in CSS. Mostly you would use a solid border, but you can also have a dotted or a dashed one. These border styles are not very common, as you don’t have that many options to fine-tune them in CSS.

The border-style property in CSS for HTML elements

In SVG we have similar possibilities with much more customization options. We can use the stroke-dasharray, the stroke-dashoffset, and the pathLength properties.

Let’s have a few examples. In the first example, we set a single number as stroke-dasharray. This will result in a dashed border where the line segment and the gap both have the same length.

The stroke-dasharray property for SVG

This property is an array though. If we set two numbers, then the first one will be the length of the line segment, and the second will be the length of the gap. You can even set more than two numbers, and then the length of the line and the gap will always take the next number. Until it runs out of the array and then it starts at the beginning.

We will set two numbers. One for the length of the minute marker, and one for the gap between them. The sum of these two should be exactly the length of one minute on the circle. We know that one hour is 60 minutes. So we can calculate the circumference of the circle, then divide it by 60 to get the length of one minute.

But there’s a better way. Instead of calculating the circumference of the circle, we can go the other way. We can set the pathLength property.

This property is a bit tricky. It does not resize the circle but affects how the dasharray property is interpreted. The dashes will be drawn as if the circle had a circumference defined by pathLength.

So let’s set the pathLength to 60, representing 60 minutes. Now the sum of the line and gap segment has to be 1 in total. I set it to 0.2 and 0.8 in this example.

Using the pathLength property. Note that the sum of the two numbers at the stroke-dasharray property is one, matching the length of one minute.

Now we are almost done, but one little piece is still missing. The dashing starts at the wrong position. To fix it we have to shift it by half of the line segment’s length using the stroke-dashoffset property.

The dash offset property can be a bit counterintuitive, as a positive value here shifts the dashing backwards. You can also set it to a positive number to shift it forward.

Example with and without stroke-dashoffset

In the same way, we can set an hour marker. We add a new circle tag with almost the same properties. The only thing that is different is the color and we have longer gaps in the dash array.

. . .

    <svg width="200" height="200" viewBox="-100 -100 200 200">
      <circle
        cx="0"
        cy="0"
        r="90"
        fill="transparent"
        stroke="#0f0e0e"
        stroke-width="7"
        stroke-dasharray="0.2 0.8"
        stroke-dashoffset="0.1"
        pathLength="60"
      />

      <circle
        cx="0"
        cy="0"
        r="90"
        fill="transparent"
        stroke="#f0f0c9"
        stroke-width="7"
        stroke-dasharray="0.2 4.8"
        stroke-dashoffset="0.1"
        pathLength="60"
      />
    svg>

. . .

It's important to note here that layering in SVG matters. Tags added later in the document will be on top of the previous ones. If we add these two circles in the opposite order, then the minutes would fully cover the hour markers.

As SVG lives in HTML now, we can move some of these properties from CSS. We can’t move all the properties though. There’s a difference between properties defining the style and those defining the shape of an element.

The radius, for instance, defines the shape of the circle, so it has to stay with the SVG code. The fill and stroke properties on the other hand we can move.

. . .

    <svg width="200" height="200" viewBox="-100 -100 200 200">
      <circle class="minute_marker" r="90" pathLength="60" />
      <circle class="hour_marker" r="90" pathLength="60" />
    svg>

. . .

.hour_marker {
  fill: transparent;
  stroke: #f0f0c9;
  stroke-width: 7;
  stroke-dasharray: 0.2, 4.8;
  stroke-dashoffset: 0.1;
}

.minute_marker {
  fill: transparent;
  stroke: #0f0e0e;
  stroke-width: 7;
  stroke-dasharray: 0.2, 0.8;
  stroke-dashoffset: 0.1;
}

How to Draw the Watch Hands

Let's add the hands that show the time. Initially, we draw these to point upwards, then turn them into position with JavaScript.

We use the line element to draw the hands. To define a line element we have to set the starting and ending coordinates, along with a stroke color and the stroke-width property.

To make things a bit nicer, we can also add the stroke-linecap property to have rounded line caps. These styling properties we add with CSS.

. . . 

    <svg width="200" height="200" viewBox="-100 -100 200 200">
      <circle class="minute_marker" r="90" pathLength="60" />
      <circle class="hour_marker" r="90" pathLength="60" />

      <line class="hand" x1="0" y1="0" x2="0" y2="-50" />
      <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-50" />

      <line class="hand" x1="0" y1="0" x2="0" y2="-80" />
      <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-80" />

      <line class="hand hand--second" x1="0" y1="12" x2="0" y2="-80" />
    svg>

. . .

. . .

.hand {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
}

.hand--thick {
  stroke-width: 7;
}

.hand--second {
  stroke: yellow;
}

How to Point the Watch Hands in the Right Direction

Now how do we turn these lines into position? If we assign an ID to an element we can access it and manipulate it from JavaScript.

Which element should we assign an ID, though? We have two elements for one hand. To solve this problem we can group these two line elements in a group tag. You can think of a group tag as the div element in HTML.

We can assign an ID to this group, then we can rotate the whole group into position from JavaScript.

. . .

    <svg width="800" height="800" viewBox="-100 -100 200 200">
      <circle class="minute_marker" r="90" pathLength="60" />
      <circle class="hour_marker" r="90" pathLength="60" />

      <g id="hour_hand">
        <line class="hand" x1="0" y1="0" x2="0" y2="-50" />
        <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-50" />
      g>

      <g id="minute_hand">
        <line class="hand" x1="0" y1="0" x2="0" y2="-80" />
        <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-80" />
      g>

      <g id="second_hand">
        <line class="hand hand--second" x1="0" y1="12" x2="0" y2="-80" />
      g>
    svg>

. . .

In the JavaScript file, first, we get the hand elements by ID. Then we create a Date object and we get the current hour, minute, and second. And finally, we set the elements' transform attribute based on these values.

const hoursElement = document.getElementById("hour_hand");
const minutesElement = document.getElementById("minute_hand");
const secondsElement = document.getElementById("second_hand");

const date = new Date();

const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();

hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
minutesElement.setAttribute("transform", `rotate(${(360 / 60) * minute})`);
secondsElement.setAttribute("transform", `rotate(${(360 / 60) * second})`);

The transform attribute can include multiple transformations like scaling, translating, or skewing.

We are setting the rotate transformation, which requires a number. This number is a rotation between 0 and 360 degrees. For the hour hand, we divide 360 by 12 to get how much rotation we need per hour and multiply it with the current hour. This should turn the hour hand towards the current hour.

For the minute and second hand, we do the same thing, except we divide 360 by 60, as one hour consists of 60 minutes and 1 minute is 60 seconds.

Luckily for us, the transformation center by default is the origin, the 0,0 coordinate. If this wouldn’t be the case we could set another transformation origin, but because of our viewBox settings, we don’t need that.

How to Animate the Watch Hands**

Now, this should already show the current time, but our image is static. To keep up with time we can use the requestAnimationFrame function to move the hands.

const hoursElement = document.getElementById("hour_hand");
const minutesElement = document.getElementById("minute_hand");
const secondsElement = document.getElementById("second_hand");

function animate() {
  const date = new Date();

  const hour = date.getHours() % 12;
  const minute = date.getMinutes();
  const second = date.getSeconds();

  hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
  minutesElement.setAttribute("transform", `rotate(${(360 / 60) * minute})`);
  secondsElement.setAttribute("transform", `rotate(${(360 / 60) * second})`);

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

We move the rotation logic into an animate function, and use the requestAnimationFrame function.

First, we trigger it by calling requestAnimationFrame outside the animate function. Then, to keep on with the animation we also request another frame at the end of every animation cycle.

If you want to have a smoother animation, then you can refine the positioning. Instead of having discrete positions for the hands, we can define them in a way that they can point to split seconds, minutes, and hours.

const hoursElement = document.getElementById("hour_hand");
const minutesElement = document.getElementById("minute_hand");
const secondsElement = document.getElementById("second_hand");

function animate() {
  const date = new Date();

  const hour = date.getHours() + date.getMinutes() / 60;
  const minute = date.getMinutes() + date.getSeconds() / 60;
  const second = date.getSeconds() + date.getMilliseconds() / 1000;

  hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
  minutesElement.setAttribute("transform", `rotate(${(360 / 60) * minute})`);
  secondsElement.setAttribute("transform", `rotate(${(360 / 60) * second})`);

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

The hour hand won’t get its position only based on the hour, but it will make a slight turn based on the current minutes as well.

The minute hand will consider the current second in its rotation. And the second hand will also consider milliseconds. This way our hands will have a continuous movement. They won’t jump from second to second, but they will animate.

Next steps – How to Make the Watch Interactive

Now if we check the result, we should have a smoothly animated watch.

To go further, you can also add a calendar window showing the current date, with the text element. And to take it to the next level you can even add an event handler for this element, which toggles its content between the current date and the AM/PM indicator.

If you are stuck, check out the video below, where we also cover this part.

Mixing SVG with JavaScript opens up a lot of cool options. You can animate things, add interactions, and generate graphics. Can't wait to see what you come up with.

How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

freeCodeCamp — Mon, 16 Nov 2020 22:44:20 +0000

By Edidiong Asikpo

SVG stands for Scalable Vector Graphics. It is a unique type of image format for vector-based graphics written in Extensible Markup Language (XML).

In this tutorial, I will explain why you'd want to use SVG images and how you can use them in CSS and HTML.

Why Should You Use SVG Images?

There are a number of reasons to use SVG images, some of which are:

SVG images do not lose their quality when zoomed or resized.
They can be created and edited with an IDE or text editor.
They are accessible and animatable.
They have a small file size and are highly scalable.
And they can be searched, indexed, scripted, and compressed.

Now let's see how you can actually work with SVG images.

How to Download the SVG Image Used in This Tutorial

If you want to work with the SVG image I've used in this tutorial, follow the steps (and diagram) below to download it.

Go to unDraw.
Change the background color to yellow.
In the search box, search for the word happy.

Click on the image named Happy news.
On the pop-up window, click on the Download SVG to your projects button.

If you followed the steps above correctly, the SVG image should be on your computer now.

Now, open the SVG image in your favorite IDE or text editor. Rename it to happy.svg or whatever name you prefer.

How to Use SVG Images in CSS and HTML

There are several different ways to use SVG images in CSS and HTML. We will explore six different methods in this tutorial.

1. How to use an SVG as an

This method is the simplest way to add SVG images to a webpage. To use this method, add the element to your HTML document and reference it in the src attribute, like this:

<img src = "happy.svg" alt="My Happy SVG"/>

Assuming you downloaded the SVG image from unDraw and renamed it to happy.svg, you can go ahead and add the code snippet above into your HTML document.

If you did everything correctly, your webpage should look exactly like the demo below. 👀

When you add an SVG image using the tag without specifying the size, it assumes the size of the original SVG file.

For instance, in the demo above, I didn't modify the size of the SVG image, so it assumed its original size (which was a width of 915.11162px and a height of 600.53015px ).

Note: to change the original size, you have to specify the width and height with CSS as you can see in the demo below. You can also update the original width and height directly.

Even though we can change the size of SVG images added via the tag, there are still some restrictions if you want to make major style changes to the SVG image.

2. How to use SVG as a CSS `background-image`

This is similar to adding SVG to an HTML document using the tag. But this time we do it with CSS instead of HTML as you can see in the code snippet below.

body {
  background-image: url(happy.svg);
}

When you use an SVG as a CSS background image, it has similar limitations to using . Still, it allows a bit more customization.

Check out the demo below and feel free to make modifications to it using CSS.

3. How to use inline SVG images

SVG images can be written directly into the HTML document using the tag.

To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the element in your HTML document.


 // Paste the SVG code here.

If you did everything correctly, your webpage should look exactly like the demo below.

When you use SVG inline in the HTML document, it reduces load time because it serves as an HTTP request.

Using this method lets you perform more customization as opposed to using either the or background-image methods.

4. How to use an SVG as an

You can also use an HTML element to add SVG images to a webpage using the code syntax below:

"happy.svg" width="300" height="300">

You use the data attribute to specify the URL of the resource that you'll use by the object, which is the SVG image in our case.

You use the width and height to specify the size of the SVG image.

Again, below is a demo for you to explore. 😃

Using the is supported across all browsers that support SVG.

5. How to use SVG as an

Even though this isn't advisable, you can also add an SVG image using an as seen in the demo below.

Just keep in mind, though, that s can be difficult to maintain and will be bad for your site's Search Engine Optimization (SEO).

Using also defeats the purpose of the Scalable in the name Scalable Vector Graphics because SVG images added with this format are not scalable.

6. How to use SVG as an

The HTML element is another way to use an SVG image in HTML and CSS using this syntax: .

Keep in mind, however, that this method has limitations, too. According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon is generally not wise if you want your site to be operable on the average user's browser.

Below is a demo of using the HTML element to add an SVG image.

Conclusion

I hope you were able to learn about the different ways of using SVG images in CSS and HTML. This will hopefully guide you towards choosing the right method when adding SVG images to a website.

If you have any questions, you can send me a message on Twitter, and I'll be happy to answer every single one.

How to Use SVG Icons in React with React Icons and Font Awesome

Colby Fayock — Thu, 24 Sep 2020 16:07:39 +0000

Icons are a way to visually communicate concepts and meaning without the use of words. This could be for categorization, an action, or even a warning.

How can we add icons using SVG to our React apps to improve our visual communication?

What is SVG?
What makes SVG great for the web?
Part 0: Creating a React app
Part 1: Adding SVG icons with react-icons
Part 2: Manually adding SVG files to a React component

What is SVG?

SVG stands for Scalable Vector Graphics. It’s a file format based on a markup language similar to XML that allows developers and designers to create vector-based images using path definitions.

What makes SVG great for the web?

SVG was born for the web. It’s an open standard that was created by W3C to provide a better way to add images to the web. If you open an SVG file on your computer, you might be surprised to find that it’s all code!

This plays a part in the small file size. Typically when using SVG, you can take advantage of its smaller size compared to larger image files that might be required to deliver the same high resolution.

Additionally, since we’re defining SVG as paths, they can scale as large or as small as we want. This makes them extra flexible for web usage, especially when making experiences responsive.

What are we going to create?

We’re first going to walk through using a package called react-icons that will allow us to easily import icons from popular icon sets like Font Awesome right into our app.

We’ll also take a look at how we can manually add SVG files right into our app by copying the code of an SVG file right into a new component.

Part 0: Creating a React app

For this walkthrough, you can use any React framework you’d like whether that’s Create React App or Next.js. You can even use an existing project.

Because we don’t need anything special to add our icons, I’m going to use create-react-app.

To get started with create-react-app, you can create a new project using the following command in your terminal:

yarn create react-app [project-name]
# or
npx create-react-app [project-name]

Note: replace [project-name] with the name you want to use for your project. I’m going to use my-svg-icons.

Once you have your new app or your existing app, we should be ready to go!

New Create React App

Part 1: Adding SVG icons with react-icons

Adding react-icons to your project

To get started with react-icons, we want to install it in our project.

Inside of your project, run the following command:

yarn add react-icons
# or
npm install react-icons --save

Once it’s completed, we should be ready to use it in our project.

Selecting icons for a project

One of the cool things about react-icons is the extensive library they make available within the single package.

Not only do we have Font Awesome immediately available, we have GitHub’s Octicons, Heroicons, Material Design Icons, and a whole bunch more.

react-icons Heroicons

When choosing icons, you pretty much have the ability to use any icon you want at any time. That said, I would recommend trying to keep a consistent look and feel with your icons.

If you primarily use Font Awesome for your website, it might look a bit strange and inconsistent if you were to start adding Flat Color Icons to the mix. You ultimately want to provide an experience that people will be able to easily identify the patterns that you create.

Using react-icons in your project

Once you’ve found the icons you want to use, we can now add them to our project.

react-icons’s website makes it easy for us to look up the name of the icon we want to use to import to our project.

If we wanted to use the Font Awesome rocket icon, we can navigate to Font Awesome in the sidebar, search the page for “rocket” (CMD+F or CTRL+F), and then click the icon which will copy its name to your clipboard.

Font Awesome rocket icon

We could also search for “rocket” in the search form at the top left of the page, which shows us the result “rocket” throughout all icon sets.

Rocket icons in react-icons

Inside of our project, we can now import that icon. Similar to the instructions at the top of the react-icons page, we want to import that specific icon from the react-icons/fa, which refers to the Font Awesome module of react-icons.

Add the following to the top of the file you want to import the icon in. If using a new create-react-app project, you can add it to the top of src/App.js.

import { FaRocket } from 'react-icons/fa';

To test this out, let’s replace the React logo with our icon.

Remove the component and instead add:




And if we reload the page, we can see our rocket!

Rocket icon in React app
Our rocket isn’t spinning like the React logo though, so let’s fix that.
Add the class .App-logo to the FaRocket component:
"App-logo" />

And the rocket should now be spinning!

Spinning rocket icon in React app
But it’s also a little small. If we look inside of src/App.css, we’re setting the height of .App-logo to 40vmin. While that’s working, for our icon to fill the space, we need to also provide a width for it to fill.
Add the following to the .App-logo class to add a width:
width: 40vmin;

And while it’s probably a little too big now, we’re at a more appropriate size and we have our icon!

Increased size of spinning rocket icon in React app
Follow along with the commit.
Part 2: Manually adding SVG files to a React component
Sometimes you don’t want to add a new library just to get an icon. Sometimes it’s a custom icon that’s not available in a public library.
Luckily with React, we can create a new SVG component pretty easily that allows us to add our custom SVG icons anywhere we want.
First, let’s find an icon.
While all Heroicons are available inside react-icons, let’s use it as an example since it’s easy to find and copy some SVG code.
Go to heroicons.com and search for an icon that you’d like to use for this example. I’m going to use “globe”.
After finding the icon you want, hover over that icon, where you’ll see options to copy that icon as SVG or JSX, and copy it as JSX.

Copy as JSX in Heroicons
With that icon copied, create a new file under src called Globe.js.
Inside of that file, we’re going to create a new component called Globe and paste in our SVG within that component.
import React from 'react';

const Globe = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    svg>
  )
}

export default Globe;

Note: when copying normal SVG to a React component, it might not work "as is". Sometimes SVG files include CSS classes or element attributes that aren't valid with JSX. 
If you run into errors, try fixing the attributes and looking at the web console to see the warnings and errors React throws. Because we copied as JSX, we were able to make it work right away.
Now, go back to src/App.js and import our new component:
import Globe from './Globe';

Then we can replace our rocket icon with our new component:


And if we open up our browser, we can see our globe!

Large globe icon in REact app
Though, it’s a little big.
We want to apply our .App-logo class to our Globe component, so we need to update that component to take a className prop.
Back at src/Globe.js, add a className prop argument:
const Globe = ({ className }) => {
Then, add a new prop with that className to the  component:


Now, we can update our Globe component in src/App.js to include that class:
"App-logo" />

And if we reload the page, we can see our logo is back at the right size and it’s spinning again!

Spinning, normal size globe icon in React app
Follow along with the commit.
Why don’t we include it as an img file?
While we can include it as an image file just like React does in the default create-react-app code, we get a few benefits from adding our SVG files “inline”.
For one, when adding SVG inline, we can access the different paths with CSS properties. This gives us more flexibility for customizing it dynamically.
It’s also going to provide fewer HTTP requests. The browser will know how to load that SVG, so we don’t need to bother the browser to request that file to include in the page.
That said, it’s still a valid option for adding an SVG file to the page.

  
    
      
    
  
  
    
      ? Follow Me On Twitter
    
    
      ? Subscribe To My Youtube
    
    
      ✉️ Sign Up For My Newsletter
    
    
      ? Sponsor Me



 How to Organize and Sync SVG Files with Iconset 
Colby Fayock — Tue, 08 Sep 2020 15:47:35 +0000
 SVG is an awesome way to bring vector images into a design and development workflow. But collecting and organizing SVG files on your computer can be challenging. 
How can Iconset help take away the pain and get us more productive?

What is SVG?
What is Iconset?
What are we going to learn?
Part 1: Getting started with Iconset
Part 2: Adding icons to Iconset
Part 3: Using Iconset with design software like Figma
Part 4: Using Iconset in development like with React
Part 5: Syncing Iconset across multiple computers with Dropbox


        
What is SVG?
SVG is a nearly 20 year old image file format. And while it’s been around for a while, it has only recently been gaining momentum in the development  community.
SVG is great for a number of reasons. First of all, it’s a vector format, meaning it scales as big or small as you want. 
But it’s also flexible in that you can use SVG right in your development project with a typically small file size and infinite scale. You can even animate it!
But trying to collect and organize a bunch of files can be challenging. What do you name them? Do you have a computer that can easily preview them? What about search?
What is Iconset?
Iconset is a free cross-platform tool that allows you to collect and manage all of your SVG files in one place.

Iconset library
Love to quickly move between Font Awesome and heroicons but don’t want to keep switching libraries? You can use Iconset to make a quick search and drag it right into your project.
If you’re planning on using it for a React project, you can even copy the file as JSX and dump it right into your project!

Iconset "Copy As"
What are we going to learn?
We’re going to walk through a few different scenarios that'll show us how Iconset is useful. 
We’re also going to walk through how you can easily manage Iconset between different computers or environments so you can have the same great library anywhere you work.
Part 1: Getting started with Iconset
To get started, you’ll need to first install Iconset locally. It should be a similar installation process as any other application.

Iconset with no icons
Once it’s ready and available locally, you should be able to open it up and see a UI with No Icons, which is expected, as it doesn’t come with any icons out of the box.
Part 2: Adding icons to Iconset
Adding icons to Iconset is as easy as dragging in, but you have a few options during the process.
To get started, let’s download the free icon set heroicons.
Download at: https://heroicons.com/.
On the heroicons website, you should see a big Download all button, which will download a zip file including all of the files.

Downloading heroicons
If you navigate to the optimized folder, you’ll see that there are two different versions: solid and outline.
Now to get these into Iconset, select each folder individually and drag it right into Iconset.

Dragging heroicons into Iconset
Once there, you have a few options.

Set: Since this is our first set, you’ll automatically be creating a new one. If you had existing sets, you could import into those sets.
Set Name: Here we can name the set something that we’ll remember. For this, I recommend naming it “heroicons - Outline”.
Import Options: these are optional settings, but I typically select the optimize and clean option to make sure any icons are immediately ready to get working with.


Iconset with heroicons set
And once you click Import, it will do it’s thing, and you’ll now have your first set of icons in Iconset!
You can go ahead and do the same thing with the solid directory so then we’ll now have our two sets ready to go.

Iconset with Outling and Solid sets of heroicons
At this point, you can use Iconset to search through your icons and see all of your files currently available in your collection.
Part 3: Using Iconset with design software like Figma
The great thing about Iconset is how easy it is to use it with design software like Figma.
If I wanted to add an envelope icon to my website so people could contact me, I could search for the mail icon, and simply drag it onto my canvas:

Dragging mail icon into Figma
I can then treat it like any other vector design element and immediately use it in my project.

SVG Mail icon in Figma
Part 4: Using Iconset in development like with React
Another cool thing is how easy it is to use in a project like React.
Out of the box, you get a few different ways you can copy the file and use it in development like copying it as JSX.

Next.js Sass Starter
If I feel like my Next.js Sass Starter could use some icons on the page, I can right-click any icon I want and under Copy As select JSX I can paste it right into my project!

Copying icon from Iconset as JSX
And while it will need some styling once you drop it in just like any other image or icon, it’s immediately ready to go.

Using icon JSX in Next.js React app
Part 5: Syncing Iconset across multiple computers with Dropbox
With Iconset, you have the ability to switch between different libraries. But importantly, you can also set the location of your library.
When Iconset creates your library, it stores everything as files and a database on your computer.

Iconset library folder
And inside the Iconset UI, we can both Move and Switch the location we use.

Iconset library settings
If this is your first time setting up Iconset, you can start by clicking Move and then selecting the location you want to sync it to.

Moving Iconset library location
And once you click Move, it will move it to that directory, like a folder on Dropbox, and sync to the cloud like any other folder and file.

Syncing Iconset library with Dropbox
Alternatively, if you already have a shared Iconset library or if you’re setting this up on a new computer, you can use the Switch option, and select that option right from Dropbox.

Switching Iconset location
And once you hit Switch, you’ll now load up your shared library and be ready to get productive.

Iconset with full library
What else can you do?
Publish and share icon sets
Another cool feature is that you can export sets and share them. If you’ve spent a lot of time on a collection and want to share it with others, export it, publish it, and share it with the community!
More organization
Iconset also supports features like Folders and Favorites. This makes it even easier to group and collect the icons however it makes sense to you to keep you productive.
It also supports tagging, making it even easier to search.

  
    
      
    
  
  
    
      ? Follow Me On Twitter
    
    
      ? Subscribe To My Youtube
    
    
      ✉️ Sign Up For My Newsletter
    
    
      ? Sponsor Me
    
  

 


 What Is an SVG File? SVG Image and Tags Explained 
freeCodeCamp — Fri, 31 Jan 2020 22:19:00 +0000
 SVG
SVG or Scalable Vector Graphics is a web standard for defining vector-based graphics in web pages. Based on XML the SVG standard provides markup to describe paths, shapes, and text within a viewport. The markup can be embedded directly into HTML for display or saved to a .svg file and inserted like any other image. 
You can write SVG by hand, but more complicated graphics can be designed in vector graphics editors such as Illustrator or InkScape and exported to SVG files or code.
SVG Basics
Developers start an SVG graphic with the  tag and XML namespace like so:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

svg>

The sample also includes a version attribute. The version attribute is optional but it is recommended for complaince with XML specifications.
This sample won’t display anything, it merely established a viewport. You can add height and width attributes to set a display size for the viewport this essentially establishes a canvas for you to work in.
With a viewport in place you can add basic graphics, text, and path elements.
<svg
     version="1.1"
     width="100%"
     viewbox="0 0 600 300"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="#f7b2c1" />
  <circle cx="240" cy="60" r="50" fill="#c1b2f7" stroke="#b2c1f7" stroke-width="15"/>
  <text x="450" y="70" font-size="20" text-anchor="middle">SVG Text is browser readable!text>
  <g stroke="#b2c1f7"> 
    <path stroke-width="2" d="M10 170 l590 0" />
    <path stroke-width="4" d="M10 190 l590 0" />
    <path stroke-width="6" d="M10 210 l590 0" />
  g>  
svg>

You can see the output and play with the code in this codepen.
In the opening svg tag we add a width attribute to set the width of the viewport to 100% of the container width, you can use percentages or pixel widths. The opening svg tag also has viewbox attribute which defines a window through which elements of your svg are visible, in this case, the viewbox spans from (0,0) to (600,300). In SVG space the X-axis starts with zero on the left and increases to the right; the Y-axis starts with zero at the top and increases towards the bottom.
The first new tag is the  tag which defines a rectangle in the SVG viewport. In this case we define a square which is 10 units from the top and left and 100 units tall and wide. The fill attribute sets the fill color for the shape.
Next we define a circle or oval with the  tag. The sample defines a circle centered at (240,60) with a radius of 50 units. The stroke and stroke-width attributes set a stroke color and a size for the stroke.
You can add text to the graphic with the text tag. The sample text is anchored from the middle of the text to a point at (450, 70) and has a font size of 20 units. The nice thing about text in SVG is it will scale with the rest of your graphic, but it is still readable by the browser and web bots.
When you want to apply the same attributes or CSS styles to multiple SVG elements you can group them with the  tag. Attributes assigned to the  tag, like the stroke attribute in the example, will be applied to all elements within the group. In this case three  elements.
The  element defines a vector path in the viewport. The path is defined by the d attribute. In the first example the definition reads ‘move to the absolute coordinate (10, 170) and draw a line to the relative coordinates 590 in the X direction and 0 in the Y direction.
The following commands can be used to create your path:
M = move to L = line to H = horizontal line to V = vertical line to Z = close path C = (cubic bezier) curve to S = smooth curve to Q = quadratic bezier curve to T = smooth quadratic bezier curve to A = arc
The canvas element
Canvas graphics can be drawn onto a
A context is created through the getContext method on the
 Before canvas

After canvas



After creating the context object, the example draws a red rectangle 100 pixels wide and 50 pixels high, with its top-left corner at coordinates (10,10).
Drawing a pie chart
The results variable contains an array of objects that represent the survey responses.
var results = [
{ name : "Satisfied", count: 1043, color: "lightblue"} ,
{ name : Neutral", count: 563 , color: "lightgreen"} ,
{ name : Unsatisfied", count: 510 , color: "pink"} ,
{ name : "No comment", count: 175 , color: "silver"}
];

To draw a pie chart, we draw a number of pie slices, each made up of an arc and a pair of lines to the center of that arc. We can compute the angle taken up by each arc by dividing a full circle (2 π ) by the total number of responses and then multiplying that number (the angle per response) by the number of people who picked a given choice.



This draws the following chart:

Browser Support
Browser support for SVG is available in all modern browsers. There are some issues with scaling in IE 9 through IE 11 however they can be overcome with the use of the width, height, viewbox, and CSS.
Editors

Vectr - web and desktop tool fot creating and editing SVG graphics, free of charge

Tools to create SVG
There are few tools available to create SVG in the form of drawing program.

Inkscape - It is an open source tool for state-of-the-art vector drawing with an easy to use graphical interface.
Adobe Illustrator - Adobe Illustrator is a commercial tool for Vector Imagery.

For more tools, refer to W3C list of tools that supports SVG
Why you should use SVGs
As a vector image format, it allows you to resize an image without any loss of quality and a particularly light weight. As an XML format, it allows you to benefit from the full power of JavaScript and especially CSS.
More info on SVGs:

Why you should use SVG images
What you need to know to work with SVG in VS Code
How to make your fancy SVG button accessible

 


 SVG Rectangle and Other SVG Shapes 
freeCodeCamp — Sat, 25 Jan 2020 22:34:00 +0000
 Several shapes can be created using SVG drawing. An SVG drawing can use and combine seven shapes: Path, Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.
Path
The path element is the most commonly seen, and is usually generated by programs designed to export SVG code.
  <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />

The example path above will generate a “plus” symbole (+) when used inside an SVG drawing. SVG path elements are not built manually, but generated through design programs that can manipulate vector graphics, such as Illustrator or Inkscape.
Rectangle
The rectangle element rect draws a rectangle on the screen, and it accepts six attributes.
  <rect x="0" y="0" width="100" height="50" rx="10" ry="10" />

x and y assign the position of the top-left corner of the rectangle, and width and height assign the size of the rectangle. rx and ry assign the radius of the rectangle corners, similar to the CSS border-radius property.
Circle
The circle element circle accepts three attributes.
  <circle cx="100" cy="100" r="50" />

cx and cy assign the position of the center of the circle, and r assigns the radius (size) of the circle.
Ellipse
The ellipse element, ellipse, is similar to the circle element except the radius is split into two attributes.
  <ellipse cx="100" cy="100" rx="50" ry="20" />

Again, cx and cy assign the position of the center of the ellipse, and now rx and ry assign the horizontal and vertical radius of the ellipse, respectively. A larger rx will give a “fat” ellipse, and a larger ry will give a skinnier ellipse. If rx and ry are equal, it will form a circle.
Line
The line element is simple, and accepts four attributes.
  <line x1="0" x2="100" y1="50" y2="70" />

The x1 and y1 attributes assign the first point of the line, and the x2 and y2 attributes assign the second point of the line.
Polyline
A polyline is a series of connected straight lines, assigned in a single attribute.
  <polyline points="0 100, 50 70, 60 40, 20 0" />

The points attribute assigns a list of points, each point separated by a comma.
Polygon
The polygon element is also a series of connected straight lines, but in this case, the last line will automatically reconnect to the initial point.
  <polygon points="0 100, 50 70, 60 40, 20 0" />

This example will draw the same shape as the polyline above, but it will draw an extra line to “close” the series of lines.
More Information
MDN Documentation: MDN

SVG - freeCodeCamp.org

SVG Toggle Button Tutorial – How to Handle Dark Mode with CSS and JavaScript

Table of Contents

How to Handle Dark Mode with CSS

How to Code a Sun Icon with SVG

How to Detect Dark Mode in JavaScript

How to Code a Moon Icon with SVG

How to Toggle Dark Mode with JavaScript

Next Steps

How to use the Fullscreen API in JavaScript

Table of Contents:

How to Enter Fullscreen Mode

How to Style the Fullscreen

How to Display Games with the Canvas Element in Fullscreen

How to Exit Fullscreen

How to Code a Fullscreen Icon with SVG

How to Toggle the Icon's Appearance

Learn More

SVG Tutorial – How to Code Images with 12 Examples

The SVG tag

How to Make a Christmas Ornament with SVG

How to Build a Christmas Tree with SVG

How to Make a Gingerbread Figure with SVG

How to Make a Star with SVG

How to Make a Snowflake with SVG

How to Draw a Forest with SVG

How to Make a Curvy Tree with SVG

How to Make a Bell with SVG

How to Write Text Along a Path

How to Animate an SVG with CSS

How to Make a Clock That Shows the Actual Time

How to make a Data-driven Diagram with SVG and React

Next Steps – Making SVGs Interactive with JavaScript

Subscribe for more tutorials on Web Development:

How to Use the CSS Box Model and Style SVG Images

What is the CSS Box Model?

Let's Code

How to Style SVG Images

How to Style the SVG Image

Make the Image Responsive

How to Change the Border Color

How to Change the Background

How to Add a Hover Attribute

How to Add Achor Tags

Conclusion

How to Make a Clickable SVG Map With HTML and CSS

Here's what we'll cover:

What Is an SVG Map?

What Are the Benefits of an SVG Map?

Example Of SVG Maps In the Wild

What Are We Building?

How to Build Our Interactive Map of Africa

1. Get the SVG Map of Africa

2. Create the basic HTML structure

3. Import the SVG map file

4. Nest each path in an anchor tag

5. How to style the SVG map

Conclusion

References

How to Create Grainy CSS Backgrounds Using SVG Filters

How to Create a Grainy Background Using PNG Grainy Image

How to Recreate the PNG Noise

What are SVGs? With Video Overview

How to Create an SVG

How to Use an SVG as a Background-Image

SVG Filter Inline CSS

Video Walkthrough

How to Import SVGs in a React and Vite app

What Is an SVG?

How to Import SVGs in React Apps

1. How to Import SVGs Using the Image Tag

2. How to Import SVGs by Adding them Directly as JSX

3. How to Import SVGs as React Components

4. How to Convert SVGs to React Components

5. How to Import SVGs Using SVGR

6. How to Import SVGs Using the Vite Plugin for SVGR

Conclusion

What is an SVG File?

Table of Contents

How to Make an SVG File

2. How to use SVG as a CSS `background-image`