File Formats Explained: PNG, JPG, PDF and SVG
Formats are delivery languages
Every design ends as a file, and the format you choose decides how sharp it looks, how big the file is, and what it can be used for. Choosing the wrong format is the most common mistake new designers make - and it is completely avoidable.
Raster vs vector
Formats split into two families. Raster formats store a grid of pixels - great for photos, but they blur when enlarged. Vector formats store shapes and curves as maths - they stay razor sharp at any size. Logos should always be vector.
The four formats you need
| Format | Family | Best for |
|---|---|---|
| PNG | Raster | Graphics, logos and text on transparent backgrounds |
| JPG | Raster | Photos and large images where file size matters |
| Vector-friendly | Print-ready files, documents and client delivery | |
| SVG | Vector | Web logos and icons that must stay sharp at any size |
PNG vs JPG - the everyday choice
PNG is sharp and supports transparent backgrounds - best for graphics, logos and anything with text. JPG compresses to a smaller file - good for photos, but it softens sharp edges and text. When in doubt for graphics, choose PNG.
Transparent backgrounds
A transparent background lets your design sit on top of any colour or photo - essential for logos. PNG and SVG support transparency; JPG never does. In Canva, turn off the background or export as PNG; in GIMP or Photopea, hide the background layer before exporting.
Tip: A logo exported as JPG will show a white box over your photos. Always hand clients a transparent PNG and an SVG as well.
Warning: Do not rename a JPG file to .png - the format does not change, only the name. Always re-export from the design tool.
Practical exercise
Build a format reference sheet:
- Create a design with a logo and text
- Export it as PNG, JPG and PDF
- Compare the file sizes and how text looks in each
- Note which format you would use for each job
Check your understanding
Which formats support transparency? PNG and SVG.Which format is best for photos? JPG - it compresses to a smaller file.What is the difference between raster and vector? Raster is pixels that blur when enlarged; vector is shapes that stay sharp at any size.
Answer the questions out loud or on paper. If any are hard, re-read this lesson before moving on.
This is a free preview lesson
Enroll in the Graphic Design Fundamentals for PC to unlock every lesson, lesson PDF guides, quizzes and your certificate - and start creating your own pieces today.