# SVG vs PNG: vector or pixels for logos and graphics [Canonical HTML page](https://gradiently.design/guide/svg-vs-png) An SVG is a set of drawing instructions. A PNG is a fixed grid of dots. That one difference decides which file belongs on your website, your packaging and your Instagram. ## The short version - SVG is a vector format that describes shapes with maths, so it stays perfectly sharp at any size. - PNG is a raster format made of a fixed grid of pixels, so it goes soft or blocky when enlarged beyond its size. - Use SVG for logos, icons, simple illustrations and interface graphics on websites and in print. - Use PNG for photographs, textures, complex artwork and anything uploaded to social platforms, which do not accept SVG. - A good logo kit contains both: an SVG master and PNG exports at the sizes each place needs. **SVG vs PNG** is really vector against pixels. An SVG file stores shapes as instructions (draw a circle here, fill it this colour), so a browser or printer redraws it crisply at any size, from a 16 pixel favicon to a shop sign. A PNG stores a fixed grid of coloured pixels, so it looks perfect at its own size and soft when you enlarge it. Use SVG for logos, icons and simple graphics on the web and in print. Use PNG for photos, textured artwork and anything you upload to social media. ## What an SVG file actually is SVG stands for Scalable Vector Graphics, and it is plain text. Open one in a code editor and you will see readable markup, not noise. That is why SVGs are tiny for simple shapes, why you can change their colour with CSS, and why search engines and screen readers can read the text inside them. ```html ``` A complete logo mark in a few hundred bytes. The `viewBox` sets the drawing's coordinate system; the size it displays at is up to the page. A PNG of the same mark needs a separate file for each size you want it sharp at, and none of them can be recoloured without exporting again. The [MDN SVG documentation](https://developer.mozilla.org/en-US/docs/Web/SVG) covers the format in full. ## SVG vs PNG side by side | Property | SVG | PNG | | --- | --- | --- | | Type | Vector: shapes and paths | Raster: a grid of pixels | | Scaling | Sharp at every size | Sharp at its own size, soft when enlarged | | Transparency | Yes | Yes, full alpha channel | | Photos and texture | Poor: files become huge or impossible | Excellent | | Editable with code | Yes: colours, animation, CSS | No | | Social media upload | Not accepted | Accepted everywhere | | Typical size, simple logo | 1 to 10 KB | 10 to 100 KB per size | ## SVG or PNG for a logo Keep the master logo as SVG. It is the only file that serves every future use: a website header, a 4 metre banner, embroidery, a letterhead, a favicon. Then export PNGs from it for the places that cannot take vectors, mostly social platforms, email signatures and some presentation tools. | Where the logo goes | File | Size | | --- | --- | --- | | Website header and footer | SVG | Scales to fit | | Favicon | SVG plus PNG fallbacks | ICO at 32×32, PNGs at 180×180, 192×192 and 512×512 | | Instagram, LinkedIn or X profile picture | PNG | 1080×1080 square, keep the mark inside the centre circle | | Email signature | PNG | Up to 600×200, exported at twice the display size | | Printer, signmaker, merchandise | SVG or PDF | Vector, any size | One SVG master, a handful of PNG exports. [Logo sizes](https://gradiently.design/guide/logo-sizes) and [logo variations](https://gradiently.design/guide/logo-variations) go further. A square profile picture with a simple wordmark centred on a gradient background Profile pictures are always PNG or JPG. Export the logo large, 1080×1080, so it stays crisp on high density screens. ## When PNG is the right choice Vector only works when the image can be described as shapes. As soon as an image has photographic detail, soft light, grain or thousands of subtle colour changes, a PNG is smaller and more faithful. Tracing a photo into an SVG produces a file that is both heavier and worse. - Photographs and photo collages. - Textured artwork: grain, paper, brush strokes, film effects. - Social posts, stories and carousels, since platforms only accept pixels. - Screenshots and anything captured from a screen. - Rich backgrounds with layered light and noise. A square graphic labelled Vector, representing flat shapes suited to SVG Flat shapes, clean edges, a few colours: ideal SVG territory. A square graphic labelled Pixels on a textured gradient, representing artwork suited to PNG Grain, soft light and material texture belong in a PNG. ## SVG vs PNG for a website On a site, use inline SVG or an SVG file for logos, icons and illustrations, and modern formats for photos. SVG icons scale with text, can take `currentColor` so they follow your theme, and need no separate files for high density screens. For raster images, [WebP](https://gradiently.design/guide/webp-images) is usually a better choice than PNG on your own pages. ### Avoid - A PNG logo stretched to fill a wide header - A photo traced into a huge SVG - Uploading SVG files you did not make without sanitising them - Icons as PNGs that need 1x, 2x and 3x copies ### Do - SVG logo with a width set in CSS - Photos as WebP or JPG at the size they display - Treat user uploaded SVG as code, because it can contain scripts - SVG icons with `fill: currentColor` > **SVG can carry code** Because SVG is markup, a file from an unknown source can include scripts. Only allow SVG uploads on your site if they are sanitised, or convert them to PNG on upload. ## How to convert SVG to PNG 1. **Decide the largest size you need** A profile picture at 1080×1080 or an email signature at 1200×400 (twice its 600×200 display size). Export once at that size rather than enlarging later. 2. **Export from the source** In Figma, Illustrator or Inkscape, export the frame as PNG at the chosen size. Exporting from the vector keeps every edge sharp. 3. **Keep transparency on** Leave the background empty so the PNG has an alpha channel. See [transparent background](https://gradiently.design/guide/transparent-background) for checking it. 4. **Check at 100%** Look at thin strokes and small type at actual size. If they break up, simplify the logo for small uses rather than shipping a muddy file. Going the other way, PNG to SVG, is not a conversion but a redraw. Auto tracing works for a bold, flat logo and fails for anything with texture or soft edges. If your logo only exists as a PNG, have it redrawn once as a vector; every later file will be better for it. Gradiently's Pro exports cover both sides of this: a design can go out as SVG for the web and print, or as transparent PNG for platforms, from the same file. [Export SVG and transparent PNG](https://gradiently.design/guide/export-svg-transparent-png) shows how, and [PNG vs JPG](https://gradiently.design/guide/png-vs-jpeg) settles the other common choice. ## FAQ ### Is SVG better than PNG for a logo? For the master file, yes: an SVG logo stays sharp at every size and can be recoloured. Export PNG copies for social media and email, which do not accept SVG. ### Can I upload an SVG to Instagram? No. Instagram and other social platforms accept PNG, JPG and video. Export a PNG at the platform's size, such as 1080×1080 for a square post. ### Is SVG smaller than PNG? For simple shapes such as logos and icons, an SVG is usually much smaller. For photos and textured images, a PNG or JPG is smaller and more accurate. ### Does SVG support transparency? Yes. Anything not drawn in an SVG is transparent, so it sits cleanly on any background. ### Can I convert a PNG logo to SVG? Only by tracing or redrawing it. Automatic tracing works for bold flat logos; detailed or textured logos need to be redrawn by hand as vectors.