Home » HTML5 SVG
Tag:

HTML5 SVG

HTML5

HTML5 SVG Tutorial

by shedders
written by shedders

SVG (Scalable Vector Graphics) is an XML-based format for creating vector graphics in HTML5.

SVG allows you to create resolution-independent graphics directly in your HTML, making it ideal for creating shapes, charts, and interactive visualizations.

In this tutorial, you’ll learn:

  1. What SVG is and why it’s useful.
  2. Basic SVG shapes and elements.
  3. Styling and animating SVGs.
  4. Combining SVG with JavaScript for interactivity.
  5. Embedding and using SVG in HTML5.

1. What is SVG?

SVG stands for Scalable Vector Graphics, and its main features are:

  • Resolution Independence: SVG images look sharp on any screen size or resolution.
  • Lightweight: SVGs are XML-based, making them lightweight compared to raster images like PNG or JPEG.
  • Scriptable: SVGs can be styled and animated using CSS and manipulated with JavaScript.

2. Basic SVG Shapes

SVG provides basic shapes such as rectangles, circles, lines, and polygons.

Example 1: Drawing Basic Shapes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic SVG Shapes</title>
</head>
<body>
    <h1>Basic SVG Shapes</h1>
    <svg width="500" height="300" style="border: 1px solid black;">
        <!-- Rectangle -->
        <rect x="50" y="50" width="100" height="50" fill="blue" />
        <!-- Circle -->
        <circle cx="200" cy="75" r="40" fill="red" />
        <!-- Line -->
        <line x1="300" y1="50" x2="400" y2="150" stroke="green" stroke-width="3" />
        <!-- Ellipse -->
        <ellipse cx="100" cy="200" rx="50" ry="30" fill="purple" />
        <!-- Polygon -->
        <polygon points="300,200 350,250 250,250" fill="orange" />
    </svg>
</body>
</html>

Explanation:

  • <rect>: Draws a rectangle.
  • <circle>: Draws a circle.
  • <line>: Draws a straight line.
  • <ellipse>: Draws an ellipse.
  • <polygon>: Draws a shape with multiple points.

3. Adding Text in SVG

SVG supports text elements using the <text> tag.

Example 2: Adding Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Text</title>
</head>
<body>
    <h1>SVG Text Example</h1>
    <svg width="400" height="200" style="border: 1px solid black;">
        <!-- Simple Text -->
        <text x="50" y="50" font-family="Arial" font-size="20" fill="black">
            Hello, SVG!
        </text>
        <!-- Rotated Text -->
        <text x="150" y="100" font-family="Arial" font-size="20" fill="blue" transform="rotate(45, 150, 100)">
            Rotated Text
        </text>
    </svg>
</body>
</html>

Explanation:

  • <text>: Adds text to the SVG canvas.
  • x and y: Specify the starting position of the text.
  • transform=”rotate(angle, cx, cy)”: Rotates the text by a given angle around a center point.

4. Styling SVG with CSS

SVG elements can be styled using inline attributes or external CSS.

Example 3: Styling SVG with CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG with CSS</title>
    <style>
        .circle {
            fill: yellow;
            stroke: black;
            stroke-width: 3;
        }
        .rectangle {
            fill: lightblue;
            stroke: darkblue;
            stroke-width: 2;
        }
    </style>
</head>
<body>
    <h1>SVG Styled with CSS</h1>
    <svg width="300" height="200" style="border: 1px solid black;">
        <rect class="rectangle" x="50" y="50" width="100" height="50"></rect>
        <circle class="circle" cx="200" cy="100" r="40"></circle>
    </svg>
</body>
</html>

Explanation:

  • You can style SVG elements with CSS classes for reusability.
  • CSS properties like fill, stroke, and stroke-width control appearance.

5. Animating SVG

SVG supports animations using the <animate> and <animateTransform> tags.

Example 4: SVG Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Animation</title>
</head>
<body>
    <h1>SVG Animation Example</h1>
    <svg width="300" height="200" style="border: 1px solid black;">
        <!-- Moving Circle -->
        <circle cx="50" cy="100" r="20" fill="red">
            <animate attributeName="cx" from="50" to="250" dur="2s" repeatCount="indefinite" />
        </circle>
        <!-- Rotating Rectangle -->
        <rect x="100" y="50" width="50" height="50" fill="blue">
            <animateTransform attributeName="transform" type="rotate" from="0 125 75" to="360 125 75" dur="2s" repeatCount="indefinite" />
        </rect>
    </svg>
</body>
</html>

Explanation:

  • <animate>: Animates attributes like cx or fill.
  • <animateTransform>: Animates transformations like rotation or scaling.
  • dur=”2s”: Duration of the animation.
  • repeatCount=”indefinite”: Makes the animation repeat infinitely.

6. Responsive SVG

Make your SVG responsive by using viewBox and setting width and height to percentages.

Example 5: Responsive SVG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive SVG</title>
</head>
<body>
    <h1>Responsive SVG Example</h1>
    <svg viewBox="0 0 400 200" style="width: 100%; height: auto; border: 1px solid black;">
        <rect x="50" y="50" width="100" height="50" fill="lightgreen" />
        <circle cx="200" cy="100" r="40" fill="orange" />
        <line x1="300" y1="50" x2="350" y2="150" stroke="purple" stroke-width="2" />
    </svg>
</body>
</html>

Explanation:

  • viewBox=”minX minY width height”: Defines the coordinate system for the SVG.
  • style=”width: 100%; height: auto;”: Makes the SVG responsive.

7. Embedding External SVG

You can embed external SVG files using <img> or <object> tags.

Example 6: Embedding External SVG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embed External SVG</title>
</head>
<body>
    <h1>Embedding External SVG</h1>
    <!-- Using <img> -->
    <img src="example.svg" alt="External SVG" width="200">

    <!-- Using <object> -->
    <object type="image/svg+xml" data="example.svg" width="200"></object>
</body>
</html>

Explanation:

  • <img>: Embeds SVG as an image.
  • <object>: Allows interaction with the SVG content.

8. Interactive SVG with JavaScript

Add interactivity to SVG elements using JavaScript.

Example 7: Interactive SVG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive SVG</title>
</head>
<body>
    <h1>Interactive SVG Example</h1>
    <svg width="300" height="200" style="border: 1px solid black;">
        <circle id="myCircle" cx="150" cy="100" r="40" fill="blue"></circle>
    </svg>
    <script>
        const circle = document.getElementById("myCircle");
        circle.addEventListener("click", () => {
            circle.setAttribute("fill", "green");
            alert("Circle clicked!");
        });
    </script>
</body>
</html>

Explanation:

  • JavaScript interacts with SVG elements using DOM methods like getElementById.
  • Event listeners can trigger actions on user interaction.

Conclusion

In this tutorial, you learned:

  1. How to create basic shapes in SVG.
  2. How to style and animate SVG elements.
  3. How to make SVG responsive.
  4. How to embed and interact with SVG.

SVG is a powerful tool for creating scalable, interactive, and visually appealing graphics. Experiment with these examples to enhance your web projects

0 comment
0 FacebookTwitterPinterestEmail