SVG is a drawing made of instructions
SVG stands for Scalable Vector Graphics. An SVG file describes two-dimensional artwork using shapes, paths, text, colour and styling rules. A browser or design application reads those instructions and renders the image at the size it needs.
That is the reason an SVG logo can move from a 16-pixel favicon to a large screen without the soft edges associated with enlarging a PNG. The file is not tied to one fixed pixel grid.
Where SVG fits best
SVG is a strong default for web logos, icons, diagrams, simple illustrations and interface graphics. It can be styled with CSS, animated with browser APIs and inspected as structured markup, which makes it useful inside a modern design system.
- Responsive logos that need to stay sharp at every breakpoint
- Icons and UI illustrations with clean geometry
- Charts, maps and diagrams that benefit from accessible structure
- Brand artwork that needs controlled colour and transparency
When SVG is not the answer
SVG is not a magic upgrade for every image. A photograph with complex texture is usually better kept as a JPG or WebP. A vectorized photo may be the right creative treatment, but it is a reinterpretation of the photograph rather than a perfect pixel-for-pixel replacement.
For the best result, choose SVG because the artwork is made of shapes and paths—or because you intentionally want it to become that kind of artwork.
- SVG describes shapes, paths, text and styling instead of storing a fixed pixel grid.
- It is ideal for responsive logos, icons, diagrams and clean illustrations.
- Photographs usually belong in raster formats unless you want a stylized vector interpretation.