1. Introduction

In this tutorial, we'll dive into the world of Scalable Vector Graphics (SVGs) and how to use them effectively in a Bootstrap project. We will cover how to add SVGs as inline HTML elements, how to style them using CSS, and manipulate them with JavaScript.

By the end of this tutorial, you will be able to:

• Add SVGs to your Bootstrap project.
• Apply CSS styling to these SVGs.
• Manipulate SVGs with JavaScript event handlers.

Prerequisites

Before starting this tutorial, ensure you have a basic understanding of HTML, CSS, JavaScript, and how to set up a Bootstrap project.

2. Step-by-Step Guide

Understanding SVGs

SVGs are XML-based vector images. Since they are vector-based, they can be scaled to any size without losing quality. SVGs can be used directly in your HTML, styled with CSS, and manipulated with JavaScript.

Adding SVGs to Bootstrap

SVGs can be added directly to your HTML document using the <svg> tag. You can use the width and height attributes to set the size of the SVG.

Here's an example of an SVG in HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

This code creates a circle with a radius of 40 (r="40"), centered at (50,50) (cx="50", cy="50"), with a green outline (stroke="green") that is 4 units wide (stroke-width="4"), and filled with yellow color (fill="yellow").

3. Code Examples

Styling SVGs with CSS

You can style SVGs similarly to how you style HTML elements with CSS. To do this, you can assign a class to the SVG and use that class in your CSS.

<!-- HTML -->
<svg width="100" height="100" class="my-svg">
  <circle cx="50" cy="50" r="40" />
</svg>

/* CSS */
.my-svg circle {
  stroke: green;
  stroke-width: 4;
  fill: yellow;
}

This will give you the same result as the previous example, but using CSS instead of inline HTML attributes.

Manipulating SVGs with JavaScript

You can manipulate SVGs using JavaScript just like any other HTML element.

Below is an example of changing the color of the fill when the SVG is clicked:

<!-- HTML -->
<svg width="100" height="100" id="my-svg" onclick="changeColor()">
  <circle cx="50" cy="50" r="40" />
</svg>

// JavaScript
function changeColor() {
  var svgElement = document.getElementById('my-svg');
  var circle = svgElement.querySelector('circle');
  circle.setAttribute('fill', 'blue');
}

When the SVG is clicked, the fill color of the circle will change to blue.

4. Summary

In this tutorial, we have learned how to use SVGs in a Bootstrap project. We have added SVGs to HTML, styled them with CSS, and manipulated them using JavaScript.

To continue your learning journey, you can:

• Explore different shapes you can create with SVGs.
• Learn more about SVG transformations.
• Use SVGs as icons in your Bootstrap project.

5. Practice Exercises

1. Create an SVG square and style it with CSS.
2. Create an SVG that changes color when hovered over with the mouse.
3. Create a button that, when clicked, changes the color of an SVG.

Solutions

1. SVG square:

<svg height="100" width="100">
  <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

1. Change color on hover:

<svg height="100" width="100" id="mySVG">
  <circle cx="50" cy="50" r="40" style="fill:yellow" />
</svg>

<script>
document.getElementById("mySVG").addEventListener("mouseover", function() {
  this.querySelector('circle').style.fill = 'red';
});
</script>

1. Button to change color:

<button onclick="changeColor()">Change color</button>

<svg height="100" width="100" id="mySVG">
  <circle cx="50" cy="50" r="40" style="fill:yellow" />
</svg>

<script>
function changeColor() {
  document.getElementById("mySVG").querySelector('circle').style.fill = 'green';
}
</script>