SVG vs. PNG
What Is the Difference Between SVG and PNG?
SVG is a vector format: a text file that describes shapes, which the browser or app draws fresh at whatever size it needs. PNG is a raster format that stores pixels in a set grid and supports transparency. For a logo or an icon on a website, SVG stays sharp at every size and is usually the smaller file, while PNG is the one that opens everywhere.
Vector vs. raster covers how the two kinds of image differ, and PNG vs. JPG compares PNG with the other common raster format. CE.SDK imports and exports both SVG and PNG.
SVG vs. PNG: How Do They Compare?
On screens, the trade-off is between scaling and support.
| SVG | PNG | |
|---|---|---|
| Stored as | Text describing shapes | Pixels |
| Logo file size | Usually small | Grows with the pixel size |
| Photos and detail | Poor fit, files grow huge | Handles any image |
| Animation and styling | With CSS or JavaScript | None |
| Opens in | Browsers and design tools | Almost everything |
When Should You Use SVG or PNG?
Use SVG where you control how the image is shown, such as your own website or app, and PNG wherever you can’t be sure SVG will open.
Use SVG for
-
Logos and icons on websites and apps
-
Flat illustrations and diagrams
-
Graphics that animate or change color
Use PNG for
-
Emails and email signatures
-
Social media posts and profiles
-
Screenshots and detailed images
How Does CE.SDK Handle SVG and PNG?
SVG comes in as an image and can go out as a vector file, while PNG works the same in both directions.
Text in imported SVGs isn’t drawn
Imported SVGs are drawn as pictures. SVG text is skipped on every platform, so convert it to paths first, and set styles as attributes, not CSS.
SVG exports keep shapes and text sharp
On the web, iOS, and server, SVG exports keep shapes as vectors and turn text into paths, while shadows, blur, effects, and photos go in as PNG images.
PNG keeps transparent backgrounds
PNG imports and exports keep transparent backgrounds, so a logo sits cleanly on any color. The export settings are covered in PNG vs. JPG.
SVG and PNG in Website Builders and Email Campaigns
Logos for a website builder
A website builder lets customers design a logo and exports it as an SVG for the site header, where it stays sharp on every screen.
Email campaign headers
A marketing tool exports each email header as a PNG, so it shows in every inbox, including the ones that skip SVG.
FAQs
Some email apps, including versions of Outlook, still do not display SVG images. Use a PNG for logos in emails and email signatures.
Not by saving it under a new name: an SVG that wraps a PNG is still pixels inside. A real conversion traces the image into vector shapes, which suits logos and flat graphics. In CE.SDK, the Vectorizer plugin does this in the browser.
Only with care. An SVG is a document that can carry scripts, so a file uploaded as a logo can run code if a site shows it as is. Sanitize uploaded SVGs, stripping scripts and event attributes, before you store or display them.
A PDF. Print shops ask for PDF files, which keep vector artwork sharp and carry the color information a press needs, so SVG and PNG are best kept for screens.
Links
Documentation and references for this concept.
Related Terms
Vector vs. Raster
The two ways digital artwork is built. Vectors are paths described by math and scale without losing sharpness, while ras…
PNG vs. JPG
Two raster image formats that compress differently. PNG is lossless and can be transparent, while JPG discards some deta…
Outline Fonts
Converting text into vector paths so a print file no longer depends on its fonts, which keeps the look but gives up edit…
Export
The process of rendering one or more pages of a CE.SDK scene to a distribution-ready file, supporting PNG, JPEG, TGA (ra…