SVGs not appearing correctly

Community resources Bugs
1

Any time I add an SVG to Webflow, at first it won’t appear, so I have to actually open that SVG’s link. Then, once I go back to Webflow, the SVG appears again. I don’t know if this a browser caching issue or a Webflow issue, but it’s really inconvenient.

Here’s an example:

That same image in the asset manager:

Please let me know if there’s a way to fix this.

Thanks,
Josiah

My read-only link: https://preview.webflow.com/preview/just-one-dime-members?preview=04b6430c5d21e335270b7ddb33b9e43e

EDIT: I already cleared my cache and refreshed the page in Chrome, and the problem still occurs, so maybe that’s not the issue…

2

Sorry this doesn’t help but I have the same issue. Using Mac OS 10.12 Chrome 56.

3

Similar problem with the Collection view in the Editor using Chrome 56 on MacOS 10.12. See below screenshots: Images don’t show in the Editor, but they do in the Designer. This has been the case for some time.

Using Safari, the images show up correctly in the Editor.

2655×1701 245 KB

4

Hi @jkniep

Thank you for reaching out and for bringing this to our attention! This definitely sounds like strange behavior - I’m looking into it now with our team!

Can you please try the following:
(1) Try to reproduce the error while being logged into Webflow using Incognito mode with browser extensions turned off: Browse in private - Computer - Google Chrome Help
(2) If the problem persists, please take a screenshot of your Console and send it to me: Chrome DevTools - Chrome Developers

Thanks in advance and I’ll be standing by for your response! :slight_smile:

6

Hey @Brando,

I did try Incognito mode, and the problem still persists within the asset manager. Anytime I add an SVG inside the asset manager, it’s invisible until I open that SVG’s resource location, as shown in the gif:

Here is a screenshot of my console:

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

8

Hi @jkniep @spirelli @connectcreative

Thanks for posting about this and for your patience with this issue.

I wanted to update you with our team’s investigation:

It looks like the SVG files that aren’t appearing aren’t real SVGs.

Think of SVGs like html files that describe shapes and angles so they can be rendered at any size and any resolution.This differs from png file that describe every pixel of the image, and cannot be resized bigger without losing information and quality (stretching)

The SVGs that aren’t uploading correctly are using a part of SVG spec to essentially embed a png file inside SVG code.

This may have been caused by the image editing software you used to export the SVGs (e.g. PNG → SVG conversion). You can read more on this here: Lost Redirection

A relevant snippet from the article:

The simplest way [to convert png → svg] is to use an online conversion tool. But: beware of the image to SVG conversion tools online.
Some of them do not actually convert the image to SVG, which requires retracing the image and turning it into a set of coordinates and lines, but instead just encodes the image as base64. That’s fairly easy to do without needing an online tool and doesn’t help us at all on our goal of creating a real SVG file, not another form of a bitmap image.

We currently don’t support these types of SVG files.

The best solution here is to upload the original png file or a real SVG file. You can use software like Illustrator to trace the original image to properly convert a PNG to a SVG.

1 Like