SVG Images Explained: Sharp Logos and Icons at Different Sizes
Why do some logos stay sharp when enlarged? Vector graphics describe shapes rather than a fixed grid of pixels.
1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.
Prefer YouTube? Watch this video on our YouTube channel (opens in a new tab).
The six points in the video
This is a silent video. The headings, explanations and labels below reproduce the information on screen.
-
Step 1: SVG means scalable graphics
Scalable Vector Graphics is the full name of the format.
On-screen labels: Vector format; Two-dimensional artwork; Scalable shapes.
-
Step 2: Vectors describe the shapes
Paths and other elements define how the artwork is drawn.
On-screen labels: Paths; Shapes; Drawing instructions.
-
Step 3: Simple artwork suits it well
Logos, icons and diagrams often work well as vectors.
On-screen labels: Logo artwork; Interface icons; Simple diagrams.
-
Step 4: Photos have different needs
A detailed photograph is usually better served as a raster image.
On-screen labels: Photograph detail; Pixel-based image; Suitable photo format.
-
Step 5: Use the real vector source
Renaming a JPEG file does not turn its pixels into vector artwork.
On-screen labels: Original artwork; Correct file type; No renamed photo.
-
Step 6: Check the finished result
Review small details, useful descriptions and browser display.
On-screen labels: Small-size legibility; Appropriate alt text; Actual page preview.
A practical check for your business
Check a representative SVG at the size and background where the site uses it. Review sharpness, colours and an appropriate text alternative; preserve the editable source for later changes.
Sources and further detail
Common questions
Why do some logos stay sharp when enlarged?
Vector graphics describe shapes rather than a fixed grid of pixels. Use a suitable original for each kind of image.
Go further
More video tips
All 205 videos →
What Is a Favicon? A Small Website Branding Detail Explained
The favicon in the browser tab.
HTTP Status Codes Explained: What 200, 301, 404 and 500 Mean
The server response, explained.