When to use SVG, PNG, and WebP for brand assets

When to use SVG, PNG, and WebP for brand assets

A logo that looks crisp in a brand guidelines PDF often turns fuzzy on a 27-inch monitor, and the same icon that renders cleanly on a white background can pick up a gray halo on a dark one. Most of those problems are not design problems. They are format problems. Choosing the right file type for each asset is one of the cheapest ways to keep a brand looking consistent across screens, print, social, and product UI.

The notes below walk through when to use SVG, PNG, and WebP for brand assets in a working design system. The focus is on practical decisions: which format to export, what settings to use, where each format breaks, and how to keep a brand library consistent over time. The aim is a set of rules you can hand to a designer, a developer, or a marketer without writing a 40-page style guide.

What each format is actually good at

SVG, PNG, and WebP were built for different problems, and most brand libraries need all three. Treating them as interchangeable is what causes fuzzy logos, oversized hero images, and accessibility complaints in production.

Format	Best at	Weakness	Typical brand use
SVG	Resolution-independent vector graphics, sharp icons, inline code, small file size for simple shapes	Bad for photographs, can be misused for complex art, needs careful export for accessibility	Logos, icons, simple illustrations, UI symbols
PNG	Lossless raster images, transparency, universal support, reliable in print and email	Large file size, no animation, no modern compression	Marketing exports, app store screenshots, detailed raster illustrations
WebP	Modern raster compression, smaller files than PNG and JPEG, transparency and animation	Limited support in some legacy email clients and older desktop software	Hero images, product photos, marketing graphics on the web

Format choice follows the content. A flat icon made of straight lines and solid fills is a vector problem. A photograph of a person holding a product is a compressed raster problem. A complex illustration with gradients and fine detail is a careful raster export problem, and the right format depends on where it will live.

The decision rule in plain language

If a designer had to remember only one rule, it would be this. Use SVG for anything drawn from shapes that should stay sharp at any size, including logos, icons, and most illustrations created in a vector tool. Use WebP for photographs and large raster graphics on the web when modern browser support is acceptable. Use PNG when you need a lossless raster with transparency that must work in older environments, or when a vendor or channel will not accept anything else.

The rule is short. Real projects run into edge cases quickly, and the rest of the article breaks those cases down.

SVG: where it earns its place in a brand library

SVG is an XML-based vector format that describes shapes with mathematical paths rather than pixels. A logo saved as SVG can be rendered at 16 pixels for a favicon or scaled to a conference backdrop without losing detail, because the renderer recalculates the paths at the target size. SVG also supports inline use in HTML, so a small icon can be dropped directly into a component instead of being loaded as a separate file. That cuts down HTTP requests, supports CSS styling, and allows accessible markup when done correctly.

SVG is the right format when the asset has most of these properties:

• It is created in a vector tool such as Figma, Illustrator, or Affinity Designer.
• It uses shapes, paths, text, and flat or gradient fills rather than pixel data.
• It needs to remain sharp at multiple sizes, from a 16-pixel favicon to a large website header.
• It will be styled, recolored, or animated in code.
• It does not depend on a photograph or a complex raster effect.

SVG is the wrong format when the asset is a photograph, contains a complex raster painting with thousands of subtle color transitions, or was created by exporting pixels from another tool. Wrapping pixel art in an SVG container does not give you vector quality. It gives you a heavier file with a misleading extension, and it often renders worse than the original PNG would have.

SVG export settings that actually matter

Most brand quality problems with SVG are export problems, not format problems. A handful of settings have an outsized impact on the final file.

• Convert text to outlines only if the brand library must avoid font dependencies. Keep live text if the design system includes the font, so screen readers and search engines can read it.
• Remove unused groups, hidden layers, and stray metadata. A logo file should not still contain a hidden illustration layer from three revisions ago.
• Use integer or simple decimal coordinates to keep file size small and rendering predictable.
• Avoid embedded raster images inside the SVG unless they are intentional, because they will not scale and can break accessibility expectations.
• Set a sensible viewBox so the icon scales proportionally inside any container.

For accessibility, add a title and a desc element, and mark the SVG as decorative with aria-hidden when it is purely visual. These steps matter when SVGs are used inline in product UI, which is now a common pattern in modern design systems. The W3C SVG accessibility guide walks through the markup patterns that hold up in screen readers.

PNG: why it is still the safety net

PNG is a lossless raster format with strong transparency support. It has been around for decades, runs in every browser, every operating system, every mainstream email client, and most print pipelines. That compatibility is why PNG still earns a place in a modern brand library, even when smaller formats exist.

PNG is the right format when the asset is one of the following:

• A raster image that must look identical on every channel, including email and older browsers.
• A marketing export that will be uploaded to a third-party platform, such as an app store, a press kit, or a partner site.
• A pixel-perfect UI asset such as a complex badge, a hand-drawn raster mark, or a screenshot.
• A working source file that designers need to open in tools that do not support modern formats.

PNG is the wrong format when the asset is a large hero photograph, because file size will balloon. A 2400-pixel-wide photograph exported as PNG can easily exceed a few megabytes, which slows page load and wastes bandwidth. For that case, WebP is usually a better fit, and JPEG is acceptable when transparency is not needed.

PNG export settings that prevent quality issues

PNG is lossless, so there is no quality slider the way JPEG has one. The trade-off is between bit depth, color mode, and file size, and the wrong combination shows up as either banding or unnecessary weight.

• Export at 2x for high-density displays when the asset is a UI icon or raster mark. A 24-pixel logical icon usually needs a 48-pixel or 72-pixel PNG.
• Use 8-bit PNG for most marketing work. Use 24-bit PNG only when the asset contains subtle color gradients that banding would damage.
• Confirm that transparency is actually needed. Exporting a solid-background image with a transparent channel can increase file size with no visible benefit.
• Strip metadata such as color profiles only if you understand the downstream consequences for print.

A useful technical reference is MDN’s guide to SVG as a vector web standard, which provides useful background for this point. It explains why the format can be rendered at different sizes without turning the artwork into a new pixel grid. That does not make every illustration an SVG candidate; it is a reason to keep genuinely vector brand marks in a vector source of truth.

A useful technical reference is MDN’s guide to SVG as a vector web standard, which provides useful background for this point. It explains why the format can be rendered at different sizes without turning the artwork into a new pixel grid. That does not make every illustration an SVG candidate; it is a reason to keep genuinely vector brand marks in a vector source of truth.

For a wider view of how pixel-perfect assets support product UI, the studio’s notes on web accessibility cover the principles that guide these decisions.

WebP: the modern web default for raster

For delivery decisions, use the web.dev guide to serving WebP images as a practical implementation reference. A modern raster format is a delivery choice, not a replacement for the master asset: keep the original file and document which derivative belongs in each channel.

For delivery decisions, use the web.dev guide to serving WebP images as a practical implementation reference. A modern raster format is a delivery choice, not a replacement for the master asset: keep the original file and document which derivative belongs in each channel.

WebP is a raster format developed by Google that supports both lossy and lossless compression, transparency, and animation. In most real-world tests, a WebP file is significantly smaller than the equivalent PNG or JPEG for photographs and flat graphics, while keeping visible quality similar. The format is supported in all major modern browsers and is increasingly the default for performance-focused teams.

WebP is the right format when the asset meets several conditions:

• It is a photograph or a complex raster illustration served on the web.
• File size matters, for example on landing pages, ecommerce sites, or mobile-first products.
• Modern browser support is acceptable, which is the default for almost every consumer product today.
• Transparency is needed, but the file should still be much smaller than a PNG.

WebP is the wrong format when the asset must be delivered through a channel that does not support it. Some legacy email clients, older desktop publishing tools, and a small number of print pipelines still cannot open WebP files. In those cases, PNG or TIFF is the safer choice, and the WebP version can stay as an internal or web-only export.

WebP export settings for brand work

WebP has more controls than PNG, which is helpful but also easy to misuse. A few settings tend to matter in brand work.

• For photographs, lossy WebP at quality 75 to 82 usually matches the perceived quality of a higher-quality JPEG at a smaller file size.
• For flat graphics with transparency, lossless WebP often beats PNG in size without any quality loss.
• Use animation only when the brand asset is intentionally animated. A static logo exported as an animated WebP will look broken in contexts that do not support animation.
• Keep the source file in a master format such as PSD, AI, or FIG, so the WebP can be re-exported later if quality or compression needs change.

The Wikipedia entry on WebP gives a useful overview of the format’s compression methods and adoption history, which is helpful background for any brand standards document.

A decision tree for exporting brand assets

Designers often ask what to do when the same logo needs to ship as a website header, a mobile app icon, a printed business card, and a social media avatar. The answer is rarely one format. The decision table below summarizes the practical path for most brand libraries.

Asset type	Primary export	Secondary export	Notes
Wordmark or logomark	SVG	PNG at 1x, 2x, 3x for legacy support	Keep an outlined version without font dependencies for external use.
App icon	PNG at required sizes	SVG for in-product use where supported	Follow platform guidelines for corner radius and safe areas.
Icon set in product UI	SVG	PNG fallback for older browsers	Inline SVG is preferred for styling and accessibility.
Illustrations	SVG if simple, WebP if detailed	PNG for downloads and email	Match the export to the channel, not the artistic style alone.
Product photography	WebP	JPEG for email and older platforms	Provide original uncompressed masters in a separate archive.
Marketing banners and hero images	WebP	JPEG fallback	Consider AVIF for future projects where support allows.
Press kit assets	PNG	JPEG for photographs, PDF for guidelines	Journalists and partners expect widely supported formats.
Favicons	SVG with PNG fallback	ICO for legacy browsers	Use the SVG only if the icon is simple and monochrome.

The same asset often appears more than once in the table, with different exports for different channels. A brand library that ships only one version of each asset tends to force compromises in the wrong place, usually at the smallest or largest display size.

Common pitfalls when shipping brand assets

Even experienced teams repeat the same mistakes. The list below is short, but each item has caused real production problems on real projects.

• Exporting a raster photograph as SVG to chase smaller file size. The result is a large SVG with an embedded image that does not scale.
• Uploading a logo as a low-resolution PNG and watching it look blurred on retina displays. The fix is to export at 2x or 3x, or to switch to SVG where possible.
• Sending a WebP hero image in an email campaign and discovering that some clients show a broken image icon. The fix is a PNG or JPEG fallback, or a hosting setup that serves WebP conditionally.
• Forgetting to outline text in a logo SVG, which causes the file to look wrong on a partner site that does not have the brand font.
• Mixing color profiles between assets, which leads to subtle shifts in print and on screen. A single color policy across the brand library is easier to maintain than fixing color drift asset by asset.

For teams shipping consumer products, the studio’s notes on web accessibility explain why alt text, contrast, and non-text content matter for SVG and raster assets alike, which ties directly into the pitfalls above.

How to structure a brand asset folder

Format choice becomes easier when the folder structure reflects it. A common pattern is to organize by brand, then asset type, then format, with a separate folder for source files.

• /brand/logo/source for original AI, FIG, or PSD files
• /brand/logo/svg for clean, optimized SVG exports
• /brand/logo/png for PNG exports at 1x, 2x, 3x for specific sizes
• /brand/icons/source, /brand/icons/svg, and /brand/icons/png
• /brand/photography/source, /brand/photography/webp, /brand/photography/jpeg
• /brand/illustrations/source, /brand/illustrations/svg, /brand/illustrations/webp, /brand/illustrations/png

This structure makes it obvious which file to send when a partner asks for a logo, and it also makes audits easier. A designer can scan the folder and see immediately whether a particular asset has a missing export, an outdated version, or a duplicate that should be retired.

Working with developers and other teams

Format decisions rarely stay inside the design team. Developers, marketers, and partners all need assets, and they often need different versions of the same asset. A short shared checklist helps avoid back-and-forth.

• Always ship SVG and a PNG fallback for logos, icons, and UI symbols.
• Always ship WebP and a JPEG fallback for photographs and large banners.
• Document the color profile, the safe area, and the minimum size for each asset.
• Use consistent file names that include the asset name, the size, and the format, for example logo-primary-black-512.png.
• Keep a single source of truth, even if the brand library is mirrored in design tools and a content management system.

These rules feel obvious once they are written down, but most brand libraries still have one or more of these gaps in practice. For projects that need a deeper conversation about how the website itself is planned, the studio’s writing on design systems covers how assets fit into the larger plan.

Accessibility and metadata considerations

Format choice has accessibility implications that are easy to overlook. SVGs can be read by screen readers if they include the right markup, but a complex icon with no title or desc is treated as a decorative image. PNGs rely on the alt attribute on the surrounding HTML. WebP images behave like other raster formats for accessibility purposes, but they also benefit from descriptive filenames and alt text.

A small checklist helps here as well.

• Add meaningful alt text that describes the asset’s role, not just its appearance.
• For inline SVG, include title and desc and mark purely decorative icons as aria-hidden.
• Avoid embedding text inside raster images when the same text can live in the HTML.
• Make sure color contrast is tested for icons and badges, not only for body text.

Performance and page weight

Brand assets are often the largest single contributors to page weight on a marketing site, after product photography. Switching hero images from PNG to WebP, exporting icons as inline SVG, and serving WebP only to browsers that support it are all standard moves for performance-focused teams. None of these techniques requires a redesign, and the gains can be substantial on real pages.

A useful exercise is to take the top ten pages by traffic, export their primary brand assets in all three formats, and compare the file sizes. The numbers are usually more convincing than any style guide argument, and they make the case for cleanup without needing a long meeting.

Putting it all together

The short version of when to use SVG, PNG, and WebP for brand assets is the decision rule from above. The longer version is that each format earns its place by solving a specific problem. SVG keeps vector marks sharp at any size and lets developers style them in code. PNG provides lossless raster output and universal compatibility. WebP delivers smaller raster files on the web without sacrificing visible quality. A brand library that uses all three for the right jobs tends to look sharper, load faster, and survive contact with new channels and platforms.

For most teams, the next practical step is to audit the current asset library, group assets by type, and confirm that each group has the right exports. After that, the decision rules can be written into the brand guidelines, and the folder structure can be adjusted to keep things consistent over time. The result is a smaller, faster, more reliable brand library that costs nothing extra to maintain.

A pre-publish handoff check for the asset folder

Before sending a package to development, open the exact files that will ship rather than only the source file in the design tool. Check the small logo at the smallest navigation size, the large mark on a high-density screen, and the raster image against both light and dark backgrounds if the brand uses transparency. A file that looks correct on an artboard can still have an unexpected crop, a white matte, or unreadable embedded text after export.

Name files for the job they perform, not for the day they were exported. A path such as logo-primary-dark.svg tells the next person more than logo-final-v7.svg. If a channel needs a fixed raster, put the dimensions in the filename or next to it in a short readme. This is not bureaucratic overhead: it stops a social preview image from being reused as a hero, or a tiny navigation icon from becoming a print asset.

Keep the source of truth separate from derivatives. The editable vector file, the approved SVG, and the WebP or PNG exports have different purposes. When someone edits only an exported raster, the team quietly creates a second master and future changes drift. A simple rule works: edit the source, export the derivative again, replace the published file deliberately, and record the change where the team can find it.

Finally, test the page that uses the asset. Inspect the logo at narrow and wide widths, turn off the image cache once, and confirm that alt text belongs to the image’s purpose rather than repeating a filename. If an image is decorative, the implementation should treat it as decorative; if it conveys information, the text alternative should explain that information. The format decision is complete only when the asset works in its real interface.

Do the same check in the channel where mistakes are most expensive. A newsletter may impose a different size limit than a CMS, a marketplace may flatten transparency, and a presentation template may substitute fonts. Record those constraints next to the asset rather than asking designers to remember them. The goal is not to produce more exports; it is to make the approved export obvious to the person who needs it next.

When the answer is unclear, make a small test export, place it in the actual component, and label the decision. That short loop is cheaper than fixing a broken asset across several channels after launch.

Use this final handoff reminder: the right format is the one that preserves the approved asset in the destination where people will actually see it. Keep the source, name the derivative clearly, and test the published component before calling the task complete.

Frequently asked questions

Should I always use SVG for logos?

SVG is the preferred format for logos on the web and in product UI because it scales without losing quality and can be styled with CSS. A PNG fallback is still recommended for channels that do not support SVG, including some email clients and print pipelines. The safest approach is to ship SVG as the primary export and include PNG versions at 1x, 2x, and 3x as backups.

When is WebP a better choice than PNG?

WebP is usually a better choice than PNG for photographs and large raster graphics on the web, because it produces significantly smaller files with similar visible quality. PNG remains the better choice for icons and assets that must look identical in older environments, including email, app stores, and some print pipelines.

Can I convert a PNG logo to SVG?

Converting a raster PNG to a true SVG requires redrawing the logo in a vector tool, because the original PNG contains pixel data rather than shapes. Tools that trace bitmaps can produce a vector path, but the result often needs cleanup and may not match the original exactly. For an existing brand logo, the right approach is usually to obtain the original vector file from the designer rather than converting a raster export.

Is WebP supported in email clients?

Support for WebP in email clients is uneven. Modern webmail clients often render WebP correctly, but some desktop and mobile email clients still do not. For email campaigns that must reach a wide audience, JPEG or PNG fallbacks are usually safer, and the WebP version can be served on the website.

What export size should I use for retina displays?

For high-density displays, exporting at 2x is a common baseline, and 3x is appropriate for small UI assets that need to stay sharp on phones and tablets. For photographs, exporting at a width that matches the largest display size is usually enough, because compression hides minor differences. The exact size should be guided by the design system, not by guesswork.

Do SVGs hurt accessibility?

SVGs do not hurt accessibility by default, but a poorly marked-up SVG can confuse screen readers. Inline SVGs should include a title and a desc when the image is meaningful, and they should be marked as aria-hidden when the image is purely decorative. Following these patterns keeps SVGs accessible without limiting their visual flexibility.

Should brand assets live in a design tool or a shared folder?

Both. Design tools such as Figma are good for collaborative editing and design system documentation, while a shared folder is good for distributing final exports to developers, marketers, and partners. A common pattern is to maintain source files in the design tool, export final assets to a folder, and link the folder from the brand guidelines so everyone can find the latest version.

What is the difference between lossless and lossy WebP?

Lossless WebP compresses the image without losing any pixel data, which is useful for graphics with transparency and limited color palettes. Lossy WebP discards some visual information in exchange for much smaller files, which is appropriate for photographs. The right choice depends on the asset, and many brand libraries use both modes in different places.

How often should brand assets be re-exported?

Brand assets should be re-exported whenever the source file changes, when a new channel requires a different size or format, or when a new compression standard becomes widely supported. A yearly review is a reasonable baseline for stable brands, and a more frequent review is appropriate for brands that ship new products or campaigns on a regular schedule.

Can I use WebP for app store screenshots?

Most app stores still expect PNG or JPEG screenshots, and WebP is not universally accepted in those pipelines. Until app store guidelines change, the safest approach is to keep PNG as the primary export for app store submissions and use WebP only on the web.

Related reading

• Design system audit checklist for small websites: a practical review
• Moma Design Store: what it is, what it sells, and why it matters