What is SVG | viewBox | Scalable Vector Graphics | 1

Introduction

This tutorial will introduce you to Scalable Vector Graphics (SVG) and explain how to use the viewBox attribute effectively. You'll learn how to create shapes, define a coordinate system, and manage dimensions within SVG. Understanding SVG is essential for web development and graphic design as it allows for scalable, high-quality graphics.

Step 1: Understanding SVG

• What is SVG?

  • SVG stands for Scalable Vector Graphics.
  • It is used to describe two-dimensional graphics in XML format.
  • Unlike raster images, SVGs are resolution-independent and can be scaled without losing quality.

• Key Features of SVG:

  • Text-based format that can be created and edited with any text editor.
  • Supports interactive and animated graphics.
  • Can be styled with CSS and manipulated with JavaScript.

Step 2: Setting Up the Coordinate System

• Defining the Coordinate System:

  • SVG uses a coordinate system to define the position of shapes.
  • The origin (0,0) is located at the top-left corner.

• Creating an SVG Element:

  • Use the <svg> tag to create an SVG container.
  • Example:

    <svg width="200" height="200">
    </svg>
    

Step 3: Utilizing the viewBox Attribute

• What is viewBox?

  • The viewBox attribute allows you to specify the aspect ratio and coordinate system of the SVG.
  • It consists of four values: min-x, min-y, width, and height.

• Setting up viewBox:

  • Example of using viewBox:

    <svg viewBox="0 0 100 100" width="200" height="200">
    </svg>
    

  • This defines a coordinate system that starts at (0,0) and extends to (100,100).

Step 4: Creating Shapes in SVG

• Basic Shapes:

  • SVG supports various shapes such as rectangles, circles, and polygons.

• Creating a Rectangle:

  • Use the <rect> tag:

    <rect x="10" y="10" width="30" height="30" fill="blue" />
    

• Creating a Circle:

  • Use the <circle> tag:

    <circle cx="50" cy="50" r="20" fill="red" />
    

Step 5: Positioning and Sizing Shapes

• Positioning:

  • Adjust the x and y attributes for rectangles or cx and cy for circles to position shapes within the SVG.

• Sizing:

  • Change the width and height for rectangles and the r (radius) for circles to resize shapes.

• Common Pitfall:

  • Ensure that your shapes are within the defined viewBox to avoid clipping.

Conclusion

In this tutorial, you've learned the basics of SVG, how to set up a coordinate system, and how to use the viewBox attribute effectively. You also discovered how to create and position basic shapes within an SVG. As a next step, experiment with more complex shapes and styles, and consider integrating SVG graphics into your web projects for scalable and high-quality visuals.