What is SVG?
Scalable Vector Graphics (SVG) is an XML-based format for two-dimensional vector graphics, text, styling, animation, and interactivity. Its geometric elements can scale without raster-resolution loss.
How SVG works
An SVG document is an XML tree of shapes, paths, text, paint rules, transforms, and references that a renderer resolves into a two-dimensional scene. Geometry remains editable and resolution-independent, although embedded raster images and filter effects still have finite sampling costs. SVG can be used as an image resource or integrated into a document, and those modes expose different scripting, styling, and linking behavior. It fits authoring, optimization, delivery, and raster-derivative generation for diagrams, icons, and illustrations.
Key facts
- 1An SVG’s
viewBoxestablishes its internal coordinate system independently of displayed width and height; incorrect values can crop artwork or add unintended whitespace at every rendered size. - 2External-file SVG used through an image element is more isolated than inline SVG in the document tree, so CSS inheritance, scripting, links, and accessibility behavior differ by embedding method.
- 3Text can remain selectable and searchable, but rendering depends on font availability unless fonts are embedded or glyphs are converted to paths, which sacrifices textual semantics.
When SVG matters
Use SVG for resolution-independent icons, logos, and diagrams when browser or tool support matches the required features. Sanitize untrusted files because SVG can contain scripts, links, and other active content.
Common use cases for file formats & compression
These examples cover file formats & compression broadly, not specifically SVG.
- Accepting heterogeneous uploads while producing a controlled set of delivery formats.
- Moving assets between cameras, editors, browsers, archives, and downstream APIs.
- Separating long-lived source files from compact derivatives optimized for a particular channel.
Working with file formats & compression
This guidance covers file formats & compression broadly, not just SVG.
A parser reads the file structure, identifies contained streams and metadata, and exposes them to a decoder or application. Conversion usually decodes the source representation and writes compatible information into a different structure or encoding.
This category covers file and bitstream formats, their structures, and the compression methods they use. A filename extension can be misleading, so evaluate the detected format, decoding support, metadata, transparency, color, timing, patents, and archival needs before choosing an output.
What you gain
- A suitable format preserves the properties a workflow actually needs.
- Standardized structures allow files to move between compatible tools and systems.
- Format conversion can improve delivery size, editability, or long-term accessibility.
What it costs
- Modern formats can save bandwidth but may need fallbacks for older clients and production tools.
- Converting to a simpler format can discard transparency, animation, metadata, color precision, or editability.
- Archival suitability, browser support, and editing support often favor different choices.
Before production
- 1Inspect the detected container, codec, MIME type, and magic bytes instead of trusting a suffix.
- 2Verify decoder support and preserve metadata, color, transparency, or timing when required.
- 3Retain the source when the chosen delivery format is lossy or tied to current software.