Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conditions for Coloring the SVG Icons and How Exactly Works New SVG Support in General? #8512

Closed
black-eye opened this issue Jul 9, 2019 · 10 comments

Comments

@black-eye
Copy link

commented Jul 9, 2019

Prerequisites

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • The issue still exists against the latest stable version of Elementor.

Description

I've asked this question on 2.6.0 Beta thread (https://github.com/elementor/elementor/issues/8431#issuecomment-506358094}, but it was left without the answer.

Haven't tried it yet, but before I do so - is there a recommended way, how to deal with already installed plugins for SVG support (in my case https://cs.wordpress.org/plugins/svg-support/)?

  • Is there a there a possibility of conflict between these two, should I disable the non-Elementor plugin?

  • If I disable the former one, is Elementor's SVG support available outside Elementor's scope (for the whole WP)?

  • How exactly Elementor's SVG support affects already uploaded SVG files?

  • Can I (or should I) use already uploaded SVGs in Media Folder for new Elementor's iconic features?

Today I did some testing, so I'm basically repeating my questions and adding some more:

  1. When I've disabled the SVG Support plugin, everything seemed to work fine, even for non Elementor pages. So, just to be sure - Is this a RECOMMENDED way to deal with the SVG support now?

  2. What are the conditions for the SVG format and content to have a possibility to change the color of the icon? I've tried several modifications of the original icon file and it seems that the only way, how to make it work was to set the icon color to black. Even when there was 2 or more colors in the SVG file, only parts with black color were "repainted". Is this the supposed behaviour or is it some kind of bug? Could you please provide us with the instructions, how to make it work?

  3. SVG Icon size. It seems, that the default icon width is set to 50px. It would be nice to have an option to leave the image size to it's native dimensions. My intention was to use this widget almost the same way as the Image Widget, just with the extra SVG support. I'm also missing wider size settings compared to Image Widget, for example different size units, max-width etc. BTW, it's not quite clear what units are used for Icon size setting.

Thanks again for the clarification.

Isolating the problem

  • This bug happens with only Elementor plugin active (and Elementor Pro).
  • This bug happens with a default WordPress theme active.
  • I can reproduce this bug consistently using the steps above.

Environment

System Info ``` ```
@bainternet

This comment has been minimized.

Copy link
Collaborator

commented Jul 10, 2019

@black-eye

Nice questions,

  1. Elementor SVG sanitizer handles only SVG upload via Elementor SVG media Modal, anything else is not handled ( other than Elementor Pro Custom Fonts SVG), So the recommended way to deal with SVG depends on your needs out of SVG.

  2. Elementor Controls can add fill (and stroke in some widgets) to the SVG element, So if the SVG itself or any of its inner elements (path, g, rect ...) has an inline fill or stroke attribute our controls won't have any effect.
    Which is ok in our take on it, if you upload a colored SVG then you probably don't need elementor to color it for you.

  3. The default SVG as icon gets a width of 1em so it scales correctly per your context size/width. For not its an Icon SVG which can be used almost like image widgets but with the current limitations of Icon widget. In the future, we will look into expending it.

thanks.

@bainternet bainternet closed this Jul 10, 2019
@jrevillini

This comment has been minimized.

Copy link

commented Aug 20, 2019

I think I am having the same issue but probably different setup. I am not using the built-in SVG support for Elementor, I am using Safe SVG https://wpsvg.com/. When I view the SVG in the media library, it is colored properly. But in the Elementor editor for the page, I have an icon box with this SVG and the outline is orange. Orange is a color I use in background fills and text color in other areas on the site, but I don't understand why it's affecting the SVG.

Live examples:
SVG https://bogginicola.com/2019/wp-content/uploads/2019/08/cbc-extracts-icon.svg
Live within Elementor page: https://bogginicola.com/2019/

  • links will change when site goes live so any help in the near future would be appreciated.
@jrevillini

This comment has been minimized.

Copy link

commented Aug 20, 2019

ok i have some new info about the issue ... I inspected the SVG within the webpage and started messing with the fill on some classes. Turns out that modifying the fill color on a class affects all SVGs in icon boxes. It is like the styles are global to the page instead of being localized to the SVG itself.

Maybe this was an attempt to save bandwidth or something but it's having undesired effects.

Screenshot 2019-08-20 at 12 33 47 AM

@jrevillini

This comment has been minimized.

Copy link

commented Aug 20, 2019

figured out what is going on but not why ... for some reason, the styles for one SVG are affecting another, even though the styles are within the SVG tag.

Screenshot 2019-08-20 at 1 03 16 AM

@Glofu

This comment has been minimized.

Copy link

commented Aug 29, 2019

Hey there,
I am having the exact same problem. To be more precise, the last svg affects all the others; when I say the last I mean not chronologically, but in terms of location in the page.
Don't know if that can help but I really hope we come out with a solution, otherwise that means reconverting all the images and reuploading them

EDIT: here it seems they found a solution: https://wordpress.org/support/topic/color-changes-in-the-svg/

@jrevillini

This comment has been minimized.

Copy link

commented Aug 30, 2019

@Glofu Yeah, I read through that but there IS something in Elementor that is making this happen. If you create a new page and DON'T edit in Elementor and the same SVGs, it will not exhibit this issue.

@Glofu

This comment has been minimized.

Copy link

commented Aug 30, 2019

@jrevillini

This comment has been minimized.

Copy link

commented Aug 30, 2019

I think we basically ARE contacting support by contributing to an issue thread on GitHub. I don't know if they monitor 'closed' issues though :/

I may just have to start a new thread and reference this one. Or you could ... :)

@Glofu

This comment has been minimized.

Copy link

commented Aug 30, 2019

@theboman

This comment has been minimized.

Copy link

commented Sep 1, 2019

I am having the same weird issues with svg and elementor. I cannot color the element using elementor. I downloaded the svg from the noun project... this strangely works... I have removed the inline style attributes on my svg and still no coloring... very strange.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.