SVG (Scalable Vector Graphics)

SVG is a vector image format and a language for describing vector graphics.

An SVG file is not binary like many image files. It is plain text written in XML.

It describes shapes, colors, effects, and behavior.

Advantages of SVG

1. It can scale without losing quality.

Unlike raster images, SVG does not become blurry when you zoom in.

2. It often has a smaller file size.

SVG is usually lighter than raster images for icons, logos, and simple graphics.

But for very detailed or photo-like images, SVG files can become large.

3. It is dynamic.

You can change some parts of SVG with CSS and JavaScript, for example color, border, or effects.

Ways to Use SVG

1. With the img tag

<img src="path/to/image.svg" alt="Description" />

This is good for static images.

2. As a background image

background-image: url("image.svg");

This works like other background images.

3. As inline SVG

You can open the SVG file, copy its code, and paste it directly into HTML.

This is called inline SVG.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" />
</svg>

Why Inline SVG Is Useful

The main advantage is that you can style it directly with CSS.

For example, you can change its color on hover.

fill Property

The fill property changes the inside color of an SVG shape.

Example:

.icon {
fill: #2a2a2a;
}

.icon:hover {
fill: #03a9f4;
}

If fill is not set, the shape usually uses the current text color.

If you write fill: none;, the shape will have no fill and will be transparent inside.

Disadvantages of Inline SVG

1. It makes the HTML file bigger.
2. You cannot easily reuse the same image without copying the code.
3. It is harder to maintain and edit.
4. The browser cannot cache it like an external SVG file.

When to Use Each Method

• Use img for static SVG images.
• Use background-image for decorative backgrounds.
• Use inline SVG when you need to change color, add hover effects, focus effects, or animate the image.

SVG Is Best For

• icons
• logos
• buttons
• simple illustrations
• abstract graphics

SVG is usually not good for photographs.