I used an SVG file as on-page media but it looks fuzzy and low-quality. What’s happening and how can I address it?
Image components show a generated thumbnail of your file, not the original SVG. SVGs can scale to any size, but the thumbnail is made at the SVG’s base (native) dimensions. If the SVG was saved at a small base size, such as 32×32 pixels, the thumbnail will be just as small. When the Image component stretches that small thumbnail to fill its space, it looks blurry or pixelated.
How do I fix it?
- Use a PNG or JPG image instead. Image components, Info Cards and Heroes are built for layout and presentation, so they work best with file types like PNG or JPG. Export your graphic at the size it will appear on the page, or larger.
- Re-export the SVG at a bigger base size. If you need to keep the SVG, ask your designer to save it with larger native dimensions (for example, 1000 pixels or more wide). The thumbnail will then be generated at a higher resolution.
Tip: SVGs are a good fit for spots where icons and logos are used. For full-width visuals, banners and cards, use a high-resolution image file.
I have white EPS and SVG files in an Asset or Asset Category but they’re appearing as a white bar or box. Changing the background color doesn’t help.
EPS files
This is expected behavior because the EPS format doesn’t support transparency. An EPS saved from Illustrator holds two versions of the artwork:
- Illustrator’s own data, which supports transparency. Illustrator reads this part when you reopen the file, so it looks transparent there.
- The PostScript data, which doesn’t support transparency. Every other tool reads this part, including the MediaValet DAM and most web previews, and it puts the artwork on a white background.
Colored images still show up fine against that white, but white images disappear into it.
SVG files
SVG files do support transparency, however the DAM saves grid and list thumbnails as JPGs, and JPGs can’t maintain a transparent background. A white SVG image ends up on a white JPG.
Workaround for both
Our recommendation is to upload a transparent PNG version of the logo alongside the EPS or SVG asset and display both on the page. Use the PNG in an Image component and link the EPS or SVG asset in an Asset component, using the Button layout. This will allow users to see what the asset contains while also having the ability to download the EPS or SVG file.