I’ve added SVG support in WordPress using the plugin “Safe SVG”. It works fine, except with ACF Image fields with size requirements. I have a minimum width of 400 pixels set on the field. SVGs are scalable, so they should not be included in the size requirements.
Is there a way to fix this while still keeping the size requirements for raster formats?
@gavin310 I’m not sure about how to override the functionality of the size requirements specifically for svgs in ACF. When I ran into this issue my svg image file had a small width/height, even though it’s scalable. It was easy to tell because putting the svg on a page without any height width attributes it still rendered small rather than filling the existing container. The only advice I have is to edit the size of the svg before uploading. Unfortunately I don’t know exactly how to do that. I had to have our graphic designer do it for me.
@kiwicreative Thanks for the response. My SVG actually doesn’t have any width or height attributes, just the standard viewBox coordinates. I manually clean up every SVG I use and never include set widths or heights. Now that you mention it though, I’m wondering if it’s using the viewBox coordinates to check the dimensions? I guess that would be up to the SVG plugin? I’ll need to do some poking around…
It turns out it’s the viewBox parameter that’s being used to calculate the SVG’s width and height. That’s incorrect as the viewBox simply defines the base rectangle and ratio. Only when an SVG has explicit width and height parameters should it be treated as a static size.
I believe that ACF depends on the PHP function getimagesize() which will not work with SVG images. Or it is using a WP function to get the image size which probably also depends on the same PHP function. You likely will not be able to use do what you’re trying to do.
@hube2 So it must be the SVG plugin (Safe SVG in my case) that extends getimagesize() and other functions so they can read the viewBox attribute of SVG images. That’s good to know, thanks!
Just had a look into it. ACF calls getimagesize() directly. It does not appear that there is a WP function for getting the image size that another plugin could hook into. Digging through WP I see that it also calls getimagesize().
You’re issue here is with PHP but also that SVG is not an image but an XML file. That being said, you can’t use an image field to upload SVG and expect to be able to restrict the image size.
I would either use a file field and only allow SVG uploads, or have a condional field to select “SVG” or “Standard Image” and have a different field for each.
I do not know if this validation can be turned off conditionally based on the file type uploaded. It may be possible…. The validation is done during the upload. You may be able to create an acf/load_field filter for your image field. In your filter somehow detect if a file is currently being uploaded, if so then check to see what type of file it is and if it is an SVG file then to remove any dimension and size requirements for the field. This would cause ACF to skip validating these things.
Has anyone figured out a solution for this SVG problem?
@prowebassist As far as I know you need to resize the SVG so that the viewbox meets the required dimensions. I’ve been doing that lately and haven’t run into any more issues.
If anyone is still having a problems with this, one thing I noticed that was caused an issue with uploading SVGs is the lack of a proper <xml> tag at the start of every SVG file. So now I make sure to add a <?xml version="1.0" encoding="utf-8"?> to the start of every SVG file.
Also, I make sure to have height, width and viewBox declarations in the opening <svg> tag as well. So something like <svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 100 200" xml:space="preserve" y="0" x="0" version="1.1">.
Since I started doing that, I haven’t had any problems with uploading SVGs.
TIP: I’d also recommend to install an awesome little plugin called Safe SVG, which adds secure SVG upload capability to WP, and as a bonus helps display SVGs properly in the Media library. Otherwise your Media Library will be filled with a bunch of generic WP placeholders, instead of actual SVG image thumbnails.
