SVG support

• spinline

• December 2, 2014 at 2:50 am

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.

• Elliot

• February 26, 2015 at 2:54 pm

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

• spinline

• February 26, 2015 at 3:40 pm

This reply has been marked as private.

• Elliot

• March 16, 2015 at 10:56 am

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

• spinline

• March 23, 2015 at 2:58 am

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

svg-css-fix.....jpg

• spinline

• March 23, 2015 at 3:10 am

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

• Elliot

• March 23, 2015 at 3:40 pm

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

• spinline

• March 24, 2015 at 5:21 am

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

• spinline

• March 24, 2015 at 5:45 am

This reply has been marked as private.

• Elliot

• June 2, 2015 at 11:55 am

Thanks @spinline

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

Thanks
E

• Elliot

• June 16, 2015 at 10:51 am

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