SVG

SVG (Scalable Vector Graphics) is an XML-based format for two-dimensional vector graphics, standardized by the W3C. Files use the .svg extension and the image/svg+xml media type. Instead of storing pixels, an SVG file describes shapes, paths, text, gradients and filters as markup, which the viewer draws at any size.

Because SVG is text, it can be edited in a code editor, compressed with gzip, styled with CSS and changed with JavaScript. Browsers render SVG natively, and design tools export it for icons, logos and illustrations. An SVG file can also contain embedded raster images, but then those parts behave like any other bitmap.

Vector vs raster

	Vector (SVG)	Raster (PNG, JPG, WebP)
Stores	Shapes and paths	Pixels
Scaling	Sharp at any size	Blurs when enlarged
Best for	Icons, logos, diagrams	Photos, screenshots
File size	Grows with complexity	Grows with pixel count

Where SVG is used

• Website logos and icon sets.
• Charts and diagrams generated by code.
• Illustrations and simple animations on web pages.
• Favicons in browsers that support SVG favicons.

SVG and screenshots

A screenshot is a grid of pixels, so it is a raster image by nature. Saving it inside an SVG file does not make it scalable; the embedded bitmap still blurs when enlarged. Tracing tools can convert a screenshot into vector paths, but the result rarely matches small interface text and is much larger.

Where SVG fits in screenshot-heavy workflows

SVG works well for the parts around a screenshot: arrows, callouts, logos and diagrams that explain the image. A common pattern is a PNG or WebP screenshot for the interface, with SVG icons and annotations placed over it on a web page.

Common mistakes

• Embedding a large PNG in an SVG and calling it a vector file.
• Uploading SVG to platforms that accept only PNG or JPG.
• Opening untrusted SVG files without care, since SVG can contain scripts.

Have an image to fix right now?

Convert a screenshot between PNG, JPG and WebP with the Image Converter, or reduce its size with the Image Compressor.

Common questions

Can I save a screenshot as SVG?

You can wrap it in an SVG file, but it stays a bitmap. Use PNG for screenshots.

Is SVG smaller than PNG?

For simple shapes, usually yes. For detailed images and screenshots, usually no.

Sources

• Scalable Vector Graphics (SVG) 2 (W3C)
• SVG (MDN)

Related resources

• Image converter: PNG, JPG and WebP conversion.
• Screenshot annotation tool: add arrows and labels to a screenshot.
• Export formats: raster formats Temposhot exports.