Support » Plugin: SVG Support » Failed parsing 'srcset' attribute value since its 'w' descriptor is invalid.

  • Resolved jodamo5

    (@jodamo5)


    Hi

    The plugin works great for enabling me to upload svg files and select them in the media library.

    I’m using an SVG image for my logo. However I’m finding that I’m getting these two errors:

    Failed parsing 'srcset' attribute value since its 'w' descriptor is invalid. jquery.js?ver=1.12.4:3
    
    Dropped srcset candidate http://mydomain/main/wp-content/uploads/2016/06/logo.svg jquery.js?ver=1.12.4:3

    After some research I found that this is due to my theme using scrset on images. The theme pulls in the width of the image from the core WP function wp_get_attachment_image_src. It uses that width in the srcset. However because the SVG doesn’t have a defined width as such, the HTML ends up like this:

    srcset=\"https:\/\/duoplus.nz\/main\/wp-content\/uploads\/2016\/06\/Duoplus-logo.svg 0w\"   sizes=\"0px\"

    Which is what causes the errors.

    I’m not sure how it all works, but would it be possible at all for this SVG plugin to get WP to return a defined width when the wp_get_attachment_image_src is used to query image properties? Would that be somehow possible? Or is any other way possible to get WP to know the width it should return?

    Thanks
    Josh

    https://wordpress.org/plugins/svg-support/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hey,

    Thanks for your support!
    I’ll have a look into this. On quick glance it might be better for the theme to sort it out.
    But I may be wrong. I’m working on a bunch of new features for an update right now, so will check this out too.

    Thanks. Because SVG isn’t officially supported by WordPress I don’t think the theme will be concerned with fixing this.

    However in researching this I have found that since WP 4.3 there is now a filter available on wp_get_attachment_image_src

    Here’s the documentation:
    https://developer.wordpress.org/reference/hooks/wp_get_attachment_image_src/

    So would it be possible to add a filter that says, “If width = 0 then return width = 2000” (or some other big figure). Width = 0 would only apply to an SVG image. So in my mind that would work. The actual display width is set by CSS, but this would enable the width parameter that wp_get_attachment_image_src returns to be nice and large.

    Trouble is, I don’t know how to write a filter that will only affect the width and nothing else.

    Do you think this approach would work?

    Hi. A developer on my team has solved this by writing a filter as described above. If checks if an image has zero width, and if so, returns an width of 2000px. Which solves the srcset issues. (This isn’t telling the image to display at 2000px, it is just telling the front end that the original size is 2000px wide. Since it’s an SVG any number will work. By making it a large number, it will work well with any srcset settings).

    Here is the code if you’re interested:

    function wp_get_attachment_image_src_callback_for_svg( $image, $attachment_id, $size ) {
    
    	if( empty( $image ) || !is_array( $image ) ) { return null; }
    
    	if ( !empty( $image ) ) {
    
    		if( $image[1] == 0 ) {
    
    			$image[1] = 2000;
    
    		}
    
    	}
    	return $image;
    
    }
    add_filter( 'wp_get_attachment_image_src', 'wp_get_attachment_image_src_callback_for_svg', 10, 3 );
    Plugin Author Benbodhi

    (@benbodhi)

    Thanks for providing your fix.
    I will consider using this in the next release.

    A quick update – which this code works fine in most situations, I have found a few situations where a theme will pull in svg image at the full width we coded (2000px wide). So for those situations, it makes sense to instead set the width at the maximum size you’ll want the image to display in your theme.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Failed parsing 'srcset' attribute value since its 'w' descriptor is invalid.’ is closed to new replies.