In this lesson, you'll learn about SVG, which stands for Scalable Vector Graphics. SVG is a way to create images that can be resized without losing quality. Because SVG graphics are defined using XML, they are text-based and can be edited easily with a text editor.

What Is SVG?

• Scalable: SVG images look sharp at any size. They are ideal for logos, icons, and illustrations that need to scale up or down without becoming blurry.

• XML-Based: SVGs use XML syntax. This means you can directly write and edit SVG code within your HTML files.

• Interactive: SVG elements can be manipulated with JavaScript and styled with CSS. However, today we will focus only on the basic HTML usage of SVG.

Basic Structure of an SVG

An SVG image is placed inside an <svg> element. Here is a simple example that draws a circle:

Explanation:

• <svg width="200" height="200">:
  This creates an SVG container that is 200 pixels wide and 200 pixels tall.

• <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4" fill="yellow" />:

  • cx and cy set the center of the circle at (100, 100).
  • r sets the radius of the circle to 80 pixels.
  • stroke="green" draws a green border around the circle.
  • stroke-width="4" sets the width of the border to 4 pixels.
  • fill="yellow" fills the circle with yellow.

Another Example: SVG Rectangle with Text

Here’s another example that shows how you can draw a rectangle and add text inside it:

Explanation:

• <rect x="10" y="10" width="280" height="80" stroke="blue" stroke-width="3" fill="lightblue" />:
  Draws a rectangle positioned 10 pixels from the left and top, 280 pixels wide and 80 pixels tall. The rectangle has a blue border (3 pixels wide) and is filled with light blue.

• <text x="150" y="55" font-size="20" text-anchor="middle" fill="darkblue">Hello, SVG!</text>:
  Places text inside the SVG. The text is centered horizontally at x=150 (half of 300) and at y=55, with a font size of 20 and a dark blue color.

SVG is a powerful way to include graphics in your web pages that are both scalable and editable. As you progress, you can explore more features of SVG for creating interactive graphics and animations.