Home Forums WoodMart support forum BUG: SVG gets colored with primary color

BUG: SVG gets colored with primary color

Viewing 30 posts - 1 through 30 (of 33 total)
  • Author
    Posts
  • #98043

    Adrenaline22
    Participant

    Hi,

    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.

    #98076

    Artem Temos
    Keymaster

    Hi,

    We tested both links and the icons are displayed identically there. Please, send us a screenshot of the problem for a better understanding.

    Regards

    #98174

    Adrenaline22
    Participant

    please check the attachment

    Attachments:
    You must be logged in to view attached files.
    #98196

    Artem Temos
    Keymaster

    Please, send us your admin access.

    #98253

    Adrenaline22
    Participant

    Credentials:

    #98266

    Artem Temos
    Keymaster

    We see this page when trying to access https://gyazo.com/b37074fae6563fdfdfd8dab8c0f0a7c2

    #98318

    Adrenaline22
    Participant

    from which country are you accessing?

    #98331

    Artem Temos
    Keymaster

    Try 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/b058355641db9d9288125f3edb8834f8

    #98359

    Adrenaline22
    Participant

    added id, removed animations…doesn’t work

    exported from figma and illustrator…same result.

    A wild guess would be that it doesn’t handle gradients…

    #98370

    Artem Temos
    Keymaster

    Yes, 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.

    #98371

    Adrenaline22
    Participant

    I will upload SVGs. In a moment.

    #98423

    Artem Temos
    Keymaster

    We see that your current SVG icons without ID attribute. Please, add the ID attribute first.

    #98431

    Artem Temos
    Keymaster

    And 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;
    	}
    #98617

    Adrenaline22
    Participant

    Added 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.

    #98619

    Adrenaline22
    Participant

    on 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…

    #98620

    Artem Temos
    Keymaster

    Please, do both things and upload your icons so we can test it.

    #98621

    Adrenaline22
    Participant

    Ok 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…

    #98623

    Adrenaline22
    Participant

    – 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 Library

    #98625

    Adrenaline22
    Participant

    I 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.

    #98644

    Artem Temos
    Keymaster

    Have you added the code we sent you and uploaded your icons with ID attributes?

    #98658

    Adrenaline22
    Participant

    Of 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>

    #98660

    Artem Temos
    Keymaster

    Please, send us your FTP access.

    Thank you

    #98662

    Adrenaline22
    Participant

    Here are the credentials:

    #98665

    Adrenaline22
    Participant

    #98667

    Artem Temos
    Keymaster

    And what is the password?

    #98670

    Adrenaline22
    Participant

    sorry

    #98673

    Artem Temos
    Keymaster

    This password seems to be wrong and now we are blocked by your server http://prntscr.com/m06jbj

    #98695

    Adrenaline22
    Participant

    The 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.

    #98696

    Artem Temos
    Keymaster

    Our IP is shown on the screenshot we sent you earlier.

    #98699

    Adrenaline22
    Participant

    Your IP is not blocked by the firewall. Did you try to access via plain/unsercure FTP? I can access only this way.

Viewing 30 posts - 1 through 30 (of 33 total)