SVG stands for Scalable Vector Graphics. It is an XML-based format that can describe paths, rectangles, circles, text, colors, gradients, masks, and other drawing instructions. A browser or compatible application renders those instructions at the requested size.
Why SVG scales cleanly
A raster image records a fixed grid of pixels. A true vector element instead records geometry, such as the position and curve of a path. The renderer calculates the necessary screen pixels each time the SVG is displayed, so well-constructed shapes remain smooth at many sizes.
An SVG can still contain an embedded raster image. In that case, the outer file is SVG but the embedded pixels retain their original resolution limit. The extension alone does not guarantee that every element is vector.
Where SVG works best
SVG is especially useful for:
- logos and brand marks on websites;
- interface icons and symbols;
- diagrams, maps, and simple charts;
- illustrations built from clear shapes;
- responsive graphics shown at several sizes; and
- assets whose colors or paths need later editing.
Simple artwork can be compact because the file stores a small set of drawing instructions instead of a large pixel grid.
SVG on the web
An SVG can be loaded through an ordinary <img> element or included directly in page markup. The image approach is simple and works well for many assets. Inline SVG provides more styling and interaction options, but it also becomes part of the document and needs appropriate security handling.
A useful SVG normally has a viewBox, which defines its internal coordinate system. CSS or image dimensions can then control the rendered size without changing the geometry. Provide meaningful alternative text for informative images and mark purely decorative graphics appropriately.
Limitations and compatibility
SVG is not the best format for every picture. A photograph converted into thousands of paths can be larger and slower to render than an efficient raster file. Detailed tracing can also create shapes that are difficult to edit.
Some publishing, social media, office, and print systems do not accept SVG uploads or support only part of the format. A printer may request PDF or EPS, while an online form may require PNG or JPEG. Check the destination before preparing final files.
SVG is active markup rather than only passive pixel data. Use files from trusted sources and apply the sanitization rules required by your website or content platform.
Editing and conversion
Compatible vector editors can adjust paths, fills, strokes, and dimensions. Text remains editable only when it is stored as text and the necessary font is available; text traced from a bitmap normally becomes shapes.
If your only source is a clean PNG logo or icon, automatic tracing can create an SVG starting point. Use PNG2SVG, inspect curves and small details, and keep the original PNG for comparison. The PNG versus SVG guide can help you decide which version belongs in the final workflow.