SVG file not showing

Community resources Bugs
1

Hi, I’ve found old links about the same issue but the solutions there don’t work for me.

I’m basically uploading a couple of SVG files (basic social media buttons) to Webflow, I add the, to my ‘nav bar’, just to realise a few moments later that the icons disappeared. They show properly for a couple of seconds and then disappear. The image element is still there, linked to the right file, but it doesn’t show.

I’m saving the SVG from Illustrator. I’ve tried to save as SVG 1.0, SVG 1.1 and TinySVG 1.2. None of these work.

I also found an issue about SVGs that with embedded PNG file not working with Webflow. I made sure my SVGs are proper SVG only specifying the shapes etc.

Any hints?

Here is my site Read-Only: LINK
Here is my site Published link: LINK

2

@gvdias,

I have had and still have the same SVG problem.
It is really sad this issue hasn’t been properly addressed yet.

As stupid as it sounds, I now avoid SVG on my websites and only use PNG so that client do not have to come ask me why their logo doesn’t show up. Very lame solution for such a brilliant platform that is Webflow.

Good luck to you.
Anthony

3

Hi @gvdias, sorry to hear about your troubles with SVG files. I have used them in the past and still do with no issues. I do use the most recent SVG format available.

For more clarification on this, @rileyrichter or @Brando, or @johnramos, do you guys have any insight to this matter?

TIA,
Brandon

4

Hi @gvdias, @anthonysalamin, & @QA_Brandon, as of late at least, I have found that I usually have to specify a width or height for the SVG and then it works fine. Otherwise I have the same issue where it doesn’t show (Webflow seems to think it doesn’t have any width or height). Hope that helps. :slight_smile:

1 Like
5

To clarify, you can add the width or height to the image settings or to the class for the image element.

6

Hi, specifying the width and height might stop the SVG from “disappearing” from the layout, but unfortunately, it doesn’t work for me since I want the SVG to fit inside a DIV and scale with it.

@QA_Brandon in your experience, do you always specify the width and height of your SVGs?

And I’ll have to agree with @anthonysalamin, it’s a mediocre implementation of SVG for such a brilliant platform.

7

Got it @gvdias, in this case you can set the width and height of the SVG to 100% so it will scale with the DIV, and set your height and width properties on the DIV instead. Would that accomplish what you’re looking for? Hope I’m understanding correctly.

1 Like
8

@asksj Thanks! That does solved my problem. I’d say that’s the best solution so far to use SVG graphics. One thing to note is that you cannot set width and height to 100% on the image settings, but you can create a class and set that class to 100% width.

1 Like
9

@gvdias yes that is correct :slight_smile: glad you were able to get it working!

10

I wanted to add something here for reference. I found that one of my SVG files doesn’t need the height and width to be set. But the other one does.

The SVG which works fine without the setting looks like this:
(note how it specifies width=“16px” height=“16px” in its code)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>Social Icons/facebook-icon-white</title>
    <desc>Created with Sketch.</desc>
    <defs/>
    <g id="Assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Social-Icons/facebook-icon-white" fill="#FFFFFF">
            <path d="M5.6676666,16 L5.6676666,8.68304873 L3,8.68304873 L3,5.88421491 L5.66830941,5.88421491 L5.66830941,3.77176177 C5.66830941,1.3394419 7.25605314,5.68434189e-14 9.60552818,5.68434189e-14 C10.7304478,5.68434189e-14 11.7178059,0.0733027905 12,0.106622241 L12,2.68554769 L10.3286908,2.68554769 C9.05078209,2.68554769 8.81165631,3.24531445 8.81165631,4.07163682 L8.81165631,5.88421491 L11.8695093,5.88421491 L11.472252,8.68304873 L8.81165631,8.68304873 L8.81165631,16 L5.66188129,16 L5.6676666,16 Z" id="Icon"/>
        </g>
    </g>
</svg>

And the one which doesn’t work without the setting looks like this:

<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve">
<title>Social Icons/facebook-icon-white</title>
<desc>Created with Sketch.</desc>
<path fill="#FFFFFF" d="M3.6,2.4C3.6,3.3,2.9,4,2.1,4S0.5,3.2,0.5,2.4c0-0.9,0.7-1.6,1.5-1.6S3.6,1.5,3.6,2.4z M3.6,5.2H0.5v10h3.1  V5.2z M8.6,5.2H5.5v10h3.1V9.9c0-2.9,3.8-3.2,3.8,0v5.2h3.1V8.9c0-4.9-5.6-4.7-6.9-2.3C8.6,6.5,8.6,5.2,8.6,5.2z"/>
</svg>
2 Likes
11

I found a way to save SVG from Illustrator with the dimensions defined in the file. So this should make the SVGs compatible with Webflow.

When saving the file, click on More Options and untick the Responsive box.

43
43952×1288 106 KB

Hope it helps!

6 Likes
12

Nice find @gvdias! Thank you for sharing!

13

Actually all I did was open the SVGs in Illustrator and resaved them w/o changing any options. My guess is that these SVGs were made either on a windows platform or through a non-adobe software.

I’ve had problems with jpgs & pngs that were made from windows-based programs or exported through another unusual platform.

Resaving files does the trick most times.

14

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