SVG Image Widht and Height Values

  • Resolved Droidism

    (@droidism)


    7 years, 4 months ago

    After uploading and installing Safe SVG I tried experimenting with it. I was succesfully able to upload a couple of svg’s and add them to a page.

    The problem however is that both SVG’s have a width and height attribute value set of 2000px. This regardless of the actual SVG file having a viewbox width and height of 280px x 280px.

    After looking in the plugin code I see that save-svg.php has a function fix_admin_preview() (line 175) that has a foreach loop that defines the height and width values to 2000. Changing these to 280 results in a SVG displaying as 280px on the front-end. Could this be a theme or a plugin issue?

    If you need any other info, let me know.

    Thanks in advance for your time and effort in helping me out.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Daryll Doyle

    (@enshrined)

    Hi @droidism,

    Thanks for the bug report. That loop was only supposed to come into play in the admin area, otherwise the SVG comes in with a height/width of 0 and doesn’t actually show.

    I’ll take a look tonight and see what I can do to fix it for you!

    Thanks again for the report, I’ll comment back here when I have some news for you ??

    Cheers,
    Daryll

    Thread Starter Droidism

    (@droidism)

    Wow, That is a very quick response!

    Thanks for lookin into this. I will wait for your fix and update this thread with the outcome on my end.

    Have a great day and we write each other on a later moment.

    Ciao

    Plugin Contributor Daryll Doyle

    (@enshrined)

    Hi @droidism,

    I’ve been looking into this issue but can’t seem to replicate it myself.

    When I insert an SVG from the media library into the page either by itself or in a gallery I don’t get 2000 set as the width on it.

    Can you let me know if you get this issue with one of the default WordPress themes? If that sorts the issue, can you let me know what theme you’re using so I can look into it.

    If that doesn’t sort the issue, can you let me know the steps you’re using to produce this issue please?

    Cheers,
    Daryll

    Thread Starter Droidism

    (@droidism)

    Hi @enshrined,

    Excuses for the delayed response, somehow I managed to completeley overlook the WP Forums email in the email cue.

    In answer to your question: the Beaver Builder Pro Plugin and Beaver Builder theme, both the latest versions.

    After your suggestion about trying a standard theme I got a idea that I wanted to try out. So I did not deactivate any plugins or switch theme, but rather simply just created a new page, added an image in the “regular” way via Page -> Add Media, selected an svg, saved the page and viewed the front-end and Yup, the image is show in 280px x 280px as specified in the SVG view box properties. So definitely a conflict between Save SVG and the Beaver Builder plugin, vice versa.

    I did notice however that one of my SVG’s has a gradient on the bottom that got stripped out and it is now a solid colour. This is ofcourse a completely different problem and if you prefer i can create a new topic for this.

    Again, thanks for your time and all your effort!

    Those dimensions do not get passed with image data using functions like wp_get_attachment_image_src; when inserting into a page via Add Media, width and height attributes are not set. Is that a limitation of WP’s handling of images / image meta data, or could Safe SVG be extended to provide those values?

    WordPress reports SVG dimensions as 0x0.

    I get what you’re saying – it would be nice if it would set the img width/height to the art board size (simply for convenience, rather than 0x0 which is invisible), which can easily be overridden with CSS.

    That said, is it better to default to its art board size, or is it better to set the dimensions of all SVGs to “width: 100%; height: auto;” since you’ll have to set individual sizes for certain vectors anyway (ie, those that should not span or are default-sized incorrectly)? Personally, I feel like the latter is more desirable, I think.

    Plugin Contributor Daryll Doyle

    (@enshrined)

    Hi @swinggraphics,

    hendridm is correct, WordPress always reports image dimensions as 0x0 due to the way that the sizes are generated.

    Whilst it may be possible to scrape the SVG content for artboard sizes, it’s not something I’ve looked at yet. I will definitely add it to the backlog to be looked at though.

    In the meantime, CSS is the way to go. As most of my SVGs are set as background images that’s usually the best way I find.

    Cheers,
    Daryll

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘SVG Image Widht and Height Values’ is closed to new replies.