SVG, PDF, JPG, PNG; What's the Difference?
There’s a lot to consider when designing a website. To make a good impression with a professional-looking website, you need more than just a good color scheme, eye-pleasing fonts, and relevant content. Graphics play an important part of making your site interesting. However, you need to make sure that you use the right graphic format for the best results.
With all the different formats available for graphics, we would like to explain the difference between some of the most commonly used types.
Scalable Vector Graphics (SVG)
The SVG graphic format was developed to be used to represent an image and its elements, which may include objects, drawings, and figures in XML.
This type of graphic file can be opened in any browser. SVG is used to create icons that are used on websites. An SVG image can be compressed or stretched without loss of image quality.
This format suitable for web pages that are viewed on devices that have a high pixel density, like smartphones or tablets. You can edit the file in an editor to change graphic settings on a website when you use CSS.
SVG image element files are smaller than if the image were present in a raster format. However, when using SVG, you need to remember that if an object in the image contains many small elements, the size of the file can grow very fast. A potential issue with SVG is that you cannot read only a part of the graphic object.
The entire object must load and it could slow things down with your website.
Portable Document File (PDF)
Developed by Adobe, PDF is a file format that can be used to provide an electronic image of text or text and graphic that looks the same as a printed document. A PDF file can be viewed, printed or electronically transmitted by uploading, downloading or attaching it to a message or email. The benefit of using a PDF format is that links can be embedded in the document and the file sizes are usually smaller than if you saved a document in its native format including its graphic files.
PDF files adhere to ISO 32000 standards for electronic document exchange. PDF files can be password protected to restrict access and prevent copying or tampering. They can also be used in instances where a legally binding electronic signature is needed. PDF files can be viewed by all browsers with the help of a plug-in.
Joint Photographic Experts Group (JPEG/JPG)
This standard was created by the Joint Photographic Experts Group and files that are created under this standard are generally a small file. With a JPG, the graphic is compressed to make the file small. For example, photos that are taken with a digital camera are usually in JPG format. This allows many images to be stored on the camera’s SDcard.
Because of their small size, JPGs are ideal for being used for photos on websites. However, they are not good for presenting logos, graphics or line drawings because during the compression process the image loses some of its detail. This makes images look like bitmaps with lines looking jagged.
Portable Network Graphics (PNG)
The PNG format is an open format that was created as an alternative to the GIF format, which required a licensing fee through the company that held a patent for the format. The PNG format offers a better quality graphic than a GIF with better compression and a wider range of color without loss of detail. Most newer browsers can view PNG formats without any problems.
PNG is used almost exclusively for images used on websites. Because of the size of a PNG file, this format is not recommended for photos as JPG is unless file size is not an issue. If you have a mixture of images that have line art and text, the PNG format will make the image look sharper instead of appearing bitmapped. The higher levels of PNG support transparency like GIFs do. This makes the PNG format suitable for web images like logos that you want to include transparency and fading effects too.
It is not unusual to have a mixture of formats of graphics for your various graphic elements because each format has its advantages and disadvantages of when it should be used dependent on your goals for your website.
