Home › Forums › WoodMart support forum › BUG: SVG gets colored with primary color
BUG: SVG gets colored with primary color
- This topic has 32 replies, 2 voices, and was last updated 5 years, 11 months ago by Artem Temos.
-
AuthorPosts
-
December 24, 2018 at 12:28 am #98043
Adrenaline22ParticipantHi,
I’ve created a svg file in Figma and exported to Woodmart. When I use it is a bullet for a list element it renders ok. When I use for the information box, fill disappears and border gets colored with the primary color.
December 24, 2018 at 7:06 am #98076
Artem TemosKeymasterHi,
We tested both links and the icons are displayed identically there. Please, send us a screenshot of the problem for a better understanding.
Regards
December 24, 2018 at 3:09 pm #98174
Adrenaline22Participantplease check the attachment
Attachments:
You must be logged in to view attached files.December 24, 2018 at 3:49 pm #98196
Artem TemosKeymasterPlease, send us your admin access.
December 24, 2018 at 9:08 pm #98253
Adrenaline22ParticipantCredentials:
December 25, 2018 at 7:01 am #98266
Artem TemosKeymasterWe see this page when trying to access https://gyazo.com/b37074fae6563fdfdfd8dab8c0f0a7c2
December 25, 2018 at 12:56 pm #98318
Adrenaline22Participantfrom which country are you accessing?
December 25, 2018 at 2:10 pm #98331
Artem TemosKeymasterTry to edit your SVG icon and add an ID attribute there https://gyazo.com/19e87887a60277bb88b794ce603dc00f
Also, disable SVG animation option for each info box https://gyazo.com/b058355641db9d9288125f3edb8834f8December 25, 2018 at 4:39 pm #98359
Adrenaline22Participantadded id, removed animations…doesn’t work
exported from figma and illustrator…same result.
A wild guess would be that it doesn’t handle gradients…
December 25, 2018 at 5:17 pm #98370
Artem TemosKeymasterYes, the problem with a gradient. Currently, we see that you uploaded PNG images. Should we still investigate it? In this case, please, upload SVG icons again.
December 25, 2018 at 5:19 pm #98371
Adrenaline22ParticipantI will upload SVGs. In a moment.
December 26, 2018 at 7:04 am #98423
Artem TemosKeymasterWe see that your current SVG icons without ID attribute. Please, add the ID attribute first.
December 26, 2018 at 7:20 am #98431
Artem TemosKeymasterAnd to add the following PHP code snippet to the child theme functions.php file
function woodmart_get_any_svg( $file, $id = false ) { $content = function_exists( 'woodmart_get_svg' ) ? woodmart_get_svg( $file ) : ''; $start_tag = '<svg'; if( $id ) { $pattern = "/id=\"(\w)+\"/"; if( preg_match($pattern, $content) ) { $content = preg_replace($pattern, "id=\"" . $id . "\"", $content, 1); } else { $content = preg_replace( "/<svg/", "<svg id=\"" . $id . "\"", $content); } } // Strip doctype $position = strpos($content, $start_tag); $content = substr($content, $position); return $content; }
December 27, 2018 at 10:45 am #98617
Adrenaline22ParticipantAdded to PHP to child function.php theme..
I added the id=”svg-arrow-1″ in Notepad++, but when I check it in the Developer Tools it’s not visible as you mentioned:
<svg width="31" height="65" viewBox="0 0 31 65" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg-arrow-1"> <path d="M30.8 32.5L0 65L19.8 32.5L7.3 0L30.8 32.5Z" fill="url(#paint0_linear)"/> <defs> <linearGradient id="paint0_linear" x1="15.415" y1="65.02" x2="15.415" y2="0" gradientUnits="userSpaceOnUse"> <stop offset="0.28" stop-color="#F26222"/> <stop offset="0.53" stop-color="#FEBC11"/> <stop offset="0.84" stop-color="#F26222"/> </linearGradient> </defs> </svg>
the icons are still not visible.
December 27, 2018 at 10:50 am #98619
Adrenaline22Participanton a normal occasion I would replace the gradients with a single orange color, but these icons are on all my marketing material..leaflets, brochures etc.
I would opt for SVGs too, but I have to minimize page size…
December 27, 2018 at 10:56 am #98620
Artem TemosKeymasterPlease, do both things and upload your icons so we can test it.
December 27, 2018 at 10:56 am #98621
Adrenaline22ParticipantOk so here it is:
I used Safe SVGs plugin that strips the ID from the SVG in order to allow SVG uploads.
I tried to switch to the SVG support plugin, but for some strange reason doesn’t allow me to upload SVGs…
December 27, 2018 at 11:01 am #98623
Adrenaline22Participant– can’t upload SVGs from wp admin unless I use Safe SVG plugin
– Safe SVG removes ID
– if I upload the SVGs to the WP upload folder via FTP, I can’t see them in the Media LibraryDecember 27, 2018 at 11:51 am #98625
Adrenaline22ParticipantI checked the SVGs… actually Safe SVGs doesn’t remove anything. It’s Woodmart that doesn’t render correctly the SVGs. I am starting having problems even with other SVGs now.
Please help me on this matter. All my SVGs have height and width..yet some get displayed and some don’t.
December 27, 2018 at 1:30 pm #98644
Artem TemosKeymasterHave you added the code we sent you and uploaded your icons with ID attributes?
December 27, 2018 at 2:04 pm #98658
Adrenaline22ParticipantOf course. Do you need screenshots?
The PHP code is added in the functions.php of the child theme. Child theme is uploaded and selected in appearence > Themes. ID is added in SVGs.
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="31" height="65" viewBox="0 0 31 65" fill="none" id="svg-arrow-1"><path d="M30.8 32.5L0 65L19.8 32.5L7.3 0L30.8 32.5Z" fill="url(#paint0_linear)"></path><defs><linearGradient id="paint0_linear" x1="15.415" y1="65.02" x2="15.415" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0.28" stop-color="#F26222"></stop><stop offset="0.53" stop-color="#FEBC11"></stop><stop offset="0.84" stop-color="#F26222"></stop></linearGradient></defs></svg>
December 27, 2018 at 2:07 pm #98660
Artem TemosKeymasterPlease, send us your FTP access.
Thank you
December 27, 2018 at 2:13 pm #98662
Adrenaline22ParticipantHere are the credentials:
December 27, 2018 at 2:14 pm #98665
Adrenaline22Participant…
December 27, 2018 at 2:16 pm #98667
Artem TemosKeymasterAnd what is the password?
December 27, 2018 at 2:17 pm #98670
Adrenaline22Participantsorry
December 27, 2018 at 2:20 pm #98673
Artem TemosKeymasterThis password seems to be wrong and now we are blocked by your server http://prntscr.com/m06jbj
December 27, 2018 at 3:36 pm #98695
Adrenaline22ParticipantThe credentials are good, I’ve tested them. When logging with FTP you must choose Plain Ftp (Unsercure).
You have to give me your IP, probably the firewall has blocked due to many unsuccessful atempts.
December 27, 2018 at 3:36 pm #98696
Artem TemosKeymasterOur IP is shown on the screenshot we sent you earlier.
December 27, 2018 at 3:42 pm #98699
Adrenaline22ParticipantYour IP is not blocked by the firewall. Did you try to access via plain/unsercure FTP? I can access only this way.
-
AuthorPosts
- You must be logged in to create new topics. Login / Register