SVG (Scalable Vector Graphics) files

What is an SVG File?

An SVG (Scalable Vector Graphics) file is a text-based image format that describes vector graphics using XML code. Unlike JPEG or PNG, which store pixels, SVG describes shapes like lines, circles, and paths using mathematical instructions. This makes SVG images:

• Infinitely scalable without losing quality.
• Lightweight for simple graphics.
• Editable with any text editor.
• Stylable and animatable with CSS/JavaScript.

Example: SVG is Just Code

Here’s a simple SVG code for a blue circle:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="skyblue" />
</svg>

• This draws a circle with:
  • Center at (50,50)
  • Radius = 40
  • Blue fill, black border

You can save this text in a .svg file and open it in any browser.

Key Features of SVG

• Text-based: Easy to read and modify.
• Vector graphics: Perfect for icons, logos, and illustrations.
• Interactive: Supports CSS styling, hover effects, and JavaScript animations.
• Web-native: Supported by all modern browsers.
• Can be embedded inline in HTML or used as a static file.

Example Use in HTML

<img src="icon.svg" alt="My Icon">

Or inline:

<svg width="50" height="50">
  <rect width="50" height="50" style="fill:#4B9CD3;" />
</svg>

Summary

• SVG = Code for Images.
• Great for clean, scalable graphics.
• Easy to customize and tiny in file size for simple designs.