Support

Account

Home Forums Backend Issues (wp-admin) SVG support

Solving

SVG support

  • A responsive svg image has no specific dimensions. Therefore, when it’s added via ACF image uploader, the svg preview is not being displayed properly.

    Currently the css looks like this (ACF v5.1.4 ~Line 708):

    
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .acf-image-uploader img {
    width: auto;
    }
    }
    

    In Web Inspector, changing width to 100% fixed it. Please consider modifying ACF’s stylesheet.

  • Hi @spinline

    Thanks for the topic.

    I’m looking at the input.css file in the latest version (5.1.9) and the CSS looks like this:

    
    
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    	
    	.acf-image-uploader img {
    		width: auto;
    		max-width: 100%;
    	}
    	
    }
    

    Perhaps the max-width will help the .svg?

    Can you also attach a screenshot of the issue so I can better understand how to fix it?

    Thanks
    E

  • This reply has been marked as private.
  • Hi @spinline

    Thanks for the info.
    I’m not sure if I want the svg to use 100% width, as this could make for huge images on the page (1200px wide). Instead, the auto width allows the svg to determine it’s normal state.

    Can you send a screenshot of what you SVG looks like so I can better understand the issue?

    Thanks
    E

  • @elliot I’m not sure why my screenshot didn’t attach last time. I’ll try again…

  • @elliot First of all, shame on me, I didn’t optimize those svgs as I normally would through grunt or gulp.

    I’ve included the svg code for one of the svg images as seen in my screenshot earlier from this thread.

    
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 584.8 149.9" enable-background="new 0 0 584.8 149.9" xml:space="preserve">
    <g>
    	<path fill="#FFFFFF" d="M158.2,17.5c-1.2,0-2.3-0.1-3.3-0.4c-1-0.2-1.8-0.5-2.3-0.9l0.4-3.5c0.5,0.5,1.2,0.9,2.1,1.3
    		c0.9,0.3,2,0.5,3.1,0.5c2,0,3-0.6,3-1.8c0-0.4-0.1-0.7-0.3-1s-0.4-0.5-0.6-0.7c-0.3-0.2-0.6-0.4-0.9-0.5c-0.3-0.1-0.6-0.3-0.9-0.4
    		l-2.3-0.8l-1-0.4c-1-0.4-1.7-0.9-2.2-1.5c-0.5-0.6-0.7-1.4-0.8-2.4c0-0.6,0.1-1.3,0.4-1.9c0.2-0.6,0.6-1.1,1.1-1.6
    		c0.5-0.5,1.1-0.9,1.9-1.1s1.7-0.4,2.7-0.4c0.5,0,1.1,0,1.6,0.1c0.5,0.1,1,0.2,1.5,0.3c0.5,0.1,0.9,0.3,1.3,0.4
    		c0.4,0.2,0.7,0.3,0.9,0.5l-0.3,3.1c-1.9-1-3.5-1.5-4.9-1.5c-0.4,0-0.8,0-1.2,0.1c-0.4,0.1-0.7,0.2-1,0.3c-0.3,0.1-0.5,0.3-0.7,0.6
    		c-0.2,0.2-0.3,0.5-0.3,0.8c0,0.4,0.1,0.7,0.3,1c0.2,0.2,0.5,0.4,0.9,0.6c0.4,0.2,0.9,0.4,1.5,0.5c0.6,0.2,1.3,0.4,2.1,0.7l1.3,0.5
    		c0.3,0.1,0.7,0.3,1.1,0.6c0.4,0.2,0.7,0.5,1,0.9s0.6,0.8,0.8,1.2c0.2,0.5,0.3,1,0.3,1.6c0,0.5-0.1,1.1-0.2,1.7
    		c-0.1,0.6-0.4,1.1-0.9,1.7c-0.4,0.5-1.1,1-2,1.3C160.8,17.3,159.7,17.5,158.2,17.5z"/>
    </g>
    <!-- a bunch of paths more… -->
    </svg>
    
  • Hi @spinline

    Thanks for the screenshot. Lastly, what browser are you using?

    Can you try another to see if the image issue is browser dependent?

    Thanks
    E

  • @elliot My screenshots were from Chrome v 41.x desktop.

    In Firefox 36.x desktop, it’s setting the width to auto, as you intended, but the height is always set to 30px tall. Although, it’s not as bad as Chrome, it still looks pretty bad.

    In Safari 8.x desktop, it looks as you probably intended – perfect!

    IE11 gets it right, too.

  • This reply has been marked as private.
  • Thanks @spinline

    I’ll do some testing in different browsers, that seems to be the issue here.

    Thanks
    E

  • Hi @spinline

    Thanks again for your help with this.

    I’ve changed the CSS to avoid the chrome ‘small preview’ issue.
    Now all svg’s have a min width and height.
    All browsers should now be more similar to the firefox preview.

    I’ll include this in the next version

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.