WEB DEVELOPMENT

Home › Glossary › Web Development· 405 ·

SVG

\ˌɛs viː ˈdʒiː\abbr.

Filed underWeb DevelopmentDesign

In brief · quick answer

SVG (Scalable Vector Graphics) is an XML-based vector image format that defines graphics using mathematical shapes rather than pixel grids.

§ 1 Definition

SVG is to graphics what HTML is to text. It is a markup language that describes two-dimensional vector graphics. Unlike raster formats (PNG, JPEG), SVG images are resolution-independent. They scale to any size without losing quality. SVG files are text-based, meaning they can be created and edited with any code editor, styled with CSS, manipulated with JavaScript, and compressed with gzip. SVG supports shapes (rectangles, circles, paths), text, gradients, filters, masks, clipping, and animation. Browser support is universal. SVG is essential for responsive web design, icons, logos, data visualization, and interactive graphics. If you are shipping PNG files for simple icons on a responsive site, you are doing it wrong.

§ 2 How it works

SVG elements are drawn in the order they appear (painter's model). Each element has coordinates, dimensions, fill, stroke, and other visual properties. The `viewBox` attribute defines the coordinate system and aspect ratio. SVG can be embedded directly in HTML (inline SVG), linked via `<img>`, or used as a CSS background image. Inline SVG is preferred when you need styling, scripting, or interaction.

§ 3 Performance considerations

SVG files are often smaller than equivalent raster images for simple graphics. Complex SVGs with many paths can be larger and slower to render than compressed JPEGs. Optimize SVGs by removing unnecessary metadata, simplifying paths, and using tools like SVGO. Too many DOM nodes from inline SVGs can slow down page rendering.

§ 4 Common misconception

SVG is not only for simple icons. Modern browsers render complex SVGs with thousands of paths efficiently. SVG supports 3D-like effects through transforms and filters. It is used for data visualization (D3.js), maps, and even games. The limitation is your skill with the format, not the format itself.

§ 5 Note

SVG elements support CSS styling and JavaScript event handlers. You can animate SVG properties with CSS transitions, CSS animations, or the Web Animations API. SVG sprites combine multiple icons into one file for efficient caching.

§ 6 In code

```svg
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3498db"
          stroke="#2c3e50" stroke-width="4"/>
</svg>
```

§ 7 Common questions

Q. What is the difference between SVG and canvas?: A. SVG is a declarative vector format with a retained DOM. Canvas is an imperative pixel-based API. SVG is better for resolution-independent graphics. Canvas is better for performance-intensive rendering like games.
Q. Can SVG be animated?: A. Yes. SVG can be animated with CSS, JavaScript, or SMIL (declarative animation within the SVG).

Key takeaways

SVG is a vector image format that scales infinitely without quality loss.
SVG is text-based, stylable with CSS, and scriptable with JavaScript.
Use SVG for icons, logos, illustrations, and data visualization.

How Atomic Glue helps

Atomic Glue creates and optimizes SVG assets for responsive, high-quality graphics. From icons to full illustrations, our Creative Services deliver vector perfection.

Get in touch

# SVG

SVG (Scalable Vector Graphics) is an XML-based vector image format that defines graphics using mathematical shapes rather than pixel grids.

Category: Web Development (also: Design)

Author: Atomic Glue Team

## Definition

SVG is to graphics what HTML is to text. It is a markup language that describes two-dimensional vector graphics. Unlike raster formats (PNG, JPEG), SVG images are resolution-independent. They scale to any size without losing quality. SVG files are text-based, meaning they can be created and edited with any code editor, styled with [CSS](/glossary/css), manipulated with [JavaScript](/glossary/javascript), and compressed with gzip. SVG supports shapes (rectangles, circles, paths), text, gradients, filters, masks, clipping, and animation. Browser support is universal. SVG is essential for responsive web design, icons, logos, data visualization, and interactive graphics. If you are shipping PNG files for simple icons on a responsive site, you are doing it wrong.

## How it works

## Performance considerations

## Common misconception

## Note

## In code

## Common questions
Q: What is the difference between SVG and canvas?
A: SVG is a declarative vector format with a retained DOM. Canvas is an imperative pixel-based API. SVG is better for resolution-independent graphics. Canvas is better for performance-intensive rendering like games.
Q: Can SVG be animated?
A: Yes. SVG can be animated with CSS, JavaScript, or SMIL (declarative animation within the SVG).

## Key takeaways

SVG is a vector image format that scales infinitely without quality loss.
SVG is text-based, stylable with CSS, and scriptable with JavaScript.
Use SVG for icons, logos, illustrations, and data visualization.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/svg