Using svg image in image field returns null

nikunp commented 5 months ago

Description

When I use an svg image in the acf image field I get null but if I change it to a jpg it returns the proper value

Steps to reproduce

Change image from svg to jpg and rerun query

PHP or JSON export of the ACF Field Group(s)

{
    "key": "group_64a85b591396d",
    "title": "Home",
    "fields": [
        {
            "key": "field_64a85bb12b0a5",
            "label": "Header",
            "name": "",
            "aria-label": "",
            "type": "tab",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "placement": "left",
            "endpoint": 0,
            "selected": 0
        },
        {
            "key": "field_64de296062728",
            "label": "Morning Greeting",
            "name": "morning_greeting",
            "aria-label": "",
            "type": "text",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "show_in_graphql": 1,
            "default_value": "",
            "maxlength": "",
            "placeholder": "",
            "prepend": "",
            "append": ""
        },
        {
            "key": "field_64de297362729",
            "label": "Afternoon Greeting",
            "name": "afternoon_greeting",
            "aria-label": "",
            "type": "text",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "show_in_graphql": 1,
            "default_value": "",
            "maxlength": "",
            "placeholder": "",
            "prepend": "",
            "append": ""
        },
        {
            "key": "field_64de297e6272a",
            "label": "Evening Greeting",
            "name": "evening_greeting",
            "aria-label": "",
            "type": "text",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "show_in_graphql": 1,
            "default_value": "",
            "maxlength": "",
            "placeholder": "",
            "prepend": "",
            "append": ""
        },
        {
            "key": "field_64a85ba403d1f",
            "label": "Description",
            "name": "description",
            "aria-label": "",
            "type": "textarea",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "default_value": "",
            "maxlength": "",
            "rows": "",
            "placeholder": "",
            "new_lines": ""
        },
        {
            "key": "field_64a85be02b0a6",
            "label": "Tiles",
            "name": "",
            "aria-label": "",
            "type": "tab",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "placement": "left",
            "endpoint": 0,
            "selected": 0
        },
        {
            "key": "field_64a85c0a17d3b",
            "label": "Tiles",
            "name": "tiles",
            "aria-label": "",
            "type": "repeater",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "layout": "block",
            "pagination": 0,
            "min": 1,
            "max": 0,
            "collapsed": "",
            "button_label": "Add Tile",
            "rows_per_page": 20,
            "sub_fields": [
                {
                    "key": "field_64a889325cf0f",
                    "label": "Icon",
                    "name": "icon",
                    "aria-label": "",
                    "type": "clone",
                    "instructions": "",
                    "required": 0,
                    "conditional_logic": 0,
                    "wrapper": {
                        "width": "",
                        "class": "",
                        "id": ""
                    },
                    "graphql_field_name": "icon",
                    "clone": [
                        "group_63ebf518cd87f"
                    ],
                    "display": "seamless",
                    "layout": "block",
                    "prefix_label": 0,
                    "prefix_name": 0,
                    "parent_repeater": "field_64a85c0a17d3b"
                },
                {
                    "key": "field_64a88b211bc3a",
                    "label": "Title",
                    "name": "title",
                    "aria-label": "",
                    "type": "text",
                    "instructions": "",
                    "required": 0,
                    "conditional_logic": 0,
                    "wrapper": {
                        "width": "",
                        "class": "",
                        "id": ""
                    },
                    "default_value": "",
                    "maxlength": "",
                    "placeholder": "",
                    "prepend": "",
                    "append": "",
                    "parent_repeater": "field_64a85c0a17d3b"
                },
                {
                    "key": "field_64a88b3c1bc3b",
                    "label": "Description",
                    "name": "description",
                    "aria-label": "",
                    "type": "textarea",
                    "instructions": "",
                    "required": 0,
                    "conditional_logic": 0,
                    "wrapper": {
                        "width": "",
                        "class": "",
                        "id": ""
                    },
                    "default_value": "",
                    "maxlength": "",
                    "rows": "",
                    "placeholder": "",
                    "new_lines": "",
                    "parent_repeater": "field_64a85c0a17d3b"
                },
                {
                    "key": "field_64a88b461bc3c",
                    "label": "Links",
                    "name": "links",
                    "aria-label": "",
                    "type": "repeater",
                    "instructions": "",
                    "required": 0,
                    "conditional_logic": 0,
                    "wrapper": {
                        "width": "",
                        "class": "",
                        "id": ""
                    },
                    "layout": "block",
                    "pagination": 0,
                    "min": 1,
                    "max": 3,
                    "collapsed": "",
                    "button_label": "Add Link",
                    "rows_per_page": 20,
                    "parent_repeater": "field_64a85c0a17d3b",
                    "sub_fields": [
                        {
                            "key": "field_64a88b651bc3d",
                            "label": "Link Name",
                            "name": "link_name",
                            "aria-label": "",
                            "type": "text",
                            "instructions": "",
                            "required": 0,
                            "conditional_logic": 0,
                            "wrapper": {
                                "width": "",
                                "class": "",
                                "id": ""
                            },
                            "default_value": "",
                            "maxlength": "",
                            "placeholder": "",
                            "prepend": "",
                            "append": "",
                            "parent_repeater": "field_64a88b461bc3c"
                        },
                        {
                            "key": "field_64a88b711bc3e",
                            "label": "Url",
                            "name": "url",
                            "aria-label": "",
                            "type": "text",
                            "instructions": "",
                            "required": 0,
                            "conditional_logic": 0,
                            "wrapper": {
                                "width": "",
                                "class": "",
                                "id": ""
                            },
                            "default_value": "",
                            "maxlength": "",
                            "placeholder": "",
                            "prepend": "",
                            "append": "",
                            "parent_repeater": "field_64a88b461bc3c"
                        }
                    ]
                }
            ]
        }
    ],
    "location": [
        [
            {
                "param": "page_template",
                "operator": "==",
                "value": "page-templates\/home.php"
            }
        ]
    ],
    "menu_order": 0,
    "position": "normal",
    "style": "default",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": [
        "the_content"
    ],
    "active": true,
    "description": "",
    "show_in_rest": 1,
    "show_in_graphql": 1,
    "graphql_field_name": "home",
    "map_graphql_types_from_location_rules": 1,
    "graphql_types": [
        "Page",
        "Template_Home"
    ],
    "modified": 1718395053
}

{
    "key": "group_63ebf518cd87f",
    "title": "Icon",
    "fields": [
        {
            "key": "field_63eced1e3116e",
            "label": "Use Image",
            "name": "use_image",
            "aria-label": "",
            "type": "true_false",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "message": "",
            "default_value": 0,
            "ui_on_text": "",
            "ui_off_text": "",
            "ui": 1
        },
        {
            "key": "field_63eced3b3116f",
            "label": "Image",
            "name": "image",
            "aria-label": "",
            "type": "image",
            "instructions": "",
            "required": 0,
            "conditional_logic": [
                [
                    {
                        "field": "field_63eced1e3116e",
                        "operator": "==",
                        "value": "1"
                    }
                ]
            ],
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "return_format": "url",
            "library": "all",
            "min_width": "",
            "min_height": "",
            "min_size": "",
            "max_width": "",
            "max_height": "",
            "max_size": "",
            "mime_types": "",
            "preview_size": "medium",
            "show_in_graphql": 1,
            "graphql_description": "",
            "graphql_field_name": "image"
        },
        {
            "key": "field_64a88aad3cfa4",
            "label": "Remove Background",
            "name": "remove_background",
            "aria-label": "",
            "type": "true_false",
            "instructions": "",
            "required": 0,
            "conditional_logic": [
                [
                    {
                        "field": "field_63eced1e3116e",
                        "operator": "==",
                        "value": "1"
                    }
                ]
            ],
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "message": "Enable this if you're using a logo",
            "default_value": 0,
            "ui_on_text": "",
            "ui_off_text": "",
            "ui": 1
        },
        {
            "key": "field_64ad69fd7a11d",
            "label": "Icon Weight",
            "name": "icon_weight",
            "aria-label": "",
            "type": "select",
            "instructions": "",
            "required": 0,
            "conditional_logic": [
                [
                    {
                        "field": "field_63eced1e3116e",
                        "operator": "!=",
                        "value": "1"
                    }
                ]
            ],
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "show_in_graphql": 1,
            "choices": {
                "fa-solid": "Solid",
                "fa-regular": "Regular",
                "fa-light": "Light",
                "fa-thin": "Thin"
            },
            "default_value": false,
            "return_format": "value",
            "multiple": 0,
            "allow_null": 0,
            "ui": 0,
            "ajax": 0,
            "placeholder": ""
        },
        {
            "key": "field_64ad6a457a11e",
            "label": "Icon Class",
            "name": "icon_class",
            "aria-label": "",
            "type": "text",
            "instructions": "",
            "required": 0,
            "conditional_logic": [
                [
                    {
                        "field": "field_63eced1e3116e",
                        "operator": "!=",
                        "value": "1"
                    }
                ]
            ],
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "show_in_graphql": 1,
            "default_value": "",
            "maxlength": "",
            "placeholder": "",
            "prepend": "",
            "append": ""
        },
        {
            "key": "field_63ebf53f09018",
            "label": "Color",
            "name": "color",
            "aria-label": "",
            "type": "select",
            "instructions": "",
            "required": 0,
            "conditional_logic": [
                [
                    {
                        "field": "field_63eced1e3116e",
                        "operator": "!=",
                        "value": "1"
                    }
                ]
            ],
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "choices": {
                "denim": "Denim",
                "electric": "Electric",
                "jade": "Jade",
                "lemon-lime": "Lemon-Lime",
                "tangerine": "Tangerine",
                "danger": "Danger",
                "interactive": "Interactive",
                "warning": "Warning",
                "iris": "Iris",
                "fuchsia": "Fuchsia",
                "white": "White"
            },
            "default_value": false,
            "return_format": "value",
            "multiple": 0,
            "allow_null": 0,
            "ui": 1,
            "ajax": 0,
            "placeholder": ""
        },
        {
            "key": "field_63ebf57309019",
            "label": "Shade",
            "name": "shade",
            "aria-label": "",
            "type": "select",
            "instructions": "",
            "required": 0,
            "conditional_logic": [
                [
                    {
                        "field": "field_63eced1e3116e",
                        "operator": "!=",
                        "value": "1"
                    },
                    {
                        "field": "field_63ebf53f09018",
                        "operator": "!=",
                        "value": "white"
                    }
                ]
            ],
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "choices": {
                "50": "50",
                "100": "100",
                "200": "200",
                "300": "300",
                "400": "400",
                "425": "425",
                "500": "500",
                "600": "600",
                "700": "700",
                "800": "800",
                "900": "900"
            },
            "default_value": 500,
            "return_format": "value",
            "multiple": 0,
            "allow_null": 0,
            "ui": 1,
            "ajax": 0,
            "placeholder": ""
        }
    ],
    "location": [
        [
            {
                "param": "post_type",
                "operator": "==",
                "value": "post"
            }
        ]
    ],
    "menu_order": 0,
    "position": "normal",
    "style": "default",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": "",
    "active": false,
    "description": "",
    "show_in_rest": 0,
    "show_in_graphql": 0,
    "graphql_field_name": "icon",
    "map_graphql_types_from_location_rules": 0,
    "graphql_types": "",
    "modified": 1718397854
}

Additional context

No response

WPGraphQL Version

1.27.0

WPGraphQL For ACF Version

2.3.0

ACF (Advanced Custom Fields) Version. Free or Pro?

6.3.1.2 Pro

WordPress Version

6.5.4

PHP Version

8.1

Additional enviornment details

No response

Please confirm that you have searched existing issues in the repo.

[X] Yes

Please confirm that you have disabled ALL plugins except for WPGraphQL, WPGraphQL For ACF, ACF, etc.

[X] Yes
[ ] My issue is with compatibility with a specific WordPress plugin, and I have listed all my installed plugins (and version info) above.

josephfusco commented 4 months ago

Hey @nikunp, SVGs are not supported in WordPress out of the box.

Default WordPress

CleanShot 2024-07-15 at 14 31 47@2x

With SVG Support

In order to support SVGs, I activated this plugin:

CleanShot 2024-07-15 at 14 41 32@2x

This allowed me to upload an SVG, and add it to an ACF image field:

CleanShot 2024-07-15 at 14 46 01@2x

which is showing as expected in the response as an SVG 🙌🏼

CleanShot 2024-07-15 at 14 40 13@2x

nikunp commented 4 months ago

I have svg support plugin installed my issues is that it was no surfacing in graphql

jasonbahl commented 4 months ago

@nikunp can you provide more specific details on what you have tried to query? It appears that svgs are working as expected when WordPress has the SVG Support plugin installed. Are there additional steps needed to reproduce? Maybe other plugins are conflicting?

If you can share concrete steps to reproduce, and maybe share what queries are failing, etc that might help.

Does SVGs work sometimes but not other times? Like maybe they work in the Image field type but not the Gallery field type or something? The more info we have, the better we can help.

jasonbahl commented 3 months ago

I'm going to close this as we weren't able to reproduce and no additional information has been provided to help us reproduce.

If you're able to provide more information that indicates this is an issue with WPGraphQL for ACF in the future, please open a new issue and link to this one for historical context, if applicable.

wp-graphql / wpgraphql-acf