SVG is the only image format that genuinely belongs in HTML — it is text-based, resolution-independent, styleable with CSS, and animatable with JavaScript. Yet many developers still reach for PNG or JPEG when SVG would serve them far better.
Why SVG Outperforms Raster Formats for UI
One SVG file looks perfect on a 1x phone screen and a 5K monitor. A PNG needs separate @2x and @3x versions.
SVG elements respond to CSS — change fill colour, stroke width, or opacity without regenerating the file.
A simple SVG icon is often 200–800 bytes. The equivalent PNG is 3–10KB including the alpha channel.
Inline SVG text and title elements are readable by screen readers and search engines.
Inline SVG vs External SVG File
Inline SVG (pasted directly into HTML) enables CSS and JavaScript access to internal elements — essential for animated SVGs or SVGs that need to respond to user interaction. External SVG (referenced via img src or CSS background-image) is simpler and cacheable but locks you out of per-element styling.
SVG Blob Shapes in Practice
Organic blob shapes use the SVG path element with cubic Bezier curves to create smooth, non-geometric closed shapes. They work as background decorations behind hero images, as clip-paths masking photographs into organic shapes, and as icon containers that break the rigid circle-or-square dichotomy.
Generate unique blob shapes instantly with the SVG Blob Generator — each click produces a new organic shape with your chosen colours. Download as SVG and paste directly into your HTML.
Optimising SVG for Production
Raw SVG files from design tools contain extensive metadata, comments, and unused definitions. Run them through SVGO (available as a Node package or online tool) before shipping. Typical reduction is 40–70% without any visual change.
SVG Animation Techniques
CSS animations on SVG elements use the same syntax as HTML animations but with access to SVG-specific properties. The stroke-dasharray and stroke-dashoffset properties animate path drawing — a technique widely used in logo reveal animations, progress indicators, and illustrated loading sequences. The animation sets stroke-dasharray equal to the total path length (obtained via JavaScript's getTotalLength() method), then animates stroke-dashoffset from the full length to zero, making the stroke appear to draw itself from start to finish.
SMIL (Synchronized Multimedia Integration Language) animations are defined directly in SVG markup using animate, animateTransform, and animateMotion elements. SMIL animations work without CSS or JavaScript and are part of the SVG specification. However, Internet Explorer never supported SMIL, and Chrome briefly announced deprecation before reversing the decision — CSS animations are generally preferred for their broader tooling support and consistency with web platform conventions, though SMIL remains useful for SVG animations that must work in environments without CSS.
SVG Sprite Technique for Icons
The SVG sprite pattern consolidates multiple SVG icons into a single file, reducing HTTP requests from one per icon to one total. The sprite file defines each icon as a symbol element with a unique ID. Individual icons are referenced using the use element with an xlink:href attribute pointing to the symbol ID. The single sprite file is cached by the browser; subsequent pages reference the same cached file without additional requests.
Modern SVG sprites embed the sprite directly in the HTML document rather than referencing an external file, allowing CSS to style the icons with custom properties that respond to theme changes and interaction states. An icon's fill colour changes on hover with a single CSS rule targeting the svg's fill property. Dark mode support is automatic if icons use currentColor (inheriting the text colour of the parent element) rather than hardcoded colour values. This pattern is used by GitHub, Basecamp, and most design-system-driven web applications for their icon systems.
Generate organic SVG blob shapes for backgrounds and UI elements with the SVG Blob Generator. Custom colours, gradients, instant SVG download.