What is SVG, and why designers use it
Search intent: Beginner orientation
SVG (Scalable Vector Graphics) describes shapes in XML. It does not store “this pixel is this colour” — it stores “draw a line from here to there and fill it with this”. So it survives a 10× zoom, a video wall and a printed panel without pixelation. For interface work, the more important property is that one file is both an image and code you can edit.
Contents
- How it differs from PNG and JPG
- Reading an SVG file
- Three ways to embed it — each decides how much you can change
- Choosing assets on ATSvg
How it differs from PNG and JPG
A bitmap stores a pixel matrix and has to be re-exported whenever the size changes. SVG stores paths, and the browser computes size from the viewBox at render time. For a simple line icon, PNG means preparing 1×, 2× and 3× versions; SVG means one file that is often a few hundred bytes. The trade-off: complex photographs, gradient meshes and realistic lighting do not belong in SVG — those are still better as bitmaps.
- Lossless scaling: the same file works as a 16px icon and a 300px poster
- Recolourable: set fill / stroke to currentColor and it follows the text colour
- Controllable from CSS and script: hover states, stroke animation, theme switching
- Small when optimised: a trimmed path is usually smaller than the equivalent PNG
- Accessible: title / desc can carry meaning for screen readers
Reading an SVG file
Open any icon file and it is usually a handful of lines: an outer svg element defining the viewBox (the internal coordinate grid), then one or more path / circle / rect elements. viewBox="0 0 24 24" means the artwork is drawn inside a 24×24 grid; the displayed size comes from width / height or from CSS. To change colour you only need two attributes: fill and stroke.
<svg viewBox="0 0 24 24" width="24" height="24" fill="none"
stroke="currentColor" stroke-width="2">
<path d="M5 12h14M13 6l6 6-6 6"/>
</svg>Three ways to embed it — each decides how much you can change
Referencing an external .svg with an img tag is the simplest and the browser caches it, but page CSS cannot reach inside the file and currentColor will not inherit. Inlining the SVG markup directly into the HTML gives you full control through CSS variables, pseudo-classes and animation, at the cost of longer HTML and no separate caching. The third route is CSS mask: the external file still caches, colour comes from background-color, but only the shape survives — internal multi-colour detail is lost.
- img reference: good for icons that repeat in lists and never change colour
- Inline SVG: good for the few icons that must follow the theme — buttons, status indicators
- CSS mask: good for a whole set that needs single-colour treatment while keeping external caching
Choosing assets on ATSvg
Every asset page states size, style and licence. For product interfaces, start with 24×24 line or filled icons and try to take the whole set from one source library. For large hero imagery, move on to illustrations and clip art. Once chosen you can download the SVG directly, or export a bitmap with the built-in SVG to PNG tool.
FAQ
Related assets · 12 assets
