Both .PNG and .SVG have transparent backgrounds. If you use the .SVG file (AKA: Scalable Vector Graphics) it can scale to any size without loss of quality. This is because it gets it's shape not from pixels but rather from relative proportions.
When should you NOT use an .SVG file? Mainly when photographs and non-vector images are used in the file because they can not scale the same way shapes can without loss of quality.
.SVG files are also about half the size as .PNG files when compared apple to apples. Below you will find white and blue versions of the Proof logo in both file types. The .PNG files are roughly 20 KB and the .SVG files are about 9 KB in size.
General rule of thumb: Use the .SVG for as often as possible because of size, edibility and scalability without loss in quality. Only use .PNG if the file contains a picture with pixels.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.