Problem using SVG

Elements Beta Feedback
1

Hi,

I am just creating a template and I am using SVG Icons in a Button. When I am copying SVG Icons downloaded from Font Awesome everything looks as intended.

image
image422×397 17.9 KB

But when I am using SVGs from another Source (svgpro.com) it looks like below

image
image422×947 17.8 KB

Any idea how I can fix this?

2

Bonjour, j’ai exactement le même problème d’affichage des SVG dès que je le remplace par un nouveau.

3

Every time I see issues with SVG icons in Elements I’m more and more convinced that SVG icons would be better handled via custom asset pack integrations, and possibly a custom ‘(SVG) Icon’ element.

I still think there is a need for a general SVG element (logos, spot illustrations, diagrams, graphs, charts, etc), but SVG icons are often set-up a in specific manner to ensure correct sizing, scaling, legibility, optimization, ability to change colours, etc. Grabbing any SVG icon off the internet and throwing it into the current SVG element to use as an icon probably won’t work as expected the vast majority of the time.

2 Likes
4

I’ve encountered the same problem. At the moment I’ve gone back to PNG icons, not SVG.

5

This is always a problem because SVG’s are just xml code, the way they are built can vary wildly.

@WeaverPixel To be able to set the height and width on an SVG in Elements you’ll need to remove those values in the SVG file, see screenshot below for an example.

image
image1920×965 661 KB

Hope that helps!

We cover this and a few other issues in the SVG Component Docs.

6

Thanks @dan, that’s the reason, the icons I have downloaded from svgpro.com have a backed in height and width of 800 pixel. The next time I promise to also have a look at the manual :grinning:.

So for now in the Beta it’s absolutely fine. But honestly, you cannot leave that in this form for the final version unless you want to fill the support forum. As @bryanrieger wrote we really need asset pack integrations of icons from a solid library and we need a more robust SVG component.

Why can’t the SVG component ignore the (potentially) backed in size informations and override them with the ones given in Elements. That could be done by an additional switch (ignore/not ignore the size infos) in the SVG component. That’s how Foundry did it as far as I recall.

Just my opinion :sunglasses:

2 Likes