2

Having successfully uploaded an SVG image through WordPress's back-end media uploader with the help of a third party plugin such as Safe SVG by Daryll Doyle, how can one get the image's dimensions that are stored in the SVG file's width, height, or viewBox attributes to use in front-end with WordPress functions such as wp_get_attachment_image_src() ?

Unlike other types of images such as PNG and JPEG, WordPress does not store SVG image's dimensions into its system.

Here's a regular PNG: enter image description here

And here's an SVG image: enter image description here

Maybe there's some kind of hook we could use in theme's functions.php that fires whenever you upload a file through WordPress's back-end in order to acquire those dimensions and write them directly into the database for that attachment?

Thanks!

  • 1
    I would keep in mind that an SVG is a document, not an image, and can contain everything from vector lines, to iframes, script tags, and html markup. This isn't a safe image format, it's an entire doc spec that has more in common with a static web page than a JPEG, and has its own exploits and security considerations. If you've allowed SVG uploads, I hope you've added sanitising and purifier libraries to make them safe – Tom J Nowell Oct 8 '18 at 22:15
  • Also keep in mind that SVG graphics are vector graphics, vectors don't have dimensions like raster images do as they can be scaled up and down infinitely – Tom J Nowell Oct 21 '18 at 21:09
  • @TomJNowell yup, its good for acquiring image aspect ratio – Vadim H Oct 22 '18 at 22:02
  • If it's the aspect ratio you're after have you tried asking for that instead of the dimensions? – Tom J Nowell Oct 22 '18 at 23:59
1

I agree with Tom J Nowell on the use of SVG, but if the upload is an actual image, you can tap into the attachment attributes using, as you suggested, wp_get_attachment_image_src.

Those dimensions are actually already recorded and stored when using the WP media uploader, it's likely that the plugin you're using makes use of the WP media uploader.

There are four attributes stored (0=URL,1=Width,2=Height,3=is_intermediate) if the attachment is an image, false if it's not an image.

So you can call and echo those attributes like in this example:

$img_atts = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
$img_src = $img_atts[0];

I use this to echo an image's dimensions (atts 1 & 2) to create per-post OG tags for og:image:width and og:image:height (along with other OG tags).

You can find more info here: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

  • The plugin I'm using is Safe SVG by Daryll Doyle. And no, the dimensions are not recorded when using WP media uploader for SVG images, they're only recorded for other types of images (PNG, JPEG, ...). Thus when trying to use wp_get_attachment_image_src() on an uploaded SVG image attachment, the ['width'] and ['height'] array elements are empty. Thus, I'm down-voting this answer, sorry, but thanks anyway! – Vadim H Oct 21 '18 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.