4

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!

Improve this question
5
  • 2
    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, 2018 at 22:15
  • 1
    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, 2018 at 21:09
  • @TomJNowell yup, its good for acquiring image aspect ratio
    – Vadim H
    Oct 22, 2018 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, 2018 at 23:59
  • No I haven't. You're right, all we're after is the aspect ratio. However, WordPress doesn't have a default field for aspect ratio on attachments, just the dimensions. So I'm not sure how to formulate that question
    – Vadim H
    Jul 21, 2022 at 13:35

2 Answers 2

Reset to default
2

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/

Improve this answer
1
  • 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, 2018 at 19:33
0

you can add a width and height tag in the svg code to the svg tag and wordpress will see these dimensions

Improve this answer
1
  • The text of the question explicitly states that the dimensions contained in the SVG document are not being recognized by WordPress. Could you elaborate on this answer?
    – bosco
    Jul 20, 2022 at 16:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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