SVG: Code-Based, Infinitely Scalable Graphics
Think of SVG as HTML for graphics. It's an XML file with drawing instructions, not pixels, so images scale perfectly. It's ideal for logos and icons on responsive sites. The footgun: SVGs can contain JavaScript, posing a security risk (XSS) if not sanitized.
Why it exists
Web graphics needed a format that wasn't tied to a fixed pixel resolution. As screen sizes and resolutions diversified, raster images like PNG or JPG either became blurry when scaled up or wasted bandwidth when served at unnecessarily high resolutions. A resolution-independent, scalable format was needed for the modern web.
The mental model
Think of SVG as HTML for graphics. An SVG file is not a map of colored pixels. It's an XML document that describes shapes, lines, and curves with their positions and colors. A browser reads these instructions and renders the image, just as it reads HTML to render a webpage. This means the graphic is always perfectly sharp, no matter the display size.
How it works
An SVG file is plain text XML. You can open it in a text editor and see tags like <circle>, <rect>, and <path> with attributes defining their geometry and appearance (e.g., cx, cy, r for a circle; fill for color). Because SVG elements can be part of the DOM, they can be targeted and manipulated with CSS for styling (like changing colors on hover) and JavaScript for interactivity (like animating a chart).
When to use it
Use SVG for graphics that must be resolution-independent and scalable. This includes logos, icons, and user interface elements that must look crisp on everything from a watch to a 4K monitor. It is also the standard for data visualizations and interactive charts, where elements need to be dynamically generated and updated via code.
When not to use it
SVG is not suitable for complex, photorealistic images. A photograph contains millions of nuanced color details that are efficiently stored in a raster format like JPEG. Representing a photo with vector shapes would result in an astronomically large and complex SVG file that would be slow to render and would lose all photographic detail. Stick to JPEG, PNG, or WebP for photos.
One canonical example
A simple company logo. As a PNG, you would need multiple sizes (logo.png, logo@2x.png) to look sharp on different displays. As an SVG, a single logo.svg file can be scaled with CSS (width: 50px or width: 500px) and will render perfectly in all contexts. Its color can even be changed with CSS's fill property to match a dark mode theme, without needing a second image file.
Interview question
Which characteristic primarily makes SVG ideal for logos and icons on responsive websites, unlike raster formats?
- a.They offer superior color depth and photorealistic detail compared to raster images.
- b.They are typically much smaller in file size compared to equivalent high-resolution raster images.
- c.They maintain perfect sharpness and clarity regardless of display resolution or scaling.Correct
- d.Their ability to be easily manipulated with JavaScript for complex animations.
Why? this is the answer
The card states SVG is "resolution-independent" and "infinitely scalable," ensuring graphics are "always perfectly sharp, no matter the display size." This consistent visual quality across varying resolutions is the primary benefit for responsive design. While SVG can be manipulated and often has smaller file sizes, these are secondary to its core scalability advantage for logos and icons.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles