What is SVG?

SVG is the standard vector image format for the web. The name comes from Scalable Vector Graphics. Unlike photographs and most traditional image formats, an SVG file does not store pixels but geometric shapes: lines, circles, rectangles, curves and strokes described by mathematical coordinates. That is why it can be enlarged or reduced to any size without looking blurry, takes up very little space, and can be edited with code, just like a web page.

This article explains what SVG is, how a vector image differs from a bitmap image, what its main advantages are, what an SVG file looks like on the inside, the different ways to use it on a web page, when it is the right choice, and which tools are used to create it.

What SVG means and what it is for

SVG is an XML-based image format, created and maintained as an open standard by the W3C, the same organization that defines HTML. Instead of storing a grid of colored dots, an SVG describes the image with text tags that say which shapes to draw and where: a circle with a given center and radius, a rectangle with a given corner and size, a curve joining given points. The browser reads those instructions and draws the image on screen in real time, with no external programs or plugins required.

Because it is an open standard, any program can read and write SVG files without paying licenses, and every modern browser displays them natively. Since it is structured text, SVG behaves more like a document than like a photograph: you can open it in a code editor, change a color by editing a single value, and the change is reflected instantly. That is why the same file looks sharp on a small phone screen and also on a billboard: the browser recalculates the shapes at every size.

Vector images versus bitmap images

To understand what SVG is, it helps to compare it with the formats everyone knows, such as JPG or PNG. Those images are bitmaps, also called raster images: they are made of a grid of pixels, and each pixel stores one color. If you enlarge them too much, you start to see the little squares and the image looks pixelated or blurry, because the stored information is not enough to define more detail than it already has.

A vector image such as SVG works the other way around: it does not store colored dots but the geometric description of every shape. A circle is stored as a center, a radius and a fill color, regardless of the size at which it will be displayed. When you zoom in, the program simply recalculates the shape with the same proportions and the result is just as sharp. The following table summarizes the main differences:

Aspect	SVG (vector)	Bitmap (JPG, PNG)
Basic unit	Geometric shapes and coordinates	Colored pixels
Scaling	Unlimited, no quality loss	Fixed; zooming in causes pixelation
File size	Very light for simple graphics	Grows with resolution
Sharpness at any size	Always sharp	Only at its original resolution
Editing with code	Yes, it is readable text	No, it requires editing software
Typical use	Logos, icons, illustrations, charts	Photographs and complex scenes

In short: a bitmap stores the result of an image, while a vector stores the recipe for drawing it. That is why SVG adapts to any screen without losing definition, whereas a bitmap photo only looks perfect at the size it was created for.

Advantages of using SVG on the web

SVG has become the preferred choice for many web design elements because it combines advantages that no bitmap format offers at the same time:

Perfect scaling: the same file works for a 16-pixel icon and for a full-screen banner, with no duplicate versions and no loss of sharpness.
Very light weight: a simple icon or logo usually takes less than one kilobyte, far less than its PNG equivalent, which speeds up page loading.
Editable with code: because it is text, you can change the color, the stroke thickness or the shape of a figure with a plain editor, without reopening the design program.
Animatable: SVG shapes can be animated with CSS or JavaScript, making it possible to create transitions, motion and interactions without video or heavy libraries.
Real text inside the image: if a logo contains words, the browser treats them as selectable text, which improves accessibility and search engine visibility.
Transparent background and effects: it supports transparency, gradients, shadows, filters and masks applied with CSS to individual shapes.
Standard and compatible: it works in every modern browser, and can be saved as a file, embedded in the HTML, or generated from JavaScript.

What an SVG file looks like on the inside

An SVG file is plain text with a .svg extension that contains XML tags. To get an idea, here is a very simple example: a blue circle with a white square in the center, drawn on a canvas of one hundred by one hundred units.

</svg>

Each tag has a clear meaning. The root svg tag defines the canvas and its coordinate system through the viewBox attribute, which states the visible area; the xmlns attribute declares that this is an SVG document. The circle tag draws a circle: cx and cy set the position of the center, r the radius and fill the fill color. The rect tag draws a rectangle with its top-left corner at x and y, and with the width and height given in width and height. Many more tags exist, such as path for complex curves, line, polygon, ellipse or text, but the idea is always the same: shapes described by coordinates and attributes.

How to use SVG on a web page

There are three common ways to include an SVG graphic on a page, and each one has its recommended use:

As an external file in an img tag: save the SVG in a file with a .svg extension and reference it like any other image. For example: <img src="logo.svg" alt="Company logo" />. This is the simplest approach and lets the browser cache the file, while also providing alternative text for accessibility. The limitation is that the inside of the graphic cannot be modified with CSS from outside.
Embedded directly in the HTML: paste the SVG code inside the page, for example: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" /></svg>. Because it is part of the document, every shape can be colored, animated or styled with CSS and manipulated with JavaScript, which makes it ideal for interactive icons.
As a CSS background: use the SVG as the background image of an element, with rules such as .icono { background-image: url("icono.svg"); }. This is practical for buttons, decorative backgrounds or icon sets, and size and position can be adjusted from the style sheet.

When to use SVG and when not to

SVG is the best choice for any graphic made of flat shapes, strokes and defined colors. The most common cases are:

Logos and brands, which must look sharp on business cards, screens and billboards.
Icons and pictograms for interfaces, menus and buttons.
Data charts, diagrams and infographics, which can also be updated with JavaScript.
Flat illustrations, decorative elements and schematic maps.

On the other hand, SVG is not suitable for photographs. A photo contains millions of tones, subtle gradients and irregular textures that cannot be described with a few shapes: converting it to vector would produce an enormous, heavy file that is hard to load, or a simplified version that loses all realism. Cameras capture pixels, so for photos it is better to keep using bitmap formats such as JPG, WebP or PNG. As a rule of thumb: if the image is a photo or contains photographic textures, use a bitmap; if it is a drawing with defined shapes and colors, use SVG.

Tools for creating and editing SVG

Any SVG can be written by hand in a text editor, because at the end of the day it is code. For more complex work there are tools that draw for us and export the result in this format:

Desktop vector editors: Inkscape is free and open source; Adobe Illustrator and Affinity Designer are professional paid options.
Interface design tools: Figma and Penpot let you design icons and components and export them as web-ready SVG files.
Code editors: programs such as VS Code show SVG code with syntax highlighting and allow previewing it, which is useful for fine-tuning details or generating graphics with scripts.
Optimizers: tools such as SVGO clean up the code produced by design programs and reduce file weight, a recommended step before publishing.
Icon libraries: open source collections such as Feather or Bootstrap Icons offer thousands of SVG files ready to download and customize.

A good way to learn is to take an existing SVG icon, open it in a code editor and change colors, sizes and positions to see how each attribute responds. In a short time you understand the logic of the format and start taking advantage of its flexibility.

Conclusion

SVG is the standard vector image format of the web: light, infinitely scalable, animatable, editable with code, and compatible with every modern browser. For logos, icons, charts and illustrations made of shapes, it is almost always the best choice; for photographs, on the other hand, bitmap formats still rule. Knowing what SVG is and when to use it helps you build pages that are faster, sharper and easier to maintain.

If you want to keep learning about technology applied to everyday work, you will find more practical guides explained step by step in Kardex Tauro.

Labels:

#svg #vector image #vector graphics