Glossary

What Is SVG (Scalable Vector Graphics)?

SVG (Scalable Vector Graphics) is an XML-based vector image format standardized by the W3C that describes two-dimensional graphics using geometric primitives such as paths, circles, rectangles, and text nodes rather than a pixel grid. Because SVG elements are resolution-independent mathematical descriptions, they render sharply at any size or display density without file size penalties. SVG files can be embedded directly in HTML, styled with CSS, and manipulated with JavaScript, making them first-class DOM citizens unlike raster formats such as PNG or JPEG.

What Is SVG (Scalable Vector Graphics)?

How SVG (Scalable Vector Graphics) Works

SVG documents are well-formed XML, so every shape, gradient, and text element is a node in a tree structure governed by the SVG 1.1 and SVG 2.0 W3C specifications. A path element, for example, uses a compact 'd' attribute containing commands like 'M' (moveto), 'L' (lineto), 'C' (cubic bezier curve), and 'Z' (closepath) to trace any arbitrary shape mathematically. The browser's rendering engine parses this XML, constructs an SVG DOM separate from but composable with the HTML DOM, and hands the geometry to the graphics pipeline for rasterization at the current viewport resolution. This rasterization step happens at paint time, which is why the same SVG vector looks crisp on a 1x screen and a 4x Retina display without any separate asset. SVG integrates with CSS in the same way HTML elements do. Properties like 'fill', 'stroke', 'stroke-width', 'opacity', and 'transform' can be declared inline, in a style attribute, or in an third-party stylesheet. CSS selectors target SVG elements by tag name, class, or ID, allowing themes and hover states to be applied without JavaScript. CSS animations and transitions work natively on SVG properties, enabling smooth color changes, path morphing with offset-path, and transform-based animations that are GPU-accelerated when using 'transform' and 'opacity' exclusively. Inline SVG (SVG markup embedded directly inside HTML) is the most powerful embedding method because it exposes the SVG DOM to JavaScript running in the page context. Scripts can query SVG nodes with standard selectors, update attribute values dynamically, and attach event listeners to individual shapes. The alternative embedding methods, using an 'img' tag or CSS 'background-image', are simpler but isolate the SVG from the DOM, preventing CSS variable inheritance and JavaScript interactivity. For icons and interactive diagrams, inline SVG or the 'use' element referencing a sprite sheet are the canonical production patterns. SVG also supports a 'viewBox' attribute that defines an internal coordinate system independent of the element's rendered width and height. Setting 'viewBox="0 0 24 24"' on an icon means all internal coordinates are authored on a 24-by-24 grid, and the browser scales that grid uniformly to whatever CSS dimensions are applied. Combining 'viewBox' with 'preserveAspectRatio' gives precise control over how the graphic fills its container, including letterboxing or cropping behaviors similar to CSS 'object-fit'.

Best Practices for SVG (Scalable Vector Graphics)

Always define a 'viewBox' attribute on every SVG used as an icon or logo so the graphic scales predictably regardless of the CSS dimensions applied to it, and omit fixed 'width' and 'height' attributes from inline SVGs so CSS retains full control over sizing. Use an SVG sprite sheet (a hidden inline 'svg' element containing 'symbol' definitions at the top of the page body) combined with 'use href="#icon-id"' references throughout the markup, rather than repeating full SVG paths in every component, which reduces HTML payload and centralizes updates. Run SVGs through SVGO before deploying to production because design tools like Figma and Illustrator export bloated XML with redundant metadata, editor comments, and unnecessary decimal precision that SVGO can compress by 40 to 70 percent without visual change. For accessibility, add a 'title' element as the first child of inline SVGs used as meaningful images and set 'role="img"' and 'aria-labelledby' pointing to that title's ID; for purely decorative SVGs, set 'aria-hidden="true"' so screen readers skip them.

SVG (Scalable Vector Graphics) & Canvas Builder

Canvas Builder generates Bootstrap 5 HTML where SVG icons and decorative graphics are embedded as clean inline markup, giving developers full CSS control over fill colors, sizes, and hover states through Bootstrap utility classes and custom properties without any additional asset pipeline setup. The exported HTML is fully editable, so replacing placeholder icons with optimized SVGO-processed vectors or a custom sprite sheet is straightforward, requiring only a text editor and no build tool reconfiguration. This approach means sites built with Canvas Builder inherit the performance and scalability benefits of SVG from the first export, rather than requiring a post-processing step to convert raster icons.

Try Canvas Builder →

Frequently Asked Questions

When should I use SVG instead of PNG or WebP for images?

Use SVG for any graphic that is geometric, iconic, or illustrative in nature: logos, icons, charts, diagrams, maps, and decorative patterns. PNG or WebP are appropriate for photographs and complex raster artwork where vector representation would be impractically complex or larger than the equivalent raster file. A practical rule is that if the source file came from a vector design tool (Figma, Illustrator, Inkscape) and contains no photographic content, export it as SVG.

Does inline SVG hurt HTML page performance?

Inline SVG adds to HTML document size but eliminates separate image HTTP requests, which is typically a net performance win for small assets like icons and logos. The tradeoff becomes unfavorable for large, complex SVGs (above roughly 5 KB each) because they bloat the initial HTML payload, delay parsing, and cannot be independently cached by the browser; those assets are better served as third-party '.svg' files via an 'img' tag or CSS background. For icon systems, the SVG sprite pattern keeps inline markup minimal while still enabling CSS styling.

How does Canvas Builder handle SVG in the HTML it generates?

Canvas Builder produces clean, production-ready HTML based on Bootstrap 5, and its output uses inline SVG for icons and decorative elements where resolution-independence matters, ensuring that exported sites look sharp on high-density displays without requiring additional image assets. The generated markup follows semantic conventions, including 'aria-hidden' on decorative SVGs and appropriate 'role' attributes on meaningful ones, so accessibility is addressed out of the box. Because Canvas Builder outputs raw HTML that developers can inspect and edit, teams can drop optimized SVG sprite sheets or custom vector assets directly into the generated structure without fighting framework abstractions.