Streaming live at 10am (PST)

SVG Icon not displaying correctly


#1

Hi,

I tried embedding an SVG icon and it is not displaying properly in Webflow. I exported the SVG icon from Adobe Xd as Internal CSS. I already exported a few other icons this way and they work fine. It’s just this one icon that’s having issues. The ellipse is showing a fill when it should only show a stroke.

I attached an image of what it’s supposed to look like (top) and how it looks in Webflow (bottom).

Any help is appreciated.

Thanks,
Ben
add_icon


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

First open your SVG in photoshop or illustrator (And check if you see the result like this). Webflow do not change your svg (Only link to your asset). Add url or url for the SVG.


#3

But I don’t understand why I have to link to it when the other icons are working as embedded SVG’s? I was referencing this when I first did it: SVG icons using Style Palette colors


#4

Beacuse maybe the problem related to the SVG himself (Somethime XD get wrong output). Save the file in illustrator maybe.


#5

I ended up just inserting the SVG as an image and that seemed to work. I’ll let the devs figure it out from there, ha.


#6

As image its always better (Image with alt + google index those images + easier to manage/change).